16-11-09
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>的编辑还是比较简单的操作。通过后期的练习还是可以熟练掌握的。
以上是关于16-11-09的主要内容，如果未能解决你的问题，请参考以下文章