加入收藏
<a onClick="window.external.AddFavorite(location.href,document.title)" style="cursor:hand;color:blue"><font color="blue" size=2>加入收藏</font></a>
一、在CSS中定义Li为：
li{
background:url(icon1.gif) no-repeat 5px 7px;
}
li 的背景图片为icon1.gif
no-repeat的意思是 背景不重复
5px 7px 意思是 背景图片从相对li top:5px left:7px 的位置开始显示。
二、网页中加入竖线的方法
<li class="menuDiv"></li>
.menuDiv {width:1px;height:28px;background:#999}
三、表格里加入虚线的方法
<td><div style="border-bottom:1px dashed #ccc"></div></td>
margin:auto; /* 层居中 */
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线 */
clear:both /* 清除浮动 */
另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both 是由于之前的ul、li 元素设置了浮动，如果不清除则会影响banner 层位置的设定。
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
添加overflow:hidden 则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden 就可以解决这个问题。
四、浮动IE6文本产生3象素的bug时指挨着浮动元素的文本会神奇的被踢出去3像素，好像浮动元素的周围有一个奇怪的力场一样。
解决办法：
原代码：
<div class="box1 ">
<div class="box1_2">float:left;width:200px;height:100px;background-color:green;</di>
<div class="box1_3">margin-left:200px;width:150px;height:100px;background-color:red;</div>
</div>
改后代码：
<div class="box1">
<div class="box1_4">margin-right:-3px;float:left;width:200px;height:100px;background-color:green;</div>
<div class="box1_3">width:150px; height:100px; background-color:red;</div>
</div>
DIV+CSS网页布局技巧实例3：设置层的透明度
filter: alpha(opacity=70);
opacity: 0.7;
DIV+CSS网页布局技巧实例7：取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
DIV+CSS网页布局技巧实例12：使用子选择器
使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码
<ul id="subnav">
<li> <a href="#"> Item 1</a> </li>
<li class="sel"> <a href="#"> Item 1</a> </li>
<li> <a href="#"> Item 1</a> </li>
</ul>
样式定义是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
alt属性指定了当图片不能显示的时候就显示供替换文本
<img src="logo.gif" alt="互动力工作室标志，点击返回首页">
另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。
例如： div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成 #content { /* declarations */ }
.details { /* declarations */ } 这样可以节省一些字节。
Overflow可能的值
设置 overflow 属性：
div { width:150px; height:150px; overflow:scroll;}
九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码
<ul id="subnav">
<li><a href="#"> Item 1</a> </li>
<li class="sel"> <a href="#"> Item 1</a> </li>
<li><a href="#"> Item 1</a> </li>
</ul>
样式定义是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ } 用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。
例如： @import url("main.css"); 然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。
后来我用这样的写法： @import "main.css";
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。
想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
文字的横排与竖排
writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。比如：
p{
writing-mode: tb-rl; /*竖排版文字*/
}
4、项目符号的问题 —— 使用list-style
在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul或ol）的项目符号为方块，如：
li{
list-style: square;
}
另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position: outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐
单选默认设置
<input type="radio" name="state" value="男" checked="checked" />男 默认为男
<input type="radio" name="state" value="nv" />女
border-bottom:1px solid #005aa7; /* 下划线效果 */
color:#005aa7;
border-top:0px; border-left:0px;
border-right:0px;
background-color:transparent; /* 背景色透明 */
a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */
color: #A62020;
padding:4px 10px 4px 10px;
background-color: #ecd8db;
text-decoration: none;
border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
a:hover{ /* 鼠标经过时的超链接 */
color:#821818; /* 改变文字颜色 */
padding:5px 8px 3px 12px; /* 改变文字位置 */
background-color:#e2c4c9; /* 改变背景色 */
border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */
border-left: 1px solid #717171;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
a.help:hover{ /* “帮助”按钮的样式 */
cursor:help; /* 变幻鼠标形状 */
}