1、有序列表與無序列表
無序列表<ul>
<li><p>無序列表1</p></li>
<li><p>無序列表2</p></li>
<li><p>無序列表3</p></li>
</ul><ol>
<li><p>有序列表1</p></li>
<li><p>有序列表2</p></li>
<li><p>有序列表3</p></li>
</ol>無序列表，是以ul包含li的形式，默認每行前的符號是圓點，可以通過樣式表改爲無、方塊，空心圓等。有序列表是以ol包含li的形式，是以數字爲項目符號的，無序列表也可以用css定義顯示成有序列表
2、橫向圖文列表實現
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body
{
margin:0 auto;
font-size:12px;
font-family:Verdana;
line-height:1.5;
}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form
{
padding:0;
margin:0;
}
img
{
border:0px;
}
a
{
color:#05a;
text-decoration:none;
}
a:hover
{
color:#f00;
}
#layout ul li
{
width:240px;
float:left;
margin:20px 0px 0px 20px;
display:inline;
text-align:center;
}
#layout ul li a
{
display:block;
}
#layout ul li a img
{
padding:1px;
border:1px solid #e1e1e1;
margin-bottom:3px;
}
#layout ul li a:hover img
{
padding:0px;
border:2px solid #f98510;
}
</style>
</head>
<body>
<div id = "layout">
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
<ul>
<li>
<a href = "#">
<img src = "picture/keyan.jpg" width = "220" height = "180" />CSNS
</a>
</li>
</ul>
</div>
</body>
</html>