标签：学习生活
今天了解了写代码的基本格式，列表，编写了一个导航栏。
笔记：
格式很重要，备份很重要。
css注释为/*注释*/
列表：有序列表,用<ol></ol>表示
无序列表,用<ul></ul>表示
自定义列表
list-style:none 用来去出列表前面的符号
text-align 用来居中文本
marg不能居中的时候，注意width的设置宽度
编写导航条步骤：
1.设置一个通长的div作为底
设置一个列表（<ul>）作为第二层
第三层为<li>
2.通长的body和ul需要去掉外边框和内边框：div,ul{
padding:0px;
margin-right:0px;
}
设置div的宽度，高度，背景色
设置ul的宽度，高度，背景色，居中
设置li的宽度，高度，背景色，字的颜色，去除字前面的符号，文字居中（text-align)，
行高（line-height),浮动，外边框距离
3.设置鼠标变色
li:hover{ background-color:red(想要的颜色) }
实现：
1.
<!DOCTYPE html>
<html>
<title></title>
<style>
#chuan{
height: 50px;
width: 100%;
background-color: blue;
}
#er{
height: 50px;
width: 500px;
/*background-color: black;*/
margin: 0 auto;
}
li{
width: 30px;
height: 50px;
/*background-color: red;*/
list-style: none;/*去除前面的小标志*/
float: left;
color: white;
margin-right: 3px;/*设置外边框*/
text-align: center;/*设置文本居中*/
line-height: 50px;/*设置行高*/
}
body,ul{/*去除外边框和内边框*/
margin: 0px;
padding: 0px;
}
li:hover{
background-color: red;/*设置鼠标变换颜色*/
}
</style>
</head>
<body>
<div id="chuan">
<ul id="er">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
标签：学习生活
原文地址：http://12254249.blog.51cto.com/12244249/1871151
