心得

  今天學習了寫代碼的格式、列表和導航欄。列表包括有序列表(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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章