简单的网页布局（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. accp8.0转换教材第11章JAjax加护扩展理解与练习

    ①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数 参数 类型 说明 url String 必选,规定发送地址 data Plain ...

  2. H3CNE实验：配置基于端口划分的VLAN及Trunk

    配置准备数据 | 设备名称 | IP地址 | VLAN网关 | 接口 | VLAN | |--------------|------------|-------------|----------|-- ...

  3. Java虚拟机-----------Java内存区域与内存溢出异常

    Java内存区域划分 Java虚拟机运行时的数据区大致可划分为五部分:方法区,堆(两部分组成Java堆内存),虚拟机栈,本地方法栈(Java栈内存),程序计数器. 1.程序计数器 程序计数器占较小的内 ...

  4. Java基础语法<三> 输入输出

    1. 读取输入 Scanner in = new Scanner(System.in);   输入一行(包含空格) String str = in.nextLine()   读取一个单词(以空白符作为 ...

  5. IT行业歧视40岁以上人群为找工作还要谎报年龄[转]

    IT行业歧视40岁以上人群为找工作还要谎报年龄(这样不好) http://www.aliyun.com/zixun/content/2_6_616161.html [赛迪网讯]4月5日消息,许多40多 ...

  6. Linux系统——运行级别

    学习之前先了解下Linux系统的运行级别和其原理,博主使用的是Linux系统中的Redhat9.0版本,之后的学习也是基于这个系统版本. Linux系统的7个运行级别(runlevel) 运行级别0: ...

  7. Charts 常见使用类型实例

    Charts是做什么的: 在我们平时的开发中,当使用到一些统计图表的时候,我们该怎样去做那些柱形的统计图.那些折线统计图.扇形统计图,亦或是你在做金融相关的项目那些股票走势等等的UI我们改怎样做?上面 ...

  8. 三．GC相关之三分钟认识GC算法

    GC算法慢慢演化,进化到了现在的分代GC.其进化过程 标记-清除算法 –> 标记-复制算法 –> 标记-整理算法 –> 分代算法. 在介绍算法之前,我们知道Java是动态加载.其特点 ...

  9. JVM学习笔记一：内存管理

    参考资料 本文参考:<深入理解Java虚拟机>作者 周志明 知识产权归作者所有 走近java java组成部分:java语言.各平台虚拟机.Class文件结构.java api 类库.第三 ...

  10. IDEA 2017注册码破解方法（转）

    进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.PHP(注意:php要小写)即可~ 如下图: 点击 Act ...