zoukankan      html  css  js  c++  java
  • 论前端css初始化的重要性

    新手,求喷,刚刚知道每个浏览器都有对 标签的初始化,就造成我们网站开发者开发的web程序,会在不同的网站上有不同的样式风格,这给用户带来了很不好的体验,这也是浏览器本身的原因造成的,这时候,我们不可能过多的去限制用户的自然选择,所以我们只能优化我们自身的代码,使得我们的web程序兼容性更好,这就需要我们对一些常用基本的标签进行初始化,下面是可以借鉴的几个门户网站的css初始化代码:

    1. 腾讯QQ官网 样式初始化
      1 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
      2 body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
      3 a{color:#2d374b;text-decoration:none} 
      4 a:hover{color:#cd0200;text-decoration:underline} 
      5 em{font-style:normal} 
      6 li{list-style:none} 
      7 img{border:0;vertical-align:middle} 
      8 table{border-collapse:collapse;border-spacing:0} 
      9 p{word-wrap:break-word} 
    2. 新浪官网 样式初始化
       1 body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
       2 body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 
       3  
       4 ul,ol{list-style-type:none;} 
       5 select,input,img,select{vertical-align:middle;} 
       6  
       7 a{text-decoration:none;} 
       8 a:link{color:#009;} 
       9 a:visited{color:#800080;} 
      10 a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} 
    3. 淘宝官网 样式初始化
       1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
       2 body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; } 
       3 h1, h2, h3, h4, h5, h6{ font-size:100%; } 
       4 address, cite, dfn, em, var { font-style:normal; } 
       5 code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
       6 small{ font-size:12px; } 
       7 ul, ol { list-style:none; } 
       8 a { text-decoration:none; } 
       9 a:hover { text-decoration:underline; } 
      10 sup { vertical-align:text-top; } 
      11 sub{ vertical-align:text-bottom; } 
      12 legend { color:#000; } 
      13 fieldset, img { border:0; } 
      14 button, input, select, textarea { font-size:100%; } 
      15 table { border-collapse:collapse; border-spacing:0; } 
    4. 网易官网 样式初始化
      1 html {overflow-y:scroll;} 
      2 body {margin:0; padding:29px00; font:12px"5B8B4F53",sans-serif;background:#ffffff;} 
      3 div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
      4 table,td,tr,th{font-size:12px;} 
      5 li{list-style-type:none;} 
      6 img{vertical-align:top;border:0;} 
      7 ol,ul {list-style:none;} 
      8 h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
      9 address,cite,code,em,th {font-weight:normal; font-style:normal;} 
  • 相关阅读:
    Vsftpd 3.0.2 正式版发布
    Putdb WebBuilder 6.5 正式版本发布
    SoaBox 1.1.6 GA 发布,SOA 模拟环境
    pynag 0.4.6 发布,Nagios配置和插件管理
    Percona Playback 0.4,MySQL 负荷回放工具
    xombrero 1.3.1 发布,微型 Web 浏览器
    Hypertable 0.9.6.4 发布,分布式数据库
    libmemcached 1.0.11 发布
    CryptoHeaven 3.7 发布,安全邮件解决方案
    Android Activity生命周期
  • 原文地址:https://www.cnblogs.com/zhuxiaoyu/p/super_or2man.html
Copyright © 2011-2022 走看看