CSS设置列表项目符号
CSS使用list-style-type属性来设置无序列表的样式,属性值可以有以下几种:
none
,取消项目符号。disc
,实心圆(默认值)。circle
,空心圆。square
,正方形。
CSS使用list-style-type属性来设置有序列表的样式,属性值比较多:
- decimal:数字(1,2,3,4等)。
- lower-roman:小写罗马数字(i,ii,iii,iv,v等)。
- upper-roman:大写罗马数字(I,II,III,IV,V等)。
- lower-alpha:小写英文字母(a,b,c,d等)。
- upper-alpha:大写英文字母(A,B,C,D等)。
- armenian:传统的亚美尼亚编号方式、
- Katakana:日文片假名(A,I,U,E,O,KA,KI等)。
CSS设置列表项目的版式
默认列表是竖排显示,如果想让列表并排显示,可以在li标签里面添加float:left样式
或者display:inline-block样式
,就可以使列表并排显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>列表项目的版式</title>
<style type="text/css">
body{
background-color: #CCCCCC;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.content ul li{
background-color: #F8F8F8;
padding: 4px;
border: solid 1px #666666;
list-style-type: none;
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<ul >
<li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">首页</a></li>
<li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">新闻导航</a></li>
<li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">娱乐文章</a></li>
<li><a href="https://www.e1yu.com" target="_black" rel="noopener noreferrer">美文欣赏</a></li>
</ul>
</div>
</body>
</html>
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!