16-11-09

  今天學習的主要內容就是列表,期間接觸到另一種默認首頁: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>的編輯還是比較簡單的操作。通過後期的練習還是可以熟練掌握的。



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