CSS网页制作选读.docx

CSS网页制作教程:制作网页导航条 CSS标签重置 对于XHTML+CSS布局起着一个重要的决定性作用，它是提高页面浏览器兼容性的第一步。 那么什么是标签重置呢？ 顾名思义，就是对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个，我们平时常用的也就那么几个，所以没有必要将所有标签重置，这样反而使页面加载速度变慢！特别是对于大站点，更不提倡！ 不过呢，如果页面出了问题，用这个可以检验一下，是不是有标签没有重置而导致的布局错位哟~！ 网页制作poluoluo文章简介：CSS网页制作教程:制作网页导航条. 几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好。 ol 有序列表 ol li……/li li……/li li……/li /ol 表现为： 1…… 2…… 3…… ul 无序列表，表现为li前面是大圆点而不是123 ul li……/li li……/li /ul 很多人容易忽略 dl dt dd的用法 dl 内容块 dt 内容块的标题 dd 内容 可以这么写： dl dt标题/dt dd内容1/dd dd内容2/dd /dl dt 和dd中可以再加入 ol ul li和p 理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。 课程开始：? ?? ?前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY??！！！? ?? ?OK！我们要做的导航条的效果如下： ??????鼠标移动上去背景变黑，并且字体颜色变成白色 ??????其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下： HTML代码：div id=nav/divCSS代码：#nav{width:960px;height:35px;background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/margin:0 auto;/*水平居中*/margin-top:30px;/*顶部30px*/} 还有一点需要提醒的是，为了页面在浏览器的兼容性，不要忘记在CSS文件顶部加入标签重置代码哟~ 代码：body,div{padding:0; margin:0;} 这里就不多说了，不明白的就看，课程顶部的课程关键词怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间，并且所有浏览器效果一样呢~呵呵(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的，本身我把整个XHTML+CSS的理论都压缩到教程里了，或者说教程的“知识点浓度”很高，有时需要你一字不漏的去品我说的话，不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了，KwooJan保证你以后只要做出个页面就很Easy的兼容各种浏览器，并且代码绝对的精简！CSS文件加载速