這是我做的一個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標(biāo)簽進(jìn)行總結(jié)
div標(biāo)簽：用于在文檔中設(shè)定一個塊區(qū)域 常用屬性：align:left center right
li標(biāo)簽：標(biāo)簽表示的是一個列表項
? type:這個屬性只適用于無序列表，用于設(shè)定項目符號，默認(rèn)值為disc
? value:這個屬性只適用于有序列表，用于設(shè)定列表的項目數(shù)字
ul標(biāo)簽：標(biāo)簽表示的是一個無序列表。type:規(guī)定列表的項目符號類型,可取值 disc,square,circle.默認(rèn)值為disc
問題總結(jié)：li標(biāo)簽和ul標(biāo)簽的混合使用方法。
附：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;
}
