初学CSS,问个关于DW可视编辑问题!

html-css011

初学CSS,问个关于DW可视编辑问题!,第1张

有很多要注意的细节!在IE中和在其它浏览器中的CSS表现是不一样的!

举个简单的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

* {

margin:0

padding:0

}

body {

font-family:Verdana, Arial, Helvetica, sans-serif

font-size:11px

}

ul{ margin:100pxlist-style:none}

li{ float:left}

a{ padding:10px 20pxbackground:#000color:#ffftext-decoration:nonetext-transform:capitalizedisplay:block}

a:hover{ background:#ccccolor:#fff}

</style>

</head>

<body>

<ul id="nav">

<li><a href="#">home</a></li>

<li><a href="#">about</a></li>

<li><a href="#">news</a></li>

<li><a href="#">products</a></li>

<li><a href="#">services</a></li>

<li><a href="#">clients</a></li>

<li><a href="#">blog</a></li>

</ul>

</body>

</html>

这段是导航栏的代码 如果a标签里没有display:block属性,那在IE里显示的导航栏没有上下间距,在FireFox里有上下边距! 因为a是内联标记,在IE中内联标记上下边距的默认值是0 所以要把a块化!

还有很多要注意的细节,做多了就有记住了!

如果刚开始学的话建议去看下视频教程 http://web.yuyadong.com 里面讲得比较详细,主要以实例为主,各方面的细节也有讲到

你可以在你空间的 “管理中心”->“空间装扮”->“我制作的模板”找到的。

用火狐的firebug找到相应的class 或ID ,修改,保存,预览。知道满意为止。