今天学习了写代码的格式、列表和导航栏。列表包括有序列表(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>