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;
}