首页 | 小言视角 | 文摘 | 我的收藏 | 我爱我家 | 技术中心 | 学无止境留言本 |
当前位置:首页>>学无止境>>软件应用>>正文
彻底弄懂CSS盒子模式

文章来源: 文章作者: 发布时间:2007-12-15   字体: [ ]

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] 下一页

↑返回顶部   打印本页   关闭窗口↓  
 
相关信息

·想让DIV居中,如何编写CSS
·IBM本本BIOS详细设置手册
·访问网上邻居需要密码怎么
·开始→运行→命令集锦
·常用计算机运行管理命令
·温度低了无法冷启动
·在XP\2000系统下如何设置
·WinXP系统网络不能互访的

热点文章

·推荐一个好东西:免费电话
·上传软件LeapFtp的使用方
·Flashfxp使用指南(网站文
·如何关闭FlashFXP的被动模
·十大常遇流氓软件完全卸载
·IE最新高危漏洞非官方补丁
·LZK主讲网页制作入门(图
·corelDRAW12教程:女性内衣

推荐文章

 

首页>>学无止境>>软件应用>>
语深深版权所有 2005-2008