这是我做的一个Html测试页面：
页面效果如下所示：
Paste_Image.png
html代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class = "header">
<ul class = nav>
<li><a href="#">Home</a></li>
<li><a href="#">Site</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
<div class = main-content>
<h2>Article</h2>
<ul class="article">
<li>
<img src = "images/0001.jpg" width="100" height="90">
<h3><a href="#">The blah</a></h3>
<p>This is a dangerously delicious cake.</p>
</li>
<li>
<img src = "images/0002.jpg"width="100" height="90">
<h3><a href="#">The blah</a></h3>
<p>It's always taco night somewhere!</p>
</li>
<li>
<img src = "images/0003.jpg"width="100" height="90">
<h3><a href="#">The blah</a></h3>
<p>Omelette you in on a little secret </p>
</li>
<li>
<h3><a href="#">The blah</a></h3>
<p>It's a sandwich. That's all we .</p>
</li>
</ul>
</div>
<div class = "footer">
<p>@copy; SouthWest University</p>
</div>
</body>
</html>
这是另外一个html页面
Paste_Image.png
html代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="homework.css">
</head>
<body>
<div class ="header">
<ul class = "nav">
<li><a href="#">Home</a></li>
<li><a href="#">Site</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
<div class="main-content">
<h2>The Beach</h2>
<ul class = "photos">
</ul>
<p>
stretching from Solta to Mljet, and this unique cycling trip captures the highlights with an ideal
balance of activity, culture and relaxation. Experience the beautiful island of Korcula with its picturesque old town,
the untouched beauty of Vis, and trendy Hvar with its Venetian architecture. In the company of a cycling guide,
this stimulating journey explores towns and landscapes, many of which are on UNESCO's world heritage list.
Aboard the comfortably appointed wooden motor yacht,
there is ample time between cycles to swim in the azure waters and soak up the ambience of seaside towns.
</p>
</div>
<div class = "footer">
<p>@copyright southwest university</p>
</div>
</body>
</html>
- 通过如上两个html页面对常用的html标签进行总结
div标签：用于在文档中设定一个块区域 常用属性：align:left center right
li标签：标签表示的是一个列表项
type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc
value:这个属性只适用于有序列表，用于设定列表的项目数字
ul标签：标签表示的是一个无序列表。type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc
问题总结：li标签和ul标签的混合使用方法。
附：css代码
body {
padding: 0 0 0 0;
background-color: #ffffff;
background-image: url(images/bg3-dark.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
font-family: Helvetica, Arial, sans-serif;
}
.nav {
padding-left: 0;
margin: 5px 0 20px 0;
text-align: center;
}
.nav li {
display: inline;
padding-right: 10px;
}
.nav li:last-child {
padding-right: 0;
}
.header {
padding: 10px 10px 10px 10px;
}
.header a {
color: #ffffff;
}
.header img {
display: block;
margin: 0 auto 0 auto;
}
.header h1 {
text-align: center;
}
.main-content {
width: 500px;
padding: 20px 20px 20px 20px;
border: 1px solid #dddddd;
border-radius:15px;
margin: 30px auto 0 auto;
background: #fdffff;
-webkit-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
-moz-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
}
h1, h2, h3 {
color: #37A5F0;
}
h1 {
color: #ffffff;
margin: 10px 0 15px 0;
text-align: center;
}
h2 {
margin: 10px 0 20px 0;
text-align: center;
font-size: 26px;
font-weight: bold;
}
h3 {
margin: 15px 0 15px 0;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 3px;
font-size: 18px;
font-weight: bold;
}
ul {
padding: 0 0 0 50px;
}
ul li {
margin: 0 0 5px 0;
}
ol {
padding: 0 0 0 50px;
}
p {
color: #505050;
font-size: 15px;
padding-left: 10px;
padding-right: 10px;
}
hr {
border:none;
border-top:1px solid gainsboro;
height:0;
}
.main-content {
width: 500px;
padding: 20px 20px 20px 20px;
border: 1px solid #dddddd;
margin: 30px auto 0 auto;
background: #ffffff url(images/crossword.png) top left repeat;
}
.main-content p {
line-height: 26px;
}
.photos {
list-style-type: none;
padding: 0;
}
.photos li {
display: inline;
padding-left: 11px;
}
.featured-image {
width: 500px;
height: 195px;
background: #ffffff url(images/featured-cake.png) top left no-repeat;
}
.featured-image h3 {
margin: 0;
background-color: #333333;
color: #ffffff;
padding: 5px 0 5px 15px;
text-transform: uppercase;
}
.footer {
margin-top: 20px;
}
.footer p {
color: #aaaaaa;
text-align: center;
font-weight: bold;
font-size: 12px;
font-style: italic;
text-transform: uppercase;
}
