CSS网页制作教程:制作网页导航条

疯了一般爱

疯了一般爱

2016-02-20 00:17

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享CSS网页制作教程:制作网页导航条,希望可以对大家能有小小的帮助。

CSS标签重置

对于XHTML+CSS布局起着一个重要的决定性作用,它是提高页面浏览器兼容性的第一步。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

那么什么是标签重置呢?

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

顾名思义,就是对HTML中的所有标签属性重置,因为每个浏览器都有一个自己默认的CSS文件,对HTML中的所有的标签进行定义,以便没有定义CSS的页面能够正常显示在页面,页面在加载的时候如果没有找到自带的CSS文件,浏览器就用事先为您准备好的CSS样式,但是这个对于页面布局,没有什么用,所以我们需要将它们重新设置,不过标签有那么多,属性那么多,怎么设置?!这都是个问题!

哈哈,不要着急,问题很容易解决,其实在我们布局页面的时候,将最容易影响页面布局的是HTML标签中的内外边距,只要我们将最常用的标签的内外边距设为零就OK了~比如一个页面中用到下面div,p,ul,li四个标签那么我们的重置代码就要这么写

body,div,p,ul,li{margin:0; padding:0;}

因为body标签不同的浏览器定义的内边距是不一样的,所以在上面代码中加入body。
如果后面我用到form,h1,h2标签的话,我就再添加上去就OK了

body,div,p,ul,li,form,h1,h2{margin:0; padding:0;}




有些人很喜欢用*{margin:0; padding:0;},其实KwooJan不建议这么用,因为HTML标签太多了,HTML4.01 参考手册中就多达89个,我们平时常用的也就那么几个,所以没有必要将所有标签重置,这样反而使页面加载速度变慢!特别是对于大站点,更不提倡!

不过呢,如果页面出了问题,用这个可以检验一下,是不是有标签没有重置而导致的布局错位哟~!

展开更多 50%)
分享

猜你喜欢

CSS网页制作教程:制作网页导航条

Web开发
CSS网页制作教程:制作网页导航条

Photoshop设计制作网页头部导航条

PS PS基础
Photoshop设计制作网页头部导航条

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop制作透明风格的网页导航条

PS PS基础
Photoshop制作透明风格的网页导航条

Photoshop网页设计教程:制作简洁风格黑色导航条按钮

PS PS教程
Photoshop网页设计教程:制作简洁风格黑色导航条按钮

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS网页实例:斜角滑动门导航条

Web开发
CSS网页实例:斜角滑动门导航条

CSS实例教程:制作网页2级导航

Web开发
CSS实例教程:制作网页2级导航

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win10画图工具如何全屏查看图片

Win10画图工具如何全屏查看图片

CSS初学者入门:使用table布局网页不明智

CSS初学者入门:使用table布局网页不明智
下拉加载更多内容 ↓