码迷,mamicode.com
首页 > 其他好文 > 详细

16-11-09

时间:2016-11-09 23:16:51      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:列表

  今天学习的主要内容就是列表,期间接触到另一种默认首页: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

标签:列表

原文地址:http://12266619.blog.51cto.com/12256619/1871183

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!