简单的网页布局（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. h5可预览 图片ajax上传 （补更），后台数据获取方法---php

    原理是 先获取,然后手动转移文件路径,不然会被服务器自动删除 demo如下: <?php header('content-Type:text/html;charset=utf-8'); $fil ...

  2. javascript闭包的妙用——实现函数的重载

    最近在看John Resig 与 Bear Bibeault的<JavaScript 忍者秘籍>.这本书处处提现了js的魔法(从我这个写强类型语言的人看来).js能够点石成金,处处体现着它 ...

  3. vijos1059题解

    题目: XC的儿子小XC最喜欢玩的游戏用积木垒漂亮的城堡.城堡是用一些立方体的积木垒成的,城堡的每一层是一块积木.小XC是一个比他爸爸XC还聪明的孩子,他发现垒城堡的时候,如果下面的积木比上面的积木大 ...

  4. java 中的 instanceof

    instanceof是Java的一个二元操作符,和==,>,<是同一类东东.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是测试它左边的对象是否是它右边的类的实例,返回boo ...

  5. 求从n个数组任意选取一个元素的所有组合

    最近做项目碰到这个问题,如题从n个数组任意选取一个元素的所有组合.比如已知数组是[1, 3]; [2, 4]; [5]; 最后组合结果是[1, 2, 5]; [1, 4, 5];  [3, 2, 5] ...

  6. CJOJ 2171 火车站开饭店（树型动态规划）

    CJOJ 2171 火车站开饭店(树型动态规划) Description 政府邀请了你在火车站开饭店,但不允许同时在两个相连的火车站开.任意两个火车站有且只有一条路径,每个火车站最多有 50 个和它相 ...

  7. MySQL触发器更新和插入操作

    一.触发器概念 触发器(trigger):监视某种情况,并触发某种操作,它是提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动 ...

  8. 函数响应式编程及ReactiveObjC学习笔记 (三)

    之前讲了RAC如何帮我们实现KVO / 代理 / 事件 / 通知 今天先不去分析它的核心代码, 我们先看看ReactiveObjC库里面一些特别的东西,  如果大家点开ReactiveObjC目录应该 ...

  9. [补] windows C socket编程——大物实验预约

    注 : 心血来潮,想着把这两年没能记录下来的经历,写一波回忆杀.诚然,有些经历十分复杂繁琐,希望能耐下性子,写出好文章来,可惜一时不能全想起来这两年来的种种,就想起来什么便写什么吧. 时间估摸着是大一 ...

  10. saveOrupdate和 merge的区别

    merge和saveOrUpdate方法区别在于:merge方法是把我们提供的对象转变为托管状态的对象:而saveOrUpdate则是把我们提供的对象变成一个持久化对象:说的通俗一点就是:saveOr ...