html网站开发心得,静态网页开发心得

CSS的Reset

HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性的问题，影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。

部分CSS样式重置如下：

html {color:#000;background:#FFF;}

body,div,dl,dt,dd,ul,ol,li,

h1,h2,h3,h4,h5,h6,

pre,code,form,fieldset,legend,

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

li {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;font-variant:normal;}

sup {vertical-align:text-top;}

sub {vertical-align:text-bottom;}

input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}

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

legend {color:#000;}

通栏

在很多网页界面的最上方有一个通栏，通栏的div如果不设置宽度的话，会继承父类body的宽度。

logo部分

logo作为重要的一个部分，用div的话没有语义化，不能够起到强调作用，不利于网页的seo，所以改成h1标签，h1标签里面的文字是给搜索引擎看的，为了不显示在页面对这个类进行设置text-indent: -1000em。

版心

版心居中设置：margin: 0 auto;

文字居中

将行高设置为容器的高度就可以将文字居中：line-height: 26px;

横向导航

用ul标签和li标签，将所有的li标签左浮

行内标签设置宽高

行内标签是不能直接设置宽高的，需将其设置成 行内块状 元素才能设置宽高：display: inline-block;

width，height

通常我们设置的宽高是指的content的宽高，而实际一个元素的宽高要考虑盒子模型。

CSS sprites(精灵图 )

我们在做前端页面的时候，网页中通常包含有很多小图标，这就用到了css sprites技术。把所有小图标放到一张图上，这样可以减少对服务器的请求次数，提高我们的访问速度。

标签：网页,静态,标签,样式,设置,text,浏览器,font,心得

来源： https://www.cnblogs.com/louisduan66/p/10700621.html