1.行内式，就是直接在网页中加入css样式表，在标记的后面加上style属性来设定css样式。
如：
<p style="font-size:12pxcolor:#000">行内式测试</p>
注：读取速度最快，但维护最麻烦
2.嵌入式,在页面的<head>和</head>之间。
如：
<style type="text/css">
p{margin: 0padding: 0color:red}
</style>
注：读取速度居中，但维护也居中
3.连接式
<link href="style.css" rel="stylesheet" type="text/css"/>
注：读取速度不及上面2种，但维护较方便；网页设计师最常用~
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin: 0px
padding: 0px
}
#menu {
margin: 0 auto
}
#nav {
height: 20px
}
#nav li {
list-style-type: none
float: left
}
#nav li a {
font-size: 14px
background-color: #00CCFF
display: block
text-align: center
height: 20px
width: 50px
padding-top: 3px
text-decoration: none
color: #000000
margin-right: 2px
}
#nav li a:hover {
background-color: #CCCCCC
}
-->
</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li><a href="#">栏目</a></li>
<li><a href="#">栏目</a></li>
<li><a href="#">栏目</a></li>
<li><a href="#">栏目</a></li>
<li><a href="#">栏目</a></li>
<li><a href="#">栏目</a></li>
</ul>
</div>
</body>
</html>
------------------------------------分隔线----------------------------
自己做的，希望是你想要的那种。
很简单呀，看过来：<body>
<div class="all">
<p>栏目标题</p>
<p><a href="#">更多>></a></p>
<div style="clear:both"></div>
</div>
</body>
<style>
a{ display:inline-blockcolor:#000text-decoration:none}
.all{ width:50%margin:0 autobackground:#cccpadding:0 20px}
.all p:first-child{ float:leftfont-size:16pxcolor:#000line-height:1.5}
.all p:nth-child(4n+2){ float:right}
</style>
还有不懂的可以继续问我。
纯手打，望采纳~
