转发：HTML CSS + DIV实现整体布局 和 HTML CSS + DIV实现局部布局 和 HTML Table局部布局与浏览器兼容性

原文：http://blog.csdn.net/mercop/article/details/7882000

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代码 复制代码 收藏代码
  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.         <metahttp-equiv="Content-Type"content="text/html; 
  6.                 charset=gb2312"/> 
  7.         <title>无标题文档</title> 
  8.     </head> 
  9.     <body> 
  10.             ......页面内容部分 
  11.     </body> 
  12.     </html> 
[html] view plaincopy
 
  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、为什么需要盒子模型？

    网页可以看成由一个个"盒子"组成，如图：
    

    由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
    中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
    的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来

8、盒子模型的相关属性

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

     我们看图理解一下各属性作用：

     

     以上属性又分为上、右、下、左四个方向
     
     问题：页面元素的宽度width、高度height如何计算？
     答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
     比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度

9、盒模型的层次关系

    我们通过一个经典的盒模型3D立体结构图来理解，如图：
    

     从上往下看，层次关系如下：

     第1层：盒子的边框(border)，
     第2层：元素的内容(content)、内边距(padding)
     第3层：背景图(background-image)
     第4层：背景色(background-color)
     第5层：盒子的外边距(margin)

     从这个层次关系中可以看出，当同时设置背景图和背景色时，背景
     图将在背景色的上方显示

10、margin外边距
   
    可统一设置或四边分开设置，如图：

       

    具体的设置可查看CSS帮助文档(页面下方提供下载)

11、水平居中和垂直居中

    水平居中包含两种情况：
        块级元素的水平居中：margin:0px auto;
        文字内容的水平居中：text-align: center;
    
    垂直居中：
        常见的单行文字的垂直居中可设置文字所在行的height与
        行高样式属性一致，比如：
        div{
            width: 400px;
            height: 400px;
            line-height: 400px;/*行高与div高度一致*/
        }

12、案例的首页布局分析

       

         只保留DIV的布局分析：

         

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浮动属性？
   
    我们来看看下图：

    
    
    问题：如何让商品分类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;
        }

    执行效果如图：
    


    样式中加入 float:left;
    执行效果如图：
    
    
    你再修改为 float: right试试右浮动是什么效果
    
16、让商品分类DIV、内容DIV和右侧DIV并排放置

    HTML结构代码：
    

Java代码 复制代码 收藏代码
  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 plaincopy
 
  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属性的应用场合？有哪些取值？

 

HTML CSS + DIV实现局部布局

 

转发：http://blog.csdn.net/mercop/article/details/7882002

HTML CSS + DIV实现局部布局

 

1、本章教大家掌握2种布局方式:


    1）顶部导航菜单布局，效果图：   

 

 

    2）购物版块布局，效果图：


    

2、技术目标:
使用div + ul-li实现导航菜单布局
    使用div + dl-dt-dd实现购物版块布局

3、一般的局部布局无非采用如下的技术:
    1）div + ul(ol)-li：用于分类导航或菜单等场合
    2）div + dl-dt-dd：用于图文混编场合
    3）table-tr-td：用于图文布局或显示数据的场合
    4）form + table-tr-td：用于布局表单的场合

4、div + ul-li 布局方式，一般在如下场合使用：
        1）产品的分类导航栏
        2）导航菜单
        3）实现TAB切换效果

5、制作首页的导航主菜单：


    5.1）布局结构分析，如图：
    
   

    结构代码（完整版）： 

 

 

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC 
  2.      "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> 
  4. <html xmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6.     <title>首页</title> 
  7.     <!-- main.css为外部样式文件名 --> 
  8.     <link href="css/main.css" rel="stylesheet" type="text/css" /> 
  9. </head> 
  10. <body> 
  11. <div id="panel">        
  12.     <div id="header"> 
  13.         <div id="logo"></div> 
  14.         <div id="menu"> 
  15.             <ul> 
  16.                 <li><a href="#">首页</a></li> 
  17.                 <li><a href="#">家用电器</a></li> 
  18.                 <li><a href="#">手机数码</a></li> 
  19.                 <li><a href="#">日用百货</a></li> 
  20.                 <li><a href="#">书籍</a></li> 
  21.                 <li><a href="#">帮助中心</a></li> 
  22.                 <li><a href="#">免费开店</a></li> 
  23.                 <li><a href="#">全球咨询</a></li> 
  24.             </ul> 
  25.         </div> 
  26.     </div>        
  27. </div> 
  28. </body> 
  29. </html> 
[html] view plaincopy
 
  1. <!DOCTYPE html PUBLIC  
  2.      "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6.     <title>首页</title>  
  7.     <!-- main.css为外部样式文件名 -->  
  8.     <link href="css/main.css" rel="stylesheet" type="text/css" />  
  9. </head>  
  10. <body>  
  11. <div id="panel">         
  12.     <div id="header">  
  13.         <div id="logo"></div>  
  14.         <div id="menu">  
  15.             <ul>  
  16.                 <li><a href="#">首页</a></li>  
  17.                 <li><a href="#">家用电器</a></li>  
  18.                 <li><a href="#">手机数码</a></li>  
  19.                 <li><a href="#">日用百货</a></li>  
  20.                 <li><a href="#">书籍</a></li>  
  21.                 <li><a href="#">帮助中心</a></li>  
  22.                 <li><a href="#">免费开店</a></li>  
  23.                 <li><a href="#">全球咨询</a></li>  
  24.             </ul>  
  25.         </div>  
  26.     </div>         
  27. </div>  
  28. </body>  
  29. </html>  

 

    5.2）CSS样式分析（main.css文件代码）:  

 

    /*注意：案例中使用的图片在页面下方提供有下载*/
    /*在开发阶段，为div加入边框，便于调整和判断div的位置*/
    div{
        border: 1px solid blue;
    }
    body{
        margin: 0px;
        padding: 0px;
    }
    /*主面板div样式*/
    #panel{   
        width: 980px;
        margin: 0px auto;/*div居中显示*/
    }
    /*顶部div样式*/
    #header{
        /*设置div的背景图片*/
        background-image: url(images/h_bg.jpg);
        height: 132px;
    }
    /*网站logo DIV样式*/
    #logo{
        width: 290px;
        height: 98px;
    }
    /*导航主菜单DIV样式*/
    #menu{
        height: 32px;
    }
    /*无序列表与列表项消除间距*/
    ul, li{
        margin: 0px;
        padding: 0px;
    }
    /*列表项样式*/
    #menu li{
        float: left; /*所有列表项水平排列*/
        width: 84px;
        height: 32px;
        text-align: center;
        list-style:none; /*去掉列表项的样式(小圆点)*/
        line-height: 32px;/*行高*/
        font-weight: bold;/*字体加粗*/
        font-size: 13px;
    }
   /*超链接样式*/
    #menu a, #menu a:hover{
        color: #333333; /*深灰色*/
        text-decoration: none;/*去下划线*/
        height: 32px;
        width: 84px;
        /*
        将a标签设置为"块级呈现"，当鼠标移动到
        a标签上时便于呈现出全尺寸的高亮背景图片
        */
        display: block;
    }
    /*当鼠标移动到a标签上时的样式*/
    #menu a:hover{
        background-image: url(images/nav_bg.png);
        background-repeat: no-repeat;/*背景图片不平铺*/
        background-position: center center;/*背景图片水平、垂直居中*/
    }


6、各种选择器的使用方式、常用符号如下：


    符号    示例代码                                  说明
===========================================
    空格    div ul { list-style:none; }         选择div标签内的ul标签
    ,         div, ul { text-align:center; }    选择div标签和ul标签
    #       #tagId { color:red; }               选择id属性值为tagId的标签
    .         .tagbd{border:1px;}               选择class属性值为menuBg的标签
    :         a:hover { #ff0; }                    伪类，选择鼠标移动到上方的a标签
    
    选择器的组合

组合 示例代码 说明 
li.

li .tagClass {   

     width:28px; } 

 选择li标签内class属性值为tagClass的标签
div#

div #tagId{

text-align:center;}

 选择div标签内id属性值为tagId的标签
# .

#tagId .tagbd{

    border:1px;}

选择id属性值为tagId的标签内，

class属性为tagbd的标签
# . ,

#tid1 .tc1, #tid2 .tc2{

      height:26px;

} 

选择id属性值为tid1的标签内，

class属性值为tc1的标签，以及id属性

值为tid2的标签内，class属性值为tc2的标签

    
7、div + dl-dt-dd局部布局，一般在如下场合使用：
    图文混排
    
8、制作购物版块：
    8.1）布局结构分析，如图：
    
    
    结构代码（完整版）： 

Html代码 复制代码 收藏代码
  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.     <title>购物版块演示</title> 
  6.     <!-- 导入外部样式style.css--> 
  7.     <link href="style.css" rel="stylesheet" type="text/css" /> 
  8. </head> 
  9. <body> 
  10. <div id="shopping"> 
  11.     <dl> 
  12.         <dt><img src="images/1.jpg" /></dt> 
  13.         <dd>时尚产品1</dd> 
  14.     </dl> 
  15.     <dl> 
  16.         <dt><img src="images/2.jpg" /></dt> 
  17.         <dd>时尚产品2</dd> 
  18.     </dl> 
  19.     <dl> 
  20.         <dt><img src="images/3.jpg" /></dt> 
  21.         <dd>时尚产品3</dd> 
  22.     </dl> 
  23.     <dl> 
  24.         <dt><img src="images/4.jpg" /></dt> 
  25.         <dd>时尚产品4</dd> 
  26.     </dl> 
  27.     <dl> 
  28.         <dt><img src="images/5.jpg" /></dt> 
  29.         <dd>时尚产品5</dd> 
  30.     </dl> 
  31.     <dl> 
  32.         <dt><img src="images/6.jpg" /></dt> 
  33.         <dd>时尚产品6</dd> 
  34.     </dl> 
  35.     <dl> 
  36.         <dt><img src="images/7.jpg" /></dt> 
  37.         <dd>时尚产品7</dd> 
  38.     </dl> 
  39.     <dl> 
  40.         <dt><img src="images/8.jpg" /></dt> 
  41.         <dd>时尚产品8</dd> 
  42.     </dl> 
  43.     <dl> 
  44.         <dt><img src="images/9.jpg" /></dt> 
  45.         <dd>时尚产品9</dd> 
  46.     </dl> 
  47. </div> 
  48. </body> 
  49. </html> 
[html] view plaincopy
 
  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.     <title>购物版块演示</title>  
  6.     <!-- 导入外部样式style.css-->  
  7.     <link href="style.css" rel="stylesheet" type="text/css" />  
  8. </head>  
  9. <body>  
  10. <div id="shopping">  
  11.     <dl>  
  12.         <dt><img src="images/1.jpg" /></dt>  
  13.         <dd>时尚产品1</dd>  
  14.     </dl>  
  15.     <dl>  
  16.         <dt><img src="images/2.jpg" /></dt>  
  17.         <dd>时尚产品2</dd>  
  18.     </dl>  
  19.     <dl>  
  20.         <dt><img src="images/3.jpg" /></dt>  
  21.         <dd>时尚产品3</dd>  
  22.     </dl>  
  23.     <dl>  
  24.         <dt><img src="images/4.jpg" /></dt>  
  25.         <dd>时尚产品4</dd>  
  26.     </dl>  
  27.     <dl>  
  28.         <dt><img src="images/5.jpg" /></dt>  
  29.         <dd>时尚产品5</dd>  
  30.     </dl>  
  31.     <dl>  
  32.         <dt><img src="images/6.jpg" /></dt>  
  33.         <dd>时尚产品6</dd>  
  34.     </dl>  
  35.     <dl>  
  36.         <dt><img src="images/7.jpg" /></dt>  
  37.         <dd>时尚产品7</dd>  
  38.     </dl>  
  39.     <dl>  
  40.         <dt><img src="images/8.jpg" /></dt>  
  41.         <dd>时尚产品8</dd>  
  42.     </dl>  
  43.     <dl>  
  44.         <dt><img src="images/9.jpg" /></dt>  
  45.         <dd>时尚产品9</dd>  
  46.     </dl>  
  47. </div>  
  48. </body>  
  49. </html>  

  

 

    8.2）CSS样式分析（style.css文件代码）：

   /*注意：案例中使用的图片在页面下方提供有下载*/
    /*购物版块div样式*/
    #shopping{
        width: 504px;
        height: 390px;
        margin: 0px auto;
        background-image: url(images/bg.gif);
        background-repeat: no-repeat;
        padding: 40px 10px 10px 15px;
        overflow: hidden;/*div内容超出部分隐藏*/
    }
    /*消除dl dt dd之间的间距*/
    dl, dt, dd{
        margin: 0px;
        padding: 0px;
    }
    /*dl样式*/
    dl{
        float: left;/*将所有dl并排显示*/
        width: 160px;
    }
    /*dt样式(商品的图片放在dt内)*/
    dt{
        height: 95px;
        text-align: center;
        /*内容垂直居中，只对具有valign属性的标签有效*/
        vertical-align: middle;
    }
    /*dd样式(商品的文字放在dd内)*/
    dd{
        height:40px;
        text-align:center;
    }

 

9、总结：
    典型的局部结构包括哪几个？
    div + ul-li局部结构用在什么地方？
    div + dl-dt-dd局部结构用在什么地方？

 

转发：HTML Table局部布局与浏览器兼容性

HTML Table局部布局与浏览器兼容性


注意：案例中所涉及的图片素材，页面下方提供下载

1、技术目标:

  • 掌握使用table tr td局部布局的情况
  • 处理浏览器兼容性问题


2、Table局部布局应用场景1

    2.1）应用场景1(产品列表页面)，如图：

    
    
    2.2）布局分析：类似产品列表页面这种多行多列的数据展示方式，
    一般使用表格布局来处理，HTML结构代码如下：
    

Html代码 复制代码 收藏代码
  1. <body> 
  2.     <div id="container"> 
  3.      <table id="main"> 
  4.         <tr class="title"> 
  5.           <td class="td_1"><input type="checkbox" value="全选"  /> 全选</td> 
  6.           <td class="td_2">商品图片</td> 
  7.           <td class="td_3">商品名称/出售者/联系方式</td> 
  8.           <td class="td_4">价格</td> 
  9.         </tr> 
  10.         <tr class="a_c"> 
  11.           <td><input type="checkbox" value="1" name="auction_id" /></td> 
  12.           <td><a href="#" title="商品详细情况"><img src="images/list0.jpg" alt="alt" /></a></td> 
  13.           <td><a  href="#">杜比环绕，家庭影院必备，超真实享受</a><br /> 
  14.               出售者：<a href="#">ling112233</a> <br /> 
  15.               <a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp; 
  16.               <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>    
  17.           </td> 
  18.           <td>一口价<br /> 2833.0</td> 
  19.         </tr> 
  20.         <tr class="a_c"> 
  21.           <td><input type="checkbox" value="2" name="auction_id" /></td> 
  22.           <td><a href="#" title="商品详细情况"> 
  23.                          <img src="images/list1.jpg" alt="alt" /></a></td> 
  24.           <td><a  href="#">NVDIA 9999GT 512MB 256bit极品显卡，不容错过</a> 
  25.               <br />出售者：<a href="#">aipiaopiao110</a> 
  26.               <br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp; 
  27.           <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a> 
  28.               </td> 
  29.           <td>一口价<br />2460.0</td> 
  30.         </tr> 
  31.         <tr class="a_c"> 
  32.           <td><input type="checkbox" value="3" name="auction_id" /></td> 
  33.           <td><a href="#" title="商品详细情况"> 
  34.                 <img src="images/list2.jpg" alt="alt" /></a></td> 
  35.           <td><a  href="#">精品热卖：高清晰，30寸等离子电视</a> 
  36.              <br />出售者：<a href="#">阳光的挣扎</a> 
  37.              <br /> <a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp; 
  38.             <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a> 
  39.              </td> 
  40.           <td>一口价<br />18880</td> 
  41.         </tr> 
  42.         
  43.         <tr class="a_c"> 
  44.           <td><input type="checkbox" value="4" name="auction_id" /></td> 
  45.           <td> <a href="#" title="商品详细情况"> 
  46.               <img src="images/list3.jpg" alt="alt" /></a> 
  47.             </td> 
  48.           <td ><a  href="#">Sony索尼家用最新款笔记本 </a> 
  49.                <br />出售者：<a href="#">疯狂的镜无</a> 
  50.                <br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp; 
  51.               <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a> 
  52.                </td> 
  53.           <td>一口价<br />5889.0</td> 
  54.         </tr> 
  55.       </table> 
  56.     </div> 
  57.     </body> 
[html] view plaincopy
 
  1. <body>  
  2.     <div id="container">  
  3.      <table id="main">  
  4.         <tr class="title">  
  5.           <td class="td_1"><input type="checkbox" value="全选"  /> 全选</td>  
  6.           <td class="td_2">商品图片</td>  
  7.           <td class="td_3">商品名称/出售者/联系方式</td>  
  8.           <td class="td_4">价格</td>  
  9.         </tr>  
  10.         <tr class="a_c">  
  11.           <td><input type="checkbox" value="1" name="auction_id" /></td>  
  12.           <td><a href="#" title="商品详细情况"><img src="images/list0.jpg" alt="alt" /></a></td>  
  13.           <td><a  href="#">杜比环绕，家庭影院必备，超真实享受</a><br />  
  14.               出售者：<a href="#">ling112233</a> <br />  
  15.               <a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;  
  16.               <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>     
  17.           </td>  
  18.           <td>一口价<br /> 2833.0</td>  
  19.         </tr>  
  20.         <tr class="a_c">  
  21.           <td><input type="checkbox" value="2" name="auction_id" /></td>  
  22.           <td><a href="#" title="商品详细情况">  
  23.                          <img src="images/list1.jpg" alt="alt" /></a></td>  
  24.           <td><a  href="#">NVDIA 9999GT 512MB 256bit极品显卡，不容错过</a>  
  25.               <br />出售者：<a href="#">aipiaopiao110</a>  
  26.               <br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;  
  27.           <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>  
  28.               </td>  
  29.           <td>一口价<br />2460.0</td>  
  30.         </tr>  
  31.         <tr class="a_c">  
  32.           <td><input type="checkbox" value="3" name="auction_id" /></td>  
  33.           <td><a href="#" title="商品详细情况">  
  34.                 <img src="images/list2.jpg" alt="alt" /></a></td>  
  35.           <td><a  href="#">精品热卖：高清晰，30寸等离子电视</a>  
  36.              <br />出售者：<a href="#">阳光的挣扎</a>  
  37.              <br /> <a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;  
  38.             <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>  
  39.              </td>  
  40.           <td>一口价<br />18880</td>  
  41.         </tr>  
  42.          
  43.         <tr class="a_c">  
  44.           <td><input type="checkbox" value="4" name="auction_id" /></td>  
  45.           <td> <a href="#" title="商品详细情况">  
  46.               <img src="images/list3.jpg" alt="alt" /></a>  
  47.             </td>  
  48.           <td ><a  href="#">Sony索尼家用最新款笔记本 </a>  
  49.                <br />出售者：<a href="#">疯狂的镜无</a>  
  50.                <br /><a href="#"><img src="images/online_pic.gif" alt="alt" /></a> &nbsp;&nbsp;  
  51.               <a href="#"><img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</a>  
  52.                </td>  
  53.           <td>一口价<br />5889.0</td>  
  54.         </tr>  
  55.       </table>  
  56.     </div>  
  57.     </body>  

    
    CSS样式代码如下：

    #container{
        width:980px;
        margin:0px auto;/*整体内容居中显示*/
    }
    /*商品列表页样式开始*/
    #main{
        width:100%;
        margin:0px auto;
        border:0px;
        padding-top:34px;
        background:url(images/list_bg.gif) no-repeat;
    } 
    .td_1{width:10%;}
    .td_2{width:20%;}
    .td_3{width:50%;}
    .td_4{width:20%;}
     
    .a_c td, .title td{
         text-align:center;
         line-height:30px;
         /*每行的底部灰色虚线*/
         border-bottom:1px  #CCCCCC dashed;
         padding:10px 0px;
     }
     .title td{
         font-weight:bold;
         }
     .a_c td{
         line-height:30px;
      }
      /*商品列表页样式开始*/
    
3、Table局部布局应用场景2

    3.1）应用场景2(注册页面)，如图：


    
    3.2）在表单元素密集的页面，一般使用Table对表单控件进行排列，
    HTML结构代码如下：

Html代码 复制代码 收藏代码
  1. <body> 
  2.     <div id="container"> 
  3.     <form action="" method="post"> 
  4.     <table id="register"> 
  5.      <tr> 
  6.         <td class="register_left">名字：</td> 
  7.         <td><input id="realname" type="text"  class="reg_text"/></td> 
  8.         <td rowspan="12" class="register_right"> 
  9.             <h4><img src="images/read.gif" alt="alt" />阅读贵美网服务协议 </h4> 
  10.             <textarea cols="30" rows="15" name="agreement">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。 
  11.           本服务协议双方为本站与本站用户，本服务协议具有合同效力。 
  12.           本站的权利和义务： 
  13.             ...... 
  14.       </textarea></td> 
  15.       </tr> 
  16.       <tr> 
  17.         <td class="register_left">姓氏：</td> 
  18.         <td><input id="xing" type="text"  class="reg_text"/></td> 
  19.       </tr> 
  20.       <tr> 
  21.         <td class="register_left">登录名：</td> 
  22.         <td><input id="username" type="text"  class="reg_text"/>（可包含 a-z、0-9 和下划线）</td> 
  23.       </tr> 
  24.       <tr> 
  25.         <td class="register_left">密码：</td> 
  26.         <td><input id="pwd" type="text"  class="reg_text"/>（至少包含 6 个字符）</td> 
  27.       </tr> 
  28.       <tr> 
  29.         <td class="register_left">再次输入密码：</td> 
  30.         <td><input id="repwd" type="text"  class="reg_text"/></td> 
  31.       </tr> 
  32.       <tr> 
  33.         <td class="register_left">电子邮箱：</td> 
  34.         <td><input id="email" type="text"  class="reg_text"/>（必须包含 @ 字符） </td> 
  35.       </tr> 
  36.       <tr> 
  37.         <td class="register_left">性别：</td> 
  38.         <td><input name="sex" type="radio" id="male"/><label for="male">男</label> 
  39.             <input name="sex" type="radio" id="female"/><label for="female">女</label></td> 
  40.       </tr> 
  41.       <tr> 
  42.         <td class="register_left">头像：</td> 
  43.         <td> <input type="file" /></td> 
  44.       </tr> 
  45.       <tr> 
  46.         <td class="register_left">爱好：</td> 
  47.         <td><input name="hobby" type="checkbox" id="run"/><label for="run">运动</label> 
  48.            <input name="hobby" type="checkbox" id="chat"/><label for="chat">聊天</label>    
  49.            <input name="hobby" type="checkbox" id="play"/><label for="play">玩游戏</label> </td> 
  50.       </tr> 
  51.       <tr> 
  52.         <td class="register_left">出生日期：</td> 
  53.         <td><input class="reg_small" id="nYear" value="yyyy" /> 
  54.         &nbsp;年&nbsp; 
  55.                    <select id="nMonth" name="nMonth"> 
  56.                      <option value="" selected="selected">[选择月份]</option> 
  57.                      <option value="0">一月</option> 
  58.                      <option value="1">二月</option> 
  59.                      <option value="2">三月</option> 
  60.                      <option value="3">四月</option> 
  61.                      <option value="4">五月</option> 
  62.                      <option value="5">六月</option> 
  63.                      <option value="6">七月</option> 
  64.                      <option value="7">八月</option> 
  65.                      <option value="8">九月</option> 
  66.                      <option value="9">十月</option> 
  67.                      <option value="10">十一月</option> 
  68.                      <option value="11">十二月</option> 
  69.                   </select>&nbsp;月&nbsp; 
  70.                   <input id="nDay" class="reg_small" value="dd"/>日 
  71.             </td> 
  72.       </tr> 
  73.       <tr> 
  74.         <td>&nbsp;</td> 
  75.         <td><input type="submit" class="submit" value=" " /> 
  76.            <input type="reset" value=" " class="reset" /> 
  77.            </td> 
  78.       </tr> 
  79.       <tr> 
  80.         <td>&nbsp;</td> 
  81.         <td>&nbsp;</td> 
  82.       </tr> 
  83.     </table></form></div> 
  84.     </body> 
[html] view plaincopy
 
  1. <body>  
  2.     <div id="container">  
  3.     <form action="" method="post">  
  4.     <table id="register">  
  5.      <tr>  
  6.         <td class="register_left">名字：</td>  
  7.         <td><input id="realname" type="text"  class="reg_text"/></td>  
  8.         <td rowspan="12" class="register_right">  
  9.             <h4><img src="images/read.gif" alt="alt" />阅读贵美网服务协议 </h4>  
  10.             <textarea cols="30" rows="15" name="agreement">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。  
  11.           本服务协议双方为本站与本站用户，本服务协议具有合同效力。  
  12.           本站的权利和义务：  
  13.             ......  
  14.       </textarea></td>  
  15.       </tr>  
  16.       <tr>  
  17.         <td class="register_left">姓氏：</td>  
  18.         <td><input id="xing" type="text"  class="reg_text"/></td>  
  19.       </tr>  
  20.       <tr>  
  21.         <td class="register_left">登录名：</td>  
  22.         <td><input id="username" type="text"  class="reg_text"/>（可包含 a-z、0-9 和下划线） </td>  
  23.       </tr>  
  24.       <tr>  
  25.         <td class="register_left">密码：</td>  
  26.         <td><input id="pwd" type="text"  class="reg_text"/>（至少包含 6 个字符）</td>  
  27.       </tr>  
  28.       <tr>  
  29.         <td class="register_left">再次输入密码：</td>  
  30.         <td><input id="repwd" type="text"  class="reg_text"/></td>  
  31.       </tr>  
  32.       <tr>  
  33.         <td class="register_left">电子邮箱：</td>  
  34.         <td><input id="email" type="text"  class="reg_text"/>（必须包含 @ 字符） </td>  
  35.       </tr>  
  36.       <tr>  
  37.         <td class="register_left">性别：</td>  
  38.         <td><input name="sex" type="radio" id="male"/><label for="male">男</label>  
  39.             <input name="sex" type="radio" id="female"/><label for="female">女</label></td>  
  40.       </tr>  
  41.       <tr>  
  42.         <td class="register_left">头像：</td>  
  43.         <td> <input type="file" /></td>  
  44.       </tr>  
  45.       <tr>  
  46.         <td class="register_left">爱好：</td>  
  47.         <td><input name="hobby" type="checkbox" id="run"/><label for="run">运动</label>  
  48.            <input name="hobby" type="checkbox" id="chat"/><label for="chat">聊天</label>     
  49.            <input name="hobby" type="checkbox" id="play"/><label for="play">玩游戏</label> </td>  
  50.       </tr>  
  51.       <tr>  
  52.         <td class="register_left">出生日期：</td>  
  53.         <td><input class="reg_small" id="nYear" value="yyyy" />  
  54.         &nbsp;年&nbsp;  
  55.                    <select id="nMonth" name="nMonth">  
  56.                      <option value="" selected="selected">[选择月份]</option>  
  57.                      <option value="0">一月</option>  
  58.                      <option value="1">二月</option>  
  59.                      <option value="2">三月</option>  
  60.                      <option value="3">四月</option>  
  61.                      <option value="4">五月</option>  
  62.                      <option value="5">六月</option>  
  63.                      <option value="6">七月</option>  
  64.                      <option value="7">八月</option>  
  65.                      <option value="8">九月</option>  
  66.                      <option value="9">十月</option>  
  67.                      <option value="10">十一月</option>  
  68.                      <option value="11">十二月</option>  
  69.                   </select>&nbsp;月&nbsp;  
  70.                   <input id="nDay" class="reg_small" value="dd"/>日  
  71.             </td>  
  72.       </tr>  
  73.       <tr>  
  74.         <td>&nbsp;</td>  
  75.         <td><input type="submit" class="submit" value=" " />  
  76.            <input type="reset" value=" " class="reset" />  
  77.            </td>  
  78.       </tr>  
  79.       <tr>  
  80.         <td>&nbsp;</td>  
  81.         <td>&nbsp;</td>  
  82.       </tr>  
  83.     </table></form></div>  
  84.     </body>  

    
    CSS样式代码如下：
    #container{
        width:980px;/*整体内容居中显示*/
        margin:0px auto;
    } 
    /*注册页面开始*/
    #register{
        width:100%;
        margin:0px auto;
        border:0px;
        padding-top:60px;
        background:url(images/reg_bg.gif) no-repeat;
    }      
    #register td{
        line-height:30px;
    }
    .register_left{
        width:150px;
        text-align:right;
    } 
    .register_right{
        width:300px;
        text-align:left;
        vertical-align:top;
    } 
    .reg_text,.reg_small{
        height:16px;
        border:#333 1px solid;
    }
    .reg_text{
        width:130px;
    }     
    .reg_small{
        width:30px;
    }
    #register .submit,#register .reset{
        background-repeat:no-repeat;
        width:80px;
        height:34px;
        border:0;
         /*背景透明*/
    }
    #register .submit{
        background-image:url(images/submit.gif);
    }
    #register .reset{
        background-image:url(images/reset.gif);
    }     
    /*注册页面结束*/
    
4、为什么需要考虑浏览器兼容性？

  • 不同浏览器厂商对个别CSS含义解析不同，造成同一页面在不同浏览器中显示效果不同
  • 浏览器厂商没完全支持W3C标准
  • IE是国内的主流浏览器，必须考虑IE6.0~IE8.0兼容
  • IE存在的兼容性问题较多，特别是IE6.0


5、页面的兼容性测试

    兼容性测试包括检查浏览器之间的兼容性以及验证代码是否符合W3C的标准

    5.1）检查浏览器之间的兼容性
    测试网页在各种浏览器产品及各种版本中显示效果是否一致，一般要求保证
    IE和Firefox兼容。IE要求IE6.0到IE8.0兼容即可，所以开发者需要安装IE
    的多个版本以及Firefox浏览器，IE多版本测试可使用IETester工具，安装
    好IE8，打开IETest就可以测试IE5.5~IE8.0各版本的效果
    注意：IETest自行下载使用
    
    5.2）验证代码是否符合W3C的相关标准，可使用以下方法

  • 使用Dreamveaver进行检查(文件->验证->标记)
  • 使用Firefox的firebug插件进行检测(页面下方提供下载)
  • 使用W3C官网提供的检测：validator.w3.org

    
6、如何解决浏览器兼容问题？
    
    6.1）代码编写需要注意以下问题

  • 网页的HTML结构尽量语义化 
  • 尽量使用典型的四种局部结构
  • 层次结构尽量简洁，尽量减少冗余标签


    6.2）根据浏览器的不同版本，编写相应的CSS代码
    注意：

  • 不同浏览器识别不同的CSS特殊符号
  • 如浏览器识别多个特殊符号，则控制CSS顺序
浏览器        
 特殊字符 书写风格顺序
Firefox !important 最先，设定样式优先级，firefox能识别
IE8 \0 Firefox与IE6中间，font属性的缩写不能用
IE7 + 中间（此符号IE6也能识别，因此写中间，常用于IE7 hack）
IE6 _ 最后

        
    6.3）浏览器兼容CSS hack示例

    示例1，IE与firefox的样式识别：
    <html>
    <head>
        <title>Untitled</title>
        <style type="text/css">            
            .divClass{
                /*
                该样式IE无法识别，而firefox可以识别，
                firefox识别其优先级比第2个border样式高
                */
                border: 14px solid red !important;
                border: 14px solid blue;
                width: 300px;
                height: 300px;
            }            
        </style>
    </head>
    <body>
        <div class="divClass"></div>
    </body>
    </html>
    
    示例2，各版本IE的样式识别(请在不同版本的IE下运行)：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>网页兼容性</title>
    <style type="text/css">

    /*修改各浏览器默认预留的页面内容边距*/
    body{
        margin:5px;
        padding:0px;
    }
    div{
        font:bold 20px 宋体;    /* Firefox */
        font-size:12px\0;        /* IE8在末尾用"\0" */
        +font:normal 20px 黑体; /* IE7在开始用"+" */
        _font:normal 16px 宋体; /* IE6在开始用"_" */
        color:red;
        color:green\0;
        +color:purple;
        _color:blue;
    }
    </style>
    </head>
    <body>
        <div>不同浏览器效果。
            <!--[if IE 8]>IE8<![endif]-->
            <!--[if IE 7]>IE7<![endif]-->                    
            <!--[if IE 6]>IE6<![endif]-->            
        </div>
    </body>
    </html>

7、常见兼容性问题1，三像素文本慢移问题
    
    问题描述：IE6.0中，浮动(float)元素与其后紧跟的一个行内元素之间
    有3像素的间隙，称为"3像素文本慢移"问题，其他浏览器无此问题
    
    示例代码：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>三像素文本慢移</title>
    <style type="text/css">
    #left{
        float:left;
        width:100px;
        height:30px;
       
    }
    span{
        _margin-left:-3px;/*修复IE6 3像素文本慢移问题*/
    }
    </style>
    </head>
    <body>
        <div id="left"></div><span>三像素文本慢移</span>
    </body>
    </html>

8、常见兼容性问题2，双倍边距问题
    
    问题描述：IE6.0中，如果元素的浮动(float)方向与margin一致，如，
    左浮动(float:left)元素设置左外边距(margin-left:50px)，则外边距
    会加倍(显示出100px的左外边距)，称为"双倍边距"问题，其他浏览器
    无此问题

    示例代码：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>双倍边距问题</title>
    <style type="text/css">
    body{
        font-size:13px;
        margin:0px;
        line-height:20px;
    }
    div{        
        float:left;
       /*设置浮动元素为内联，可解决IE6双倍边距问题*/
        display:inline;
        width:150px;
        height:60px;
        margin:0px 0px 0px 50px;
        background-color:#ccc;
    }
    </style>
    </head>
    <body>
        <div>左边界设为50px，其他边界均设为0px，但在IE6下左边界却是100px</div>
    </body>
    </html>

9、总结：

    • 产品列表页面的Table布局及样式
    • 注册页面的Table布局及样式
    • 浏览器兼容性怎样测试？
    • 如何解决浏览器兼容性问题？
posted @   阿玛  阅读(886)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae