body{/*body标签*/
background-color:white/*背景色white（白色，等同于 #fff）*/
font-size:12px/*字体大小*/
font-family:Arial, Helvetica, sans-serif/*字体*/
margin:0px/*外边距*/
padding:0px/*内边距*/
color:white/*标签文字色*/
}
ul,li{
margin:0px/*外边距*/
padding:0px/*内边距*/
}
li{
display:inline/*元素会被显示为内联元素，元素前后没有换行符*/
list-style:none/*列表无样式*/
list-style-position:outside
text-align:center/*内部居中处理*/
font-weight:bold/*粗体*/
float:left/*元素左浮动*/
}
a:link{/*link 链接通用*/
color:#336601/*元素颜色*/
text-decoration:none/*无下划线*/
float:left
width:100px/*宽度*/
padding:3px 5px 0px 5px/*内边距 padding:上 右 下 左，margin是一样的*/
}
a:visited{/*访问过的链接*/
color:#336601
text-decoration:none
float:left
padding:3px 5px 0px 5px
width:100px
}
a:hover{/*鼠标划过链接，类似于一个mousemove事件*/
color:white
float:left
padding:3px 3px 0px 20px
width:88px
text-decoration:none
background-color:#539D26/*背景色*/
}
a:active{/*活动中的链接 鼠标左键点击事件（左键未弹起） */
color:white
float:left
padding:3px 3px 0px 20px
width:88px
text-decoration:none
background-color:#BD06B4
}
#nav{/*标签id为nav*/
width:700px
height:30px
border-bottom:0px/*下边框*/
padding:0px 5px/*另外一种那个写法 只有两个属性值时->padding:上下 左右*/
position:absolute/*绝对位置*/
z-index:1/*z序*/
left: 198px/*左定位*/
top: 25px/*右定位*/
}
.list{/*类class=list*/
line-height:20px/*行高*/
text-align:left
padding:4px
font-weight:normal
}
.menu1{
width:120px
height:auto
margin:6px 4px 0px 0px
border:1px solid #9CDD75/*边框border:粗细 样式 颜色*/
background-color:#09C
color:#336601
padding:6px 0px 0px 0px
cursor:hand/*鼠标样式hand*/
overflow-y:hidden/*元素超过高度时hidden（隐藏）*/
/*下面2行的是滤镜 透明度*/
filter:Alpha(opacity=70)
-moz-opacity:0.7
}
.menu2{
width:120px
height:18px
margin:6px 4px 0px 0px
background-color:#F5F5F5
color:#999999
border:1px solid #EEE8DD
padding:6px 0px 0px 0px
overflow-y:hidden
cursor:hand
}
我把选择器的含义、属性的含义都写了一遍，下面重复的我就没写了。如果你希望了解的更详细，可以把每一个属性用百度去搜。body //下面的样式，作用于<body>标签
{margin:0//上、下、左、右外边距都为0；
padding:0//上、下、左、右内边距都为0；
background:#ccc//背景色为#ccc
}
header h3//下面的样式，作用于<header>标签里面的<h3>标签
{margin:0
padding:0
text-align:center//文本居中
line-height:80px//行高80px
color:#fff//字体颜色#fff
font-size:25px//字体大小25px
}
header ul//下面的样式，作用于<header>标签里面的<ul>标签
{ list-style:none//列表前面没圆点
overflow:hidden//超过范围的都隐藏
padding-left:270px//左边距270px
padding-top:160px
}
header ul li a//下面的样式，作用于<header>标签里面的<ul>里面的<li>里面的<a>标签
{color:#004a87
float:left//向左浮动
padding-left:30px
font-size:12px
text-decoration:none//无下划线
}
ul li a:hover//下面的样式，作用于鼠标在链接上面的时候的样式
{color:#FF0080}
#zuida
{margin:auto
width:880px
margin-bottom:5px
border:1px dashed #cdcdcd
background:#fff
}
header
{background:url(../images/bannar.jpg) no-repeat
height:300px
margin-bottom:5px
}
#content//下面的样式，作用于id="content"的标签
{
margin-bottom:5px
}
#zuoce
{
height:600px
width:640px
float:right
}
#youce
{ border:1px solid #abcdef//边框为1px大小的实线，颜色为#abcdef
box-shadow:1px 1px 3px RGBA(0,0,0,.5)//边框阴影效果，上右都是1px宽，下是3px宽，左的颜色是RGBA(0,0,0,.5)
width:235px
}
footer
{ height:30px
background:#88dddd
clear:both//清楚两边的浮动，即是两边的浮动都清空
}
img
{margin:0px 2px/*设置上下有两个像素的外边距*/
}
#youce h5
{margin:0
padding:0px
background:url(../images/leftbg.jpg) no-repeatheight:23
text-align:center
line-height:23px
border-bottom:2px dotted #0099ff
}
#youce p
{padding-left:10px
margin:0px
padding-top:8px
font-size:12px
line-height:1.5
}
#youce div ul li
{list-style:none
}
#youce div ul li a
{text-decoration:none
color:#234187
font-size:12px
}
#youce div ul li:before//能实现跟js相似的效果，鼠标放上去之前的显示效果
{
content:url(../images/4.gif)//鼠标放上去之前，内容是这张图片
margin-right:3px//鼠标放上去之前，右边距是3px
}
#youce div ul{ padding:7px
margin:7px
}
#youce div ul li a:hover{color:#f00
}
#zuoce div h3{
color:#0f0
border-bottom:1px dotted #999
margin:0
padding:0
}
#zuoce div{
border:1px solid #ccc
}
.zuozhe{
color:#888
margin:0
padding:0
font-size:12px
text-align:right
}
.zhenwen,.zhengwen,.dian,.pinglun{
font-size:12px
text-indent:2em；//段落缩进2em
line-height:1.5
}
.pinglun{
color:#ff6600
}
footer{
color:#004587
text-align:center
line-height:30px
}
body {/*设置body整体样式*/background-color: #DCDCDC /*背景色*/
font-family: Arial, Helvetica, sans-serif/*字体*/
font-size: 12px/*字体大小*/
line-height: 24px/*文字行高*/
color: #336699/*字体颜色*/
}
td, th { /*设置所有表格中td th样式 以下属性同body一样解释*/
font-family: Arial, Helvetica, sans-serif
font-size: 12px
line-height: 24px
color: #333333
}
a { /*设置链接样式*/
color: #3366CC
text-decoration: none /*无下划线*/
}
form { /*表单样式*/
background-color: #CCCC99
}
.title { /*设置类名为title的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 24px
line-height: 30px
background-color: #006666
color: #DCDCDC
}
.subtitle {/*设置类名为subtitle的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 16px
line-height: 22px
font-weight: bold/*字体粗细*/
color: #006666
}
.header {/*设置类名为header的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 24px
background-color: #006666
color: #DCDCDC
}
.nav { /*设置类名为nav的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 14px
font-weight: bold
background-color: #CCCCCC
}
.navLink { /*设置类名为navLink的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 14px
font-weight: bold
background-color: #DEDECA
}
.sidebar { /*设置类名为sidebar的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 12px
line-height: 18px
padding: 3px /*内补白为3像素*/
background-color: #FFFFFF
}
.sidebarHeader { /*设置类名为sidebarHeader的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 16px
line-height: 24px
color: #FFFFFF
background-color: #339999
}
.sidebarFooter { /*设置类名为sidebarFooter的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 12px
line-height: 18px
background-color: #CCCCCC
}
.footer { /*设置类名为footer的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 14px
font-weight: bold
line-height: 22px
color: #333333
background-color: #CCCCCC
}
.legal { /*设置类名为legal的元素样式 */
font-family: Arial, Helvetica, sans-serif
font-size: 9px
color: #333333
}
.box1 { /*设置类名为box1的元素边框样式 */
border-color: #CCCCCC #333333 #333333 #CCCCCC /*边框的上 右 下 左依次对应的颜色*/
border-width: medium/*边框粗细*/
border-style: ridge/*边框风格*/
}
.promo { /*设置类名为promo的元素样式 */
font-family: "Times New Roman", Times, serif
color: #000033
}
.titlebar { /*设置类名为titlebar的元素样式 */
font-family: "Times New Roman", Times, serif
font-size: 9px
color: #FFFFFF
background-color: #336699
}
.dingbat { /*设置类名为dingbat的元素样式 */
font-family: Arial, Helvetica, sans-serif
background-color: #99CC99
color: #006666
font-weight: bolder
font-size: medium
}
a:hover { /*设置当鼠标移上时候的链接样式 */
text-decoration: underline
}
input.big { /*设置input元素中类名为big的样式 */
width: 100px /*宽*/
}
input.small { /*设置input元素中类名为small的样式 */
width: 50px
}
