CSS设置列表样式以及列表项目的版式
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>