http://bbs.blueidea.com/thread-2727499-1-1.html 蓝色理想详细教程!
彻底弄懂CSS盒子模式一(DIV布局快速入门)
作者:唐国辉
实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.html
2.彻底弄懂CSS盒子模式二(导航栏实例) 【论坛讨论】 3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 【论坛讨论】 4.彻底弄懂CSS盒子模式四(绝对定位和相对定位) 【论坛讨论】 5.彻底弄懂CSS盒子模式五(定位强化练习) 【论坛讨论】
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> CSS制作的阴影链接文字
<title>网页特效观止|http://homepage.yesky.com/|---CSS制作的阴影链接文字</title>
</head>
<body> <style> ul,li{ margin:0px; padding:0px;list-style-type: none;} http://homepage.yesky.com/nav{font-family: Verdana, "宋体", Arial;} http://homepage.yesky.com/nav li{ float:left; margin-left:30px;} http://homepage.yesky.com/nav span{display:none;} http://homepage.yesky.com/nav a{font-size:12px;font-weight: bold;color:
http://homepage.yesky.com/FF6600;text-decoration: none; display:block;} http://homepage.yesky.com/nav a:hover{ color:http://homepage.yesky.com/999;top:1px;
left:1px; position:relative;} http://homepage.yesky.com/nav a:hover span{ display:block; top:-2px; left:-2px;
position:absolute; color:http://homepage.yesky.com/FF3300;cursor:pointer;} </style> <div id="nav"> <ul> <li><a href="http://homepage.yesky.com/">网站首页<span>网站首页</span></a></li> <li><a href="http://homepage.yesky.com/">网站首页<span>网站首页</span></a></li> <li><a href="http://homepage.yesky.com/">网站首页<span>网站首页</span></a></li> <li><a href="http://homepage.yesky.com/">网站首页<span>网站首页</span></a></li> <li><a href="http://homepage.yesky.com/">网站首页<span>网站首页</span></a></li> </ul> </div>
</body> </html> ------------------------------------------
---------------------------------------- 表格边框的css语法
我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定
效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框。 有关表格边框的css语法
具体内容包括:上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样
式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。
1.上边框宽度
语法: border-top-width: <值>
允许值: thin | medium | thick | <长度>
初始值: medium
适用于: 所有对象
向下兼容: 否
上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个,都不受字体大小
或长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的
属性略写。
2.右边框宽度
语法: border-right-width: <值>
允许值: thin | medium | thick | <长度>
初始值: medium
适用于: 所有对象
向下兼容: 否
右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或
长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属
性略写。
3.下边框宽度
语法: border-bottom-width: <值>
允许值: thin | medium | thick | <长度>
初始值: medium
适用于: 所有对象
向下兼容: 否
下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或
长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在下边框、边框的宽度或边框的属
性略写。
4.左边框宽度
语法: border-left-width: <值>
允许值: thin | medium | thick | <长度>
初始值: medium
适用于: 所有对象
向下兼容: 否
左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个,都不受字体大小或
长度的影响,可以用于实现成比例的宽度。不允许使用负值。也可以用在左边框、边框的宽度或边框的属
性略写。
5.边框宽度
语法: border-width: <值>
允许值: [ thin | medium | thick | <长度> ]{1,4}
初始值: 未定义
适用于: 所有对象
向下兼容: 否
边框宽度属性用一到四个值来设置元素的边界,值是一个关键字或长度。不允许使用负值长度。如果
四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。
如果两个或三个值给出了,省略了的值与对边相等。 这个属性是上边框宽度、右边框宽度、下边框宽度
和左边框宽度属性的略写。也可以使用略写的边框属性。
6.边框颜色
语法: border-color: <值>
允许值: <颜色>{1,4}
初始值: 颜色属性的值
适用于: 所有对象
向下兼容: 否
边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了,它们分别
应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,
省略了的值与对边相等。也可以使用略写的边框属性。
7.边框样式
语法: border-style: <值>
允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
{1,4}
初始值: none
适用于: 所有对象
向下兼容: 否
边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个
关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运
用到各边上。如果两个或三个值给出了,省略了的值与对边相等。也可以使用略写的边框属性。
none:无样式; dotted:点线; dashed:虚线; solid:实线; double:双线; groove:槽线; ridge:脊线; inset:内凹; outset:外凸; ------------------------------------
需要掌握的八个CSS布局技巧
1.若有疑问立即检测
在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请
见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误
;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。
2.使用浮动功能时记得适当清除指令
浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他
不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站
上的教学。
3.边界重合时利用padding或border来避免
您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有
用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。
4.尝试避免同时对元素指定padding/border以及高度或宽度
Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度
与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素
套用padding以达效果。
5.不要依赖min-width/min-height
Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height
的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。
6.若有疑问,先减少百分比
有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。
共2页: 上一页 1 [2] 下一页
|