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