我的CSS (1)

一直很抵触CSS，因为总觉得无章可循，没有能力驾驭。但是看到别人漂亮的page也总是手痒、心痒。

 

实战了一下。记之。

1）
效果：有条蓝色的底线； 内容距离Border 10px。

.header
{
 background-color:#FFFFFF;
 border-bottom-width: 3px;
 border-bottom-style: solid;
 border-bottom-color: #52a9d4;
 padding: 10px;
}

2）在h1中嵌入了<a>。因为h1存在默认的margin, padding,此处需要清除之。float很明白。
.headerContainer h1{
 margin: 0;
 padding: 0;
 float: left;

}

这个css主要是通过h1设置给它包含的<a>的。如果不用h1，就需要针对<a>把<a>设置成Block元素，并设置float 属性。

 

3）这个css很经典。改变ul的样子。参考《CSS.Mastery.Advanced.Web.Standards.Solutions》吧，里面专门有几页讲怎样用<ul><li>做菜单。

.headerContainer ul
{ 
 margin: 0;
 padding: 0;
 list-style: none;
 float: right;
}

 

4）在右边画出蓝色的分隔符。
.headerContainer ul li
{
 margin: 3pt;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #006699;
 float: left;
 font-size: 110%;
}

 

5）这个根本就不必说了。
.headerContainer ul li a
{
 color: #006699;
 margin: 2px;
 padding: 5px;
 display: block;
}

 

感觉

1)最重要的还是要理解CSS的盒模型。理解float定位。

2)要善用工具，比如Dreamweaver、FireBug。

3)不想使用利用ID的方式设置css。感觉有点特殊化。虽然谁也不会用你的css做东西。用id就是感觉不好。