列表样式属性
- 无序（ol） 有序（ul） 自定义列表 相对于应用来说无序列表使用较多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>列表样式属性</title>
<style type="text/css">
/* 去除样式 */
ul {
/*list-style-type: none;*//*去除列表前面的样式
/*list-style-type: disc;*//*默认实心圆*/
/*list-style-type: circle;*//*空心圆*/
/*list-style-type: square;*//*实心方块*/
}
.l li {
/* 文本水平垂直居中 需要把高度和行高的属性值设置一样 */
height: 45px;
line-height: 45px;
/*text-align: center;*/
border: 1px solid #00f;
/* outside 外边 inside 里边 */
/*list-style-position: inside;*//*符号在边框里面*/
/* 将列表前面的符号 换成图片 需要先清除符号 接着设置符号图片路径 */
/*list-style-type: none;
list-style-image: url(../img/sina.png);*/
/* 属性顺序可以不同 个数也可以随机定义 */
list-style: none inside url(../arr.png);
}
.b li {
list-style: none url(../img/sina.png);
}
/* 设置超级链接样式 */
a:link,a:visited {
text-decoration: none;/*去掉下划线*/
color: #333;/*正常 访问颜色一样*/
}
a:hover {
text-decoration: underline;
/* 鼠标悬浮样式 字体颜色 添加下划线 */
color: #f00;
}
/*a:active {}*/ /*点击瞬间样式一般不会设置 因时间太短*/
</style>
</head>
<body>
<h3>四大美女</h3>
<ul class="l">
<li>林儿</li>
<li>熳熳</li>
<li>芳儿</li>
<li>花儿</li>
</ul>
<ul class="b">
<li><a href="#">百度一下</a></li>
<li><a href="#">搜狐</a></li>
<li><a href="#">新浪</a></li>
</ul>
</body>
</html>
- 文本水平垂直居中 需要把高度和行高的属性值设置一样
- 将列表前面的符号 换成图片 需要先清除符号 接着设置符号图片路径
网友评论