无双科技

网站建设如何解决浏览器的兼容问题?前端HTML初始化CSS代码

时间:2018-12-27 23:33:30 出处:无双科技

1)为什么要初始化css代码

首先是因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

其次初始化CSS样式可以提高编码质量,保持代码的统一性,如果不初始化整个页面做完很糟糕,重复的CSS样式很多。去掉标签的默认样式如:margin,padding,其他浏览器默认解析字体大小,字体设置。

我们这里写一个ul标签以及a标签,来看一下默认在网页中的显示效果;



从上图我们可以看出a标签以及ul标签都有默认的样式效果,而且ul距离左侧有一段的空隙,如果我们不定义初始化效果的话每次都要进行单独的修改,这样会增加代码的重复度。

2)我们要怎么去做?

1、最简单的初始化css代码的方式是使用通配符(*),重置所有的初始样式。具体的css代码如下所示:

* {margin:0px; padding:0px;}

但是我们不建议这么书写:因为 *(星号)代表通配符表示了所有的标签,编写代码的时候也非常快,但是这样写有一个弊端,就是在网站比较大时,CSS样式文件也很大,这样写时,它会把所有的标签都初始化一遍,这样会加大网站运行的负荷,会让网站加载的时候需要很长一段时间。

第二种方式

NETTUTS上的 Jeffrey Way写了篇文章Weekend Quick Tip: Create Your Own Simple Reset.css File

释出自己用来重置CSS样式表的方法

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,

li, dl, dt, dd, form, a, fieldset, input, th, td

{margin: 0; padding: 0; border: 0; outline: none;}

body{line-height: 1;font-size: 88% ;}

h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}

ul, ol{list-style: none;}

a{color: black;text-decoration: none;}

a:hover

{text-decoration: underline;}

.floatLeft{float: left;padding: .5em .5em .5em 0;}

.floatRight{float: right;padding: .5em 0 .5em .5em;}

  这个方法适用于大多数的网页设计。

第三种方式

一部分人追求彻底抹去浏览器影响

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

        margin: 0;

        padding: 0;

        border: 0;

        outline: 0;

        font-size: 100%;

        vertical-align: baseline;

        background: transparent;

}

body {line-height: 1;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,

q:before, q:after {content: '';content: none;}

:focus {outline: 0;}

ins {text-decoration: none;}

del {        text-decoration: line-through;}

table {border-collapse: collapse;border-spacing: 0;}

第四种方式

还有今天sofish提到的Yahoo的YUI提供的CSS重置文件

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

        margin:0;

        padding:0;

}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img { border:0;}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;

font-weight:normal;}

ol,ul {list-style:none;}

caption,th {text-align:left;}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

q:before,q:after {content:'';}

abbr,acronym { border:0;}

这些,没有谁好谁坏一分,大多数设计师并不推荐第一种方法,因为我国的抄袭美德,现在搜索到的CSS网页设计技巧,第一位却一定是这个

淘宝的初始化代码如下所示:

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; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }


腾讯的初始化代码如下所示:

body{margin:0;padding:0 0 12px 0;background:#fff;font-size:13px;line-height:22px;}

div,p,li{font-family:Verdana,婼;font-size:13px;}

form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}

input,select{font-size:12px;line-height:16px;}

img{border:0;}

ul,li{list-style-type:none;}

li{font-size:13px;}

.tc{text-align:center;}.tl{text-align:left;}.tr{text-align:right;}

.dis{display:block;}.undis{display:none;}

.fl{float:left;}.fr{float:right;}.cl{clear:both;}

.fh{height:22px;}.fb{font-weight:bold;}.fnb{font-weight:200;margin-left:-1px;}

.fc30{color:#303030;font-family:"宋体";}.fchot{color:#ff0700}

.f11{font-size:12px;font-family:tahoma;}

h4{font-weight:200;font-size:13px;cursor:pointer;}

h4 a{width:100%;heihgt:100%;display:block;}

a{color:#00007F;text-decoration:none;}

a:hover{color:#bd0a01;text-decoration:underline;}

a.lcblue{color:#0F479C;}

a.lchot{color:#bd0a01;}

.lchot{color:#bd0a01;}

网站的建设发布以后,使网站能长期顺利地运转,可以考虑从以下几方面去运营:

1、在网站建设初期,就要对后续维护给予足够的重视,要保证网站后续维护所需资金和人力。很多单位是以外包项目的方式建设网站的,建设时很舍得投入资金。可是网站发布后,维护力度不够,信息更新工作迟迟跟不上。网站建成之时,便是网站死亡的开始。

2、要从管理制度上保证信息渠道的通畅和信息发布流程的合理性。网站上各栏目的信息往往来源于多个业务部门,要进行统筹考虑,确立一套从信息收集、信息审查到信息发布的良性运转的管理制度。既要考虑信息的准确性和安全性,又要保证信息更新的及时性。要解决好这个问题,领导的重视是前提。

3、在建设过程中要对网站的各个栏目和子栏目进行尽量细致的规划,在此基础上确定哪些是经常要更新的内容,哪些是相对稳定的内容。由承建单位根据相对稳定的内容设计网页模板,在以后的维护工作中,这些模板不用改动,这样既省费用,又有利于后续维护。

4、对经常变更的信息,尽量用结构化的方式(如建立数据库、规范存放路径)管理起来,以避免数据杂乱无章的现象。如果采用基于数据库的动态网页方案,则在网站开发过程中,不但要保证信息浏览环境的方便性,还要保证信息维护环境的方便性。

5、要选择合适的网页更新工具。信息收集起来后,如何"写到"网页上去,采用不同的方法,效率也会大大不同。比如使用Notepad直接编辑HTML文档与用Dreamweaver等可视化工具相比,后者的效率自然高得多。倘若既想把信息放到网页上,又想把信息保存起来以备以后再用,那么采用能够把网页更新和数据库管理结合起来的工具效率会更高。

6.网上还有一些人员专门为企业站提供维护支持。

猜你喜欢