简单的网页布局（Div+CSS）<CSS盒模型+Div嵌套>：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>新浪网局部布局</title>
  <style>
    *{
     margin: 0px auto;
     padding: 0px;
    }
   .top-nav{
    width: 100%;
    height: 40px;
    background-color:#CCCCCC;
    }
   .container{
    width: 100%;
    border: 1px solid black;
   }
   .content{
    width: 1000px;
    height: 800px;
    border: 1px solid black;
   }
   .logo-banner, .content-nav{
    width: 100%;
    height: 40px;
    border: 1px solid black;
   }
   .logo-left{
    width: 30%;
    height: 40px;
    border: 1px solid black;
    float: left;
   }
   .logo-right{
    width: 30%;
    height: 40px;
    border: 1px solid black;
    float:right;
   }
   .content-nav{
    background-color: darkgreen;
   }
   .content-2{
    width: 60%;
    height: 400px;
    background-color: blueviolet;
    float: left;
   }
   .content-3{
    width: 40%;
    height: 400px;
    background-color:brown;
    float: left;
   }
  </style>
 </head>
 <body>
   <div class="top-nav"></div>
   <div class="container">
    <div class="content">
     <div class="logo-banner">
      <div class="logo-left"></div>
      <div class="logo-right"></div>
     </div>
     <div class="content-nav"></div>
     <div class="content-1">
      <div class="content-2"></div>
      <div class="content-3"></div>
     </div>
    <div style="clear: both;"></div>
   </div>
    
   </div>
 </body>
</html>

利用Div+CSS整体布局页面的操作流程的更多相关文章

  1. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  2. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  3. 表格布局扩展/DW设计界面中快速整体布局页面的操作

    DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  6. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  7. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  8. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  9. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

随机推荐

  1. Failed to sync Gradle project 'XX'错误解决

    错误代码 Failed to sync Gradle project 'WeChat' Error:Failed to find target with hash string 'android-24 ...

  2. php 时间戳转化成天数 四舍五入 整数

    public function edit() { global $_W; global $_GPC; $openid=$_W['openid']; $boards = pdo_fetchall('se ...

  3. seajs源码阅读

    乘着周日有点时间,阅读一下玉伯大神的源码. seajs的源码写得真的很好,很是佩服,工整美观不愧是大神,造福百姓. 说起seajs不得不说,AMD和CMD的区别.  CMD 推崇依赖就近,AMD 推崇 ...

  4. pl_sql develope连接远程数据库的方法

    需要修改你所安装的数据的路径下 tnsnames.ora 文件(我安装路径是F:\app\Aside\product\11.2.0\dbhome_1\NETWORK\ADMIN) tnsnames.o ...

  5. [Splay伸展树]splay树入门级教程

    首先声明,本教程的对象是完全没有接触过splay的OIer,大牛请右上角.. 首先引入一下splay的概念,他的中文名是伸展树,意思差不多就是可以随意翻转的二叉树 PS:百度百科中伸展树读作:BoGa ...

  6. vijos1698题解

    题目: 船体的结构是不能随意修改的..那样会破坏整艘船和谐的韵律.. 虽然说.如果沿岸航行的话是不会预见太大的海浪的..但是还要小心保护轨杆和船帆.. 毕竟对于小s这样的单轨帆船...轨杆和船帆如果受 ...

  7. java操作DBF的使用

    1.引入javadbf.4.1.jar 2. import com.linuxense.javadbf.DBFField;   import com.linuxense.javadbf.DBFRead ...

  8. jmeter连接配置带跳板机（SSH）的mysql服务器

    jmeter连接配置mysql服务器时,如果数据库服务器没有通过ssh连接,则只需要配置相应的jdbc参数就可以了,即请求域名或ip地址:3306,如果数据库服务器是通过SSH连接的,那需要通过中间远 ...

  9. Dubbo Data length too large: 11557050, max payload: 8388608 传输数据超限

    com.alibaba.dubbo.remoting.transport.AbstractCodec.checkPayload() ERROR Data length too large: 11557 ...

  10. 如何通过android代码获取LTE信息？

    最近为了成功得到LTE的信号强度,尝试了很多种方法: (1)通过解析signalstrength字符串,但是不同手机设备获得的字符串排列顺序不同,代码如下: private PhoneStateLis ...