标签：style indent 样式 text none 列表 nbsp font CSS
CSS列表样式
首先定义一个列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">衣帽</a> <a href="#">数码</a></li>
<li><a href="#">音像</a> <a href="#">男装</a> <a href="#">厨具</a></li>
<li><a href="#">箱包</a> <a href="#">女装</a> <a href="#">卫浴</a></li>
<li><a href="#">服饰</a> <a href="#">童装</a> <a href="#">家居</a></li>
<li><a href="#">充值</a> <a href="#">保健</a> <a href="#">珠宝</a></li>
<li><a href="#">电器</a> <a href="#">钟表</a> <a href="#">充值</a></li>
<li><a href="#">电脑</a> <a href="#">旅行</a> <a href="#">旅游</a></li>
<li><a href="#">手机</a> <a href="#">护肤</a> <a href="#">教育</a></li>
<li><a href="#">彩票</a> <a href="#">美妆</a> <a href="#">时装</a></li>
</ul>
</div>
</body>
</html>
网页效果如下：
然后引入style.css：
style.css代码如下：
#nav{
width: 500px;
background: darkgray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
ul{
background: darkgray;
}
/*
list-style
none：去掉圆点
text-indent：缩进
*/
ul li{
height: 30px;
list-style:none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
/* 鼠标放上去的颜色*/
a:hover{
color: #ff6519;
text-decoration:underline;
}
效果如下：
标签：style,indent,样式,text,none,列表,nbsp,font,CSS 来源： https://www.cnblogs.com/dawn006/p/15774656.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。