程序博客网 > 无法访问网络打印机

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

来源：互联网 发布：无法访问网络打印机 编辑：程序博客网 时间：2024/06/01 23:58

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


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

1、技术目标:

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


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

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

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

Html代码 复制代码 收藏代码
  1. <body> 
  2.     <div id="container"> 
  3.      <tableid="main"> 
  4.         <trclass="title"> 
  5.           <tdclass="td_1"><inputtype="checkbox"value="全选" /> 全选</td> 
  6.           <tdclass="td_2">商品图片</td> 
  7.           <tdclass="td_3">商品名称/出售者/联系方式</td> 
  8.           <tdclass="td_4">价格</td> 
  9.         </tr> 
  10.         <trclass="a_c"> 
  11.           <td><inputtype="checkbox"value="1"name="auction_id"/></td> 
  12.           <td><ahref="#"title="商品详细情况"><imgsrc="images/list0.jpg"alt="alt"/></a></td> 
  13.           <td><a href="#">杜比环绕，家庭影院必备，超真实享受</a><br/> 
  14.               出售者：<ahref="#">ling112233</a><br /> 
  15.               <ahref="#"><imgsrc="images/online_pic.gif"alt="alt"/></a> &nbsp;&nbsp; 
  16.               <ahref="#"><imgsrc="images/list_tool_fav1.gif"alt="alt"/> 收藏</a>    
  17.           </td> 
  18.           <td>一口价<br/> 2833.0</td> 
  19.         </tr> 
  20.         <trclass="a_c"> 
  21.           <td><inputtype="checkbox"value="2"name="auction_id"/></td> 
  22.           <td><ahref="#"title="商品详细情况"> 
  23.                          <imgsrc="images/list1.jpg"alt="alt"/></a></td> 
  24.           <td><a href="#">NVDIA 9999GT 512MB 256bit极品显卡，不容错过</a> 
  25.               <br/>出售者：<ahref="#">aipiaopiao110</a> 
  26.               <br/><ahref="#"><imgsrc="images/online_pic.gif"alt="alt"/></a> &nbsp;&nbsp; 
  27.           <ahref="#"><imgsrc="images/list_tool_fav1.gif"alt="alt"/> 收藏</a> 
  28.               </td> 
  29.           <td>一口价<br/>2460.0</td> 
  30.         </tr> 
  31.         <trclass="a_c"> 
  32.           <td><inputtype="checkbox"value="3"name="auction_id"/></td> 
  33.           <td><ahref="#"title="商品详细情况"> 
  34.                 <imgsrc="images/list2.jpg"alt="alt"/></a></td> 
  35.           <td><a href="#">精品热卖：高清晰，30寸等离子电视</a> 
  36.              <br/>出售者：<ahref="#">阳光的挣扎</a> 
  37.              <br/> <ahref="#"><imgsrc="images/online_pic.gif"alt="alt"/></a> &nbsp;&nbsp; 
  38.             <ahref="#"><imgsrc="images/list_tool_fav1.gif"alt="alt"/> 收藏</a> 
  39.              </td> 
  40.           <td>一口价<br/>18880</td> 
  41.         </tr> 
  42.         
  43.         <trclass="a_c"> 
  44.           <td><inputtype="checkbox"value="4"name="auction_id"/></td> 
  45.           <td><a href="#"title="商品详细情况"> 
  46.               <imgsrc="images/list3.jpg"alt="alt"/></a> 
  47.             </td> 
  48.           <td><a href="#">Sony索尼家用最新款笔记本</a> 
  49.                <br/>出售者：<ahref="#">疯狂的镜无</a> 
  50.                <br/><ahref="#"><imgsrc="images/online_pic.gif"alt="alt"/></a> &nbsp;&nbsp; 
  51.               <ahref="#"><imgsrc="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.     <tableid="register"> 
  5.      <tr> 
  6.         <tdclass="register_left">名字：</td> 
  7.         <td><inputid="realname"type="text" class="reg_text"/></td> 
  8.         <tdrowspan="12"class="register_right"> 
  9.             <h4><imgsrc="images/read.gif"alt="alt"/>阅读贵美网服务协议 </h4> 
  10.             <textareacols="30"rows="15"name="agreement">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw.com网站的各种工具和服务。 
  11.           本服务协议双方为本站与本站用户，本服务协议具有合同效力。 
  12.           本站的权利和义务： 
  13.             ...... 
  14.       </textarea></td> 
  15.       </tr> 
  16.       <tr> 
  17.         <tdclass="register_left">姓氏：</td> 
  18.         <td><inputid="xing"type="text" class="reg_text"/></td> 
  19.       </tr> 
  20.       <tr> 
  21.         <tdclass="register_left">登录名：</td> 
  22.         <td><inputid="username"type="text" class="reg_text"/>（可包含 a-z、0-9 和下划线）</td> 
  23.       </tr> 
  24.       <tr> 
  25.         <tdclass="register_left">密码：</td> 
  26.         <td><inputid="pwd"type="text" class="reg_text"/>（至少包含 6 个字符）</td> 
  27.       </tr> 
  28.       <tr> 
  29.         <tdclass="register_left">再次输入密码：</td> 
  30.         <td><inputid="repwd"type="text" class="reg_text"/></td> 
  31.       </tr> 
  32.       <tr> 
  33.         <tdclass="register_left">电子邮箱：</td> 
  34.         <td><inputid="email"type="text" class="reg_text"/>（必须包含 @ 字符）</td> 
  35.       </tr> 
  36.       <tr> 
  37.         <tdclass="register_left">性别：</td> 
  38.         <td><inputname="sex"type="radio"id="male"/><labelfor="male">男</label> 
  39.             <inputname="sex"type="radio"id="female"/><labelfor="female">女</label></td> 
  40.       </tr> 
  41.       <tr> 
  42.         <tdclass="register_left">头像：</td> 
  43.         <td><input type="file"/></td> 
  44.       </tr> 
  45.       <tr> 
  46.         <tdclass="register_left">爱好：</td> 
  47.         <td><inputname="hobby"type="checkbox"id="run"/><labelfor="run">运动</label> 
  48.            <inputname="hobby"type="checkbox"id="chat"/><labelfor="chat">聊天</label>    
  49.            <inputname="hobby"type="checkbox"id="play"/><labelfor="play">玩游戏</label></td> 
  50.       </tr> 
  51.       <tr> 
  52.         <tdclass="register_left">出生日期：</td> 
  53.         <td><inputclass="reg_small"id="nYear"value="yyyy"/> 
  54.         &nbsp;年&nbsp; 
  55.                    <selectid="nMonth"name="nMonth"> 
  56.                      <optionvalue=""selected="selected">[选择月份]</option> 
  57.                      <optionvalue="0">一月</option> 
  58.                      <optionvalue="1">二月</option> 
  59.                      <optionvalue="2">三月</option> 
  60.                      <optionvalue="3">四月</option> 
  61.                      <optionvalue="4">五月</option> 
  62.                      <optionvalue="5">六月</option> 
  63.                      <optionvalue="6">七月</option> 
  64.                      <optionvalue="7">八月</option> 
  65.                      <optionvalue="8">九月</option> 
  66.                      <optionvalue="9">十月</option> 
  67.                      <optionvalue="10">十一月</option> 
  68.                      <optionvalue="11">十二月</option> 
  69.                   </select>&nbsp;月&nbsp; 
  70.                   <inputid="nDay"class="reg_small"value="dd"/>日 
  71.             </td> 
  72.       </tr> 
  73.       <tr> 
  74.         <td>&nbsp;</td> 
  75.         <td><inputtype="submit"class="submit"value=" "/> 
  76.            <inputtype="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;
        background-color:transparent; /*背景透明*/
    }
    #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
\0Firefox与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;
        background-color:#F00;
    }
    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布局及样式
  • 浏览器兼容性怎样测试？
  • 如何解决浏览器兼容性问题？
无法访问网络打印机 无法访问网络打印机
原创粉丝点击
热门IT博客
宁波住宅成交数据宁波住宅成交数据
winpe 加载网络winpe 加载网络
路由器设置映射端口
ise软件介绍
linux添加永久静态路由
卡卡西实力如何知乎
淘宝装修布局工具
网站源码怎么修改
网络推广的文案
淘宝鹰眼系统
淘宝新手发货
最新美国原油api数据
cf数据异常怎么解决
c语言面试常见问题
mysql updata
软件测试技术基础教程
sql创建表格语句
淘宝联盟pid设置
古代人有多高知乎
百度云mac版怎么卸载
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 手板 电动板手什么牌子好 快速手板 手板模型加工 手板模型厂家 合金手板 手板硅胶 手机手板模型 手板模型精雕机 电板手价格 手板脱皮是什么原因 虎门手板 手板模型厂 硅胶手板模型制作 手板模型招聘 手板模型图片 手板模型制作 深圳手板厂 手板是什么 手板价格 快速板手 手柄 手柄助手 xbox手柄 ps4手柄 手柄模拟器 闪光灯手柄 虚拟手柄 xboxone手柄 黑鲨手柄 手柄连接器 ps4手柄充电 飞智手柄 手机手柄 任天堂手柄 xbox360手柄 手柄漂移 手柄映射 吃鸡手柄 蓝牙手柄 安卓手柄

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里