HTML CSS + DIV实现整体布局

﹏ヽ暗。殇╰゛Y 2022-08-09 15:47 227阅读 0赞

**HTML CSS + DIV实现整体布局**

**1、技术目标：**

*  开发符合W3C标准的Web页面
 *  理解盒子模型
 *  实现DIV+CSS整体布局

**2、什么是W3C标准？**  
  
    W3C：World Wide Web Consortium，万维网联盟  
    W3C的职能：负责制定和维护Web行业标准  
    W3C标准包括一系列的标准：

*  HTML内容方面：XHTML
 *  样式美化方面：CSS 
 *  结构文档访问方面：DOM
 *  页面交互方面：ECMAScript
 *  ……等等

**3、W3C倡导的Web结构要符合以下要求：**

*  XHTML负责内容组织
 *  CSS负责页面样式

**4、符合W3C规范页面的结构：**

Html代码  [![复制代码][icon_copy.gif]][icon_copy.gif 1]  [![收藏代码][icon_star.png]![spinner.gif][]][icon_star.png_spinner.gif]

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"**>** 
3.      **<****html** xmlns="http://www.w3.org/1999/xhtml"**>** 
4.      **<****head****>** 
5.          **<****meta**http-equiv="Content-Type"content="text/html; 
6.                  charset=gb2312"**/>** 
7.          **<****title****>**无标题文档**</****title****>** 
8.      **</****head****>** 
9.      **<****body****>** 
10.             ......页面内容部分 
11.     **</****body****>** 
12.     **</****html****>**

**\[html\]**  [view plain][] [copy][view plain]

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
2.          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"**>**  
3.      **<****html** xmlns="http://www.w3.org/1999/xhtml"**>**  
4.      **<****head****>**  
5.          **<****meta** http-equiv="Content-Type" content="text/html;  
6.                  charset=gb2312" **/>**  
7.          **<****title****>**无标题文档**</****title****>**  
8.      **</****head****>**  
9.      **<****body****>**  
10.             ......页面内容部分  
11.     **</****body****>**  
12.     **</****html****>**

**5、XHTML基本规范**

1.  标签名和属性名称必须小写
2.  HTML标签必须关闭
3.  属性值必须用引号括起来
4.  标签必须正确嵌套
5.  文档必须拥有一个根元素，所有的XHTML元素必须嵌套于<html>根元素中
6.  属性不能简写，如：

<input checked="checked" />  
                       <input readonly="readonly" />  
                       <option selected="selected" />  
  
**6、页面开发需要注意的地方：**

*  不要使用淘汰的标签：<b>、<font>、<marquee>等，可参考官方文档(http://www.w3c.org)
 *  < img />标签的alt属性：为图片增加alt属性
 *  样式和内容分离：将样式和结构分离，不使用行类样式
 *  表单的name和id：表单及表单元素要求设置name和id属性
 *  使用CSS + DIV布局
 *  页面的浏览器兼容性

**7、为什么需要盒子模型？**  
  
    网页可以看成由一个个"盒子"组成，如图：  
    ![4686cd14-3e57-3054-84ab-bf4f328657be.jpg][]  
  
    由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，  
    中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个  
    的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来  
  
**8、盒子模型的相关属性**

*  margin（外边距/边界）
 *  border（边框）
 *  padding（内边距/填充 ）

我们看图理解一下各属性作用：  
  
     ![d5109ffa-db5d-35e5-8d7d-59a7c572db98.jpg][]  
  
     以上属性又分为上、右、下、左四个方向  
       
     **问题：页面元素的宽度width、高度height如何计算？  
     答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度  
     比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度  
  
9、盒模型的层次关系**  
  
    我们通过一个经典的盒模型3D立体结构图来理解，如图：  
    ![32daab15-af23-3ee7-92eb-d8af13af25d0.jpg][]  
  
     **从上往下看，层次关系如下：**  
  
     第1层：盒子的边框(border)，  
     第2层：元素的内容(content)、内边距(padding)  
     第3层：背景图(background-image)  
     第4层：背景色(background-color)  
     第5层：盒子的外边距(margin)  
  
     从这个层次关系中可以看出，当同时设置背景图和背景色时，背景  
     图将在背景色的上方显示  
  
**10、margin外边距**  
     
    可统一设置或四边分开设置，如图：  
  
    ![89499150-ad2e-3483-9f56-d07914443803.jpg][]     
  
    具体的设置可查看CSS帮助文档(页面下方提供下载)  
  
**11、水平居中和垂直居中**  
  
    水平居中包含两种情况：  
        块级元素的水平居中：margin:0px auto;  
        文字内容的水平居中：text-align: center;  
      
    垂直居中：  
        常见的单行文字的垂直居中可设置文字所在行的height与  
        行高样式属性一致，比如：  
        div\{  
            width: 400px;  
            height: 400px;  
            line-height: 400px;**/\*行高与div高度一致\*/**  
        \}  
  
**12、案例的首页布局分析**

![61a376fc-4396-309a-8c6e-dfcbb7d7ab55.jpg][]  
  
         只保留DIV的布局分析：  
  
         ![f55ad7bc-3370-3dd2-b50f-6a1b2491b308.jpg][]  
  
**13、首页布局CSS + DIV代码分析  
  
    HTML结构代码：**  
    <div id="container">  
            <div id="header">顶部（header）</div>  
            <div id="main">主体部分（main）</div>  
            <div id="footer">底部（footer）</div>  
    </div>  
      
    **CSS样式代码：  
    /\*主面板样式\*/**  
    \#container \{   
        width:980px;   
        margin:0px auto;/\*主面板DIV居中\*/  
    \}  
   **/\*顶部面板样式\*/**  
    \#header \{  
        width:100%;  
        height:150px;  
        border:1px \#F00 solid;  
    \}  
    **/\*中间部分面板样式\*/**  
    \#main \{  
        width:100%;  
        height:400px;  
        border:1px \#F00 solid;  
    \}   
    **/\*底部面板样式\*/**  
    \#footer \{  
        width:100%;  
        height:100px;  
        border:1px \#F00 solid;  
    \}  
  
**14、为什么需要float浮动属性？**  
     
    我们来看看下图：  
  
    ![7bb36d89-5100-35af-aa89-2f048ade870b.jpg][]  
      
    **问题：**如何让商品分类DIV、内容DIV和右侧DIV并排放置？  
    **答案：**使用float(浮动)样式  
  
**15、浮动属性**  
  
    理解浮动属性首先要搞清楚，什么是**文档流？  
    文档流：**浏览器根据元素在html文档中出现的顺序，  
        从左向右，从上到下依次排列  
      
    浮动属性是CSS中的定位属性，用法如下：  
        **float: 浮动方向(left、right、none);**  
  
    left为左浮动、right为右浮动、none是默认值表示不浮动  
    ，**设置元素的浮动，该元素将脱离文档流，向左或向右移动  
    直到它的外边距碰到父元素的边框或另一个浮动元素的边  
    框为止**  
  
    浮动示例，没有使用浮动的3个DIV：  
    **HTML结构代码：**  
        <div id="first">第1块div</div>  
        <div id="second">第2块div</div>  
        <div id="third">第3块div</div>  
  
    **CSS样式代码：**  
        \#first, \#second, \#third\{  
                width:100px;  
                height:50px;  
                border:1px \#333 solid;  
                margin:5px;  
        \}  
  
    执行效果如图：  
    ![4cacdcc5-0d53-345d-aec5-ddac740aafa3.jpg][]

样式中加入 float:left;  
    执行效果如图：  
    ![7558028b-bdf4-325f-be14-eabc95851071.jpg][]  
      
    你再修改为 float: right试试右浮动是什么效果  
      
**16、让商品分类DIV、内容DIV和右侧DIV并排放置  
  
    HTML结构代码：**

Java代码  [![复制代码][icon_copy.gif]][icon_copy.gif 1]  [![收藏代码][icon_star.png]![spinner.gif][]][icon_star.png_spinner.gif]

1.  <div id="container"> 
2.      <div id="header">顶部（header）</div> 
3.      <div id="main"> 
4.          <div **class**="cat">商品分类(cat)</div> 
5.          <div **class**="content">内容(content)</div> 
6.          <div **class**="sidebar">右侧(sidebar)</div> 
7.      </div> 
8.      <div id="footer">底部（footer）</div> 
9.  </div>

**\[java\]**  [view plain][] [copy][view plain]

1.  <div id="container">  
2.      <div id="header">顶部（header）</div>  
3.      <div id="main">  
4.          <div **class**="cat">商品分类(cat)</div>  
5.          <div **class**="content">内容(content)</div>  
6.          <div **class**="sidebar">右侧(sidebar)</div>  
7.      </div>  
8.      <div id="footer">底部（footer）</div>  
9.  </div>

**CSS样式代码(在第13节CSS代码基础上加入)：**  
  
    .cat, .sidebar \{  
        float:left;  
        width:20%;  
        height:100%;  
    \}  
    .content \{  
        float:left;  
        width:60%;  
        height:100%;  
    \}  
  
**17、clear清除**  
  
    clear只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行  
    clear属性的取值：rigth、left、both、none  
  
**18、总结**

*  **盒子模型有哪些属性？各属性又分别包含哪些属性？**
 *  **float属性的应用场合？有哪些取值？   **
 *  **clear属性的应用场合？有哪些取值？**

[icon_copy.gif]: http://hotstrong.iteye.com/images/icon_copy.gif
[icon_copy.gif 1]: http://hotstrong.iteye.com/blog/1007472#
[icon_star.png]: http://hotstrong.iteye.com/images/icon_star.png
[spinner.gif]: /images/20220731/8c08000a40b845209097c4db422085ed.png
[icon_star.png_spinner.gif]: http://blog.csdn.net/mercop/article/details/7882000/
[view plain]: http://blog.csdn.net/mercop/article/details/7882000/#
[4686cd14-3e57-3054-84ab-bf4f328657be.jpg]: /images/20220731/93f2b60cf6b140bba3cb0c770ef051a2.png
[d5109ffa-db5d-35e5-8d7d-59a7c572db98.jpg]: /images/20220731/c95a907ed05c45208f05dd0b110a7748.png
[32daab15-af23-3ee7-92eb-d8af13af25d0.jpg]: /images/20220731/ce4c97bbbb424631a70da95a4a1241f2.png
[89499150-ad2e-3483-9f56-d07914443803.jpg]: /images/20220731/9c4b3c5cf27b4ddd9d03b057fc3d8ef2.png
[61a376fc-4396-309a-8c6e-dfcbb7d7ab55.jpg]: /images/20220731/976b51c502674851adfdb97d3ca21d9d.png
[f55ad7bc-3370-3dd2-b50f-6a1b2491b308.jpg]: /images/20220731/2390c083e71b4e99933a70f42bc17696.png
[7bb36d89-5100-35af-aa89-2f048ade870b.jpg]: /images/20220731/9e8f5119d5d542c0926e463a253ae91e.png
[4cacdcc5-0d53-345d-aec5-ddac740aafa3.jpg]: /images/20220731/a3d14ad94fe841a398529dc17a982799.png
[7558028b-bdf4-325f-be14-eabc95851071.jpg]: /images/20220731/8553fa466a4f4ca0a5df0a3fc0a609c9.png