今天學習的主要內容就是列表,期間接觸到另一種默認首頁:default。列表分爲有序列表<ol>、無序列表<ul>和自定義列表三種。
有序列表和無序列表大體相同,下以無序列表爲例製作網頁標頭。
首先需要搭建html框架,在<body>中添加內容,添加<ul>命令,再在其中創建
<li></li>,之後在<head>中編輯樣式,下附上詳細編碼:
<!DOCTYPE html>
<html>
<head>
<style>
h3{ (此處清楚<h3>自帶格式)
margin: 0px;
/*內邊框*/
border: 0px;
}
div{
/*寬(100%表示寬度隨屏幕分辨率改變)*/
width: 100%;
/*高*/
height: 50px;
/*背景色*/
/*background-color: blue;*/
}
ul{
width: 800px;
height: 50px;
background-color: #0191DA;
/*外邊框*/
margin: 0 auto;
}
li{
width: 80px;
height: 50px;
/*background-color: yellow;*/
/*字體顏色*/
color: white;
/*文本水平居中*/
text-align: center;
/*行高*/
line-height: 50px;
/*漂浮*/
float: left;
/*列表樣式*/
list-style: none;
}
li:hover{
background-color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<li><h3>first</h3></li>
<li><h3>second</h3></li>
<li><h3>third</h3></li>
<li><h3>fourth</h3></li>
<li><h3>fifth</h3></li>
<li><h3>sixth</h3></li>
</ul>
</div>
</body>
</html>
列表的樣式編輯,只需根據<div>的形式編輯即可,凡是可自動換行接可當作<div>進行編輯,故對於<ul>、<li>的編輯還是比較簡單的操作。通過後期的練習還是可以熟練掌握的。