ul标签
ul标签是非常实用的,例如用户信息,下面一大列,位置一样,字体一样,其他都一样。例如:
或者是导航栏,或者是某某列表,写起来又方便,看起来也很整洁
整个的css是这样的
.left-cate{
margin-left: -17px;
}
.left-cate ul{
margin-top: 21px;
width: 98%;
padding-left: 0px;
}
.left-cate li{
list-style:none;
height: 50px;
line-height: 50px;
width: 111%;
text-align:center;
}
.left-cate li i{
margin-right: 10px;
}
.left-cate-active{
color: #9472C7;background: #F4EEFC;border-left: 4px solid #9472C7;
}
整个的html
<div class="left-cate">
<ul>
<li class="left-cate-active"><i class="fal fa-address-card"></i>个人资料</li>
<li><i class="fal fa-user"></i>用户中心</li>
<li><i class="fal fa-comment-dots"></i>私人消息</li>
<li><i class="fal fa-lock"></i>修改密码</li>
<li><i class="fal fa-cog"></i>安全设置</li>
</ul>
</div>
目前还不是很专业,以实现页面为目的,代码没怎么要求了。
那么接下来就说,怎么实现最简单的ul列表
a,首先要考虑布局,比如一整个页面,你打算用什么标签,去写哪个块
比如上面的页面,我就把头像那块和下面的导航用两个div分开,然后上面的div放图片、昵称、邮箱之类的,下面的就可以放一整个导航,因为导航是一整个整体
b,然后要先把ul的默认样式去除掉,也就是前面的小点点
ul li{
list-style:none;
}