今天學習了寫代碼的格式、列表和導航欄。列表包括有序列表(ol)、無序列表(ul)和自定義列表。
去掉列表的樣式是:list-style:none;
設置文本居中是:text-align和line-height(行高,行間距)。注意行高要與div的高度一致。
做網頁的導航欄時要先佈局,最後寫內容。
內容先是一個大的div,它包含着ul。設置樣式要 1 先去掉body和ul的內外邊框 2 設置div的寬,高和背景顏色。 3 設置ul的寬度、高度、
背景顏色和外邊框。 4 設置li標籤的寬度、高度、背景顏色、浮動、列表的樣式、行高、margin-right、text-align。
<!DOCTYPE html>
<html>
<head>
<mate charset="utf-8">
<title></title>
<style>
body,ul{
margin:0px;
padding:0px;
}
#banner{
width:100%;
height:60px;
background-color:red;
}
#container{
width:400px;
height:60px;
margin:0 auto;
background-color:red;
}
li{
width:50px;
height:60px;
/*background-color: black;*/
float:left;
margin-right:10px;
/*列表樣式*/
list-style: none;
/**/
text-align: center;
line-height: 60px;
color: #ffffff;
}
li:hover{
background-color: pink;
}
</style>
</head>
<body>
<div id="banner">
<ul id="container">
<li>語文</li>
<li>數學</li>
<li>英語</li>
<li>化學</li>
</ul>
</div>
</body>
</html>