css细节

1.大部分浏览器将列表置于距离无序列表左边框30像素处（默认padding）。无序列表本身距离容器的上边框约10像素（默认margin），每个列表项都是一个块级元素，因此它会拉伸并填充容器的宽度，并且上下的项目都将另起一行。

 

2.list-style缩写

list-style-type,list-style-position,list-style-image可以按任意次序排列

list-style:none inside url(pic/list.gif)

 

3.浏览器布局

给整个网页加一个container,将masthead,content,sidebar,footer放入container中，并设置container的属性为：

margin：20px auto 20px auto，这可以保证整个网页的布局在任何浏览器中打开都不会有太大差异。

当然将各部分放入container中只是在需要设置整个网页的背景情况下 采取的做法，但是对于解决浏览器布局兼容问题也是一个很好的方法。

margin是用来确定元素在容器中的相对位置。

 

4.设置边框属性，模拟立体感

border:1px solid;
border-color:#fff #666 #aaa #fff ;

这两个属性注意分开写。

5.列表和form的布局设置

列表和form有一个共同特点就是，A包含B是其的一个基本形态，因此实际决定他们显示样式的是第二级元素。

列表

 

  #sidebar ul{
              margin:0;
              padding:0;
	list-style:none;
	font:bold 14px 'Lucida Grande',Verdana,sans-serif;
	text-align:center;
  }
  #sidebar li{
	margin:0 30px 0 26px;
	padding:2px 10px;
	border:1px solid;
	border-color:#fff #666 #aaa #fff ;
	background:#ddd;
  } 

ul只是用来显示样式的，li用来决定整个列表的具体布局

表单

 

/* -------------
   Form elements 
   -------------*/
form {
    margin:0;
    padding:0;
}

fieldset {
    border:0;
    margin:10px 0 10px 26px;
    padding:0;	
}
input.submit {
    margin:0 0 30px 26px;
} 

 

6.对li设置float:left;利用浮动原理，也可以将列表制作成横向导航栏的样式。

 

 7.标题标签默认是加粗的样式