繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 学习WEB标准总结的一些CSS/XHTML知识小结
- CSS样式表
- 推荐一篇利用th,colgroup,col定义表格样式
- 都是IE惹的祸多浏览器兼容问题
- dl,dt,dd制作的CSS垂直菜单
- 推荐css打造经典鼠标触发显示选项
- div+css中Class与ID的区别
- CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
- 让iframe自适应高度（支持xhtml）IE firefox兼容
- 实用的利用 CSS + <em>标签 来完成一个三角形的制作
- CSS控制文本自动换行的问题
- 把 CDATA 中的内容（有可能是不规范的Html代码）以Html方式展现出来。
- 仿客齐集首页导航条DIV+CSS+JS [代码实例]
- 关于margin-left的示例代码
- CSS优化2-(常用CSS缩写语法总结)
- font和line-height之CSS代码书写顺序不同，导致显示效果不一样
- 推荐三种简洁的Tab导航（网页选项卡）简析
- 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！
- 解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
- CSS2实现的隔行换色
- CSS中几种常见的注释
- dhtml shtml xhtml的区别解析
CSS样式表 中的 学习WEB标准总结的一些CSS/XHTML知识小结
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 106 ::
收藏到网摘: n/a
制作网页过程中，总会遇到一些CSS/XHTML的各种问题，下面大体的总结了下 1、很多兼容性问题，是因为不同标签在不同浏览器下有着不同的 padding margin默认值。所以可以事先定义
复制代码 代码如下:
11、在使用ul做列表的时候，不单可以写li ，还可以用dt和dd，但使用后要注意测试兼容性。我还没有总结出到底会什么问题。
12、在给标题加样式的时候，尽量用h1 h2 h3等...去做标题的标签。可以在文档前，先设置
11、在使用ul做列表的时候，不单可以写li ，还可以用dt和dd，但使用后要注意测试兼容性。我还没有总结出到底会什么问题。
12、在给标题加样式的时候，尽量用h1 h2 h3等...去做标题的标签。可以在文档前，先设置
复制代码 代码如下:
15、在层次比较多的时候，如何更好的给class命名？举例如下：
.index #mainContent .mainContent_right .mainContent_list2 h1 a{}
这是我刚给你做的页面中，层次多的时候，使用的命名方式是不太好的。我现在才反映过来。
应该简化为：
.index #mainContent .right .list2 h1 a{}
为什么呢？为什么不怕right和list2会重复？
因为我们前面是有路径的。
.index #mainContent 下面的 right
.index #mainContent .right下面的 list2
所以是不会重复的！~就没必要
.mainContent_right .mainContent_list2
非在前面加个mainContent了！
16、对于兼容性，我的感受是，尽量把东西写正规一些，就不会经常出现兼容性问题。
比如ff下默认字体和ie不一样，但如果我们在开始的时候就定义了字体，就不会看起来不一样了。
ff下很多东西的padding和ie不一样，但我们事先定义了padding为0，所以也会没事。
17、类似a标签，或者其它 span等。如果不定义width的话，那么默认就100%宽。如下：
<a>1111</a><a>2222</a><a>3333</a>
如果我们设置了 a{float:left}后，他们三个会在一排显示，并且100%宽，变成自适应的宽，也就是里面有多少字符，就撑多大。
这个细节，在处理滑动门效果的时候，比较有用。
18、什么是滑动门。
简单的说是一组按扭，每个按扭中的文字长度不一定。我又不想单独切每个按扭的背景色，所以就使用滑动门效果。让其可以自适应。
下面是一个例子：
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">建站指南</a></li>
<li><a href="#">网络创业</a></li>
</ul>
.nav {
list-style-type: none;
height:70px;
margin:0px 0px 0px 20px
}
.nav li{float:left;background:url(../images/b01.gif) no-repeat;margin-left:8px;margin-top:10px;}
.nav a{
float:left;
color:#4d7ecd;
display:block;
background:url(../images/b02.gif) no-repeat right top;
height:40px;
padding:0px 16px 15px 16px;
text-align:center;
}
这里设置了两个背景。 b01 是 按扭的左面部分（包括中间），切的时候，切大一些。b02是按扭右部分（不包括中间）
把b02设置为不重复，水平居右。这样一个可自动伸缩的滑动门就做好了。
19、这种情况下必须设置height
.list_title{
background:url(../images/list/06.gif);
}
.list_title span{
float:left;
display:block;
height:38px;
}
list_title是个div，因为基于前面讲的“能不给box 设置height和width就尽量不设置”的原则，我们没有给list_title设置高度，希望通过其下面的span将其撑开。
但因为list_title本身是没有高度的，所以也就不会显示background。
结果就是list_title的背景显示不出。所以必须设置个height，height:38px;
但width就没必要设置了，因为div默认的width是100%(好象所有可以设置width的元素，默认width都是100%)
20、提前设置ul{list-style-type:none;} 居然是无效的~~
难道必须在每个ul中写list-style-type:none;
15、在层次比较多的时候，如何更好的给class命名？举例如下：
复制代码 代码如下:
.index #mainContent .mainContent_right .mainContent_list2 h1 a{}
这是我刚给你做的页面中，层次多的时候，使用的命名方式是不太好的。我现在才反映过来。
应该简化为：
复制代码 代码如下:
.index #mainContent .right .list2 h1 a{}
为什么呢？为什么不怕right和list2会重复？
因为我们前面是有路径的。
.index #mainContent 下面的 right
.index #mainContent .right下面的 list2
所以是不会重复的！~就没必要
.mainContent_right .mainContent_list2
非在前面加个mainContent了！
16、对于兼容性，我的感受是，尽量把东西写正规一些，就不会经常出现兼容性问题。
比如ff下默认字体和ie不一样，但如果我们在开始的时候就定义了字体，就不会看起来不一样了。
ff下很多东西的padding和ie不一样，但我们事先定义了padding为0，所以也会没事。
17、类似a标签，或者其它 span等。如果不定义width的话，那么默认就100%宽。如下：
复制代码 代码如下:
<a>1111</a><a>2222</a><a>3333</a>
如果我们设置了 a{float:left}后，他们三个会在一排显示，并且100%宽，变成自适应的宽，也就是里面有多少字符，就撑多大。
这个细节，在处理滑动门效果的时候，比较有用。
18、什么是滑动门。
简单的说是一组按扭，每个按扭中的文字长度不一定。我又不想单独切每个按扭的背景色，所以就使用滑动门效果。让其可以自适应。
下面是一个例子：
复制代码 代码如下:
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">建站指南</a></li>
<li><a href="#">网络创业</a></li>
</ul>
.nav {
list-style-type: none;
height:70px;
margin:0px 0px 0px 20px
}
.nav li{float:left;background:url(../images/b01.gif) no-repeat;margin-left:8px;margin-top:10px;}
.nav a{
float:left;
color:#4d7ecd;
display:block;
background:url(../images/b02.gif) no-repeat right top;
height:40px;
padding:0px 16px 15px 16px;
text-align:center;
}
这里设置了两个背景。 b01 是 按扭的左面部分（包括中间），切的时候，切大一些。b02是按扭右部分（不包括中间）
把b02设置为不重复，水平居右。这样一个可自动伸缩的滑动门就做好了。
19、这种情况下必须设置height
复制代码 代码如下:
.list_title{
background:url(../images/list/06.gif);
}
.list_title span{
float:left;
display:block;
height:38px;
}
list_title是个div，因为基于前面讲的“能不给box 设置height和width就尽量不设置”的原则，我们没有给list_title设置高度，希望通过其下面的span将其撑开。
但因为list_title本身是没有高度的，所以也就不会显示background。
结果就是list_title的背景显示不出。所以必须设置个height，height:38px;
但width就没必要设置了，因为div默认的width是100%(好象所有可以设置width的元素，默认width都是100%)
20、提前设置ul{list-style-type:none;} 居然是无效的~~
难道必须在每个ul中写list-style-type:none;
评论 (0) All
