1、利用Dreamweaver新建一個html頁面。
10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你,你也不認識我。但先做網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有和田免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
2、在body里面輸入代碼
ul
li你好/li
li小魚/li
li小小/li
/ul。
3、默認的樣式是這樣的。
4、編輯li標簽的css樣式。
5、float:left代表的是元素左對齊。這樣li標簽就可以橫排顯示了,list-style:none用來去除li標簽前面的小圓點。
HTML部分:
div id="nav"
ul
liAAAA/li
liBBBB/li
liCCCC/li
liDDDD/li
liEEEE/li
liFFFF/li
/ul
/div
css部分:
#nav{
margin: 0 auto;
border: 2px solid #00CED1;
}
ul,li {
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
li{
border: 1px solid;
width: 100px; /*每個元素的初始化寬度*/
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
flex:auto;? /*這是關(guān)鍵*/? ? ? ? ?
}
擴展資料:
Flex是Flexible Box的縮寫,用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。
采用Flex布局的元素,被稱為Flex容器(flex container),簡稱“容器”。其所有子元素自動成為容器成員,成為Flex項目(Flex item),簡稱“項目”。
容器默認存在兩根主軸:水平方向主軸(main axis)和垂直方向交叉軸(cross axis),默認項目按主軸排列。
main start/main end:主軸開始位置/結(jié)束位置;
cross start/cross end:交叉軸開始位置/結(jié)束位置;
main size/cross size:單個項目占據(jù)主軸/交叉軸的空間;
設(shè)置在容器上的屬性有6種。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
li標簽的css樣式名稱是current
其中要說明的就是樓上說的有點小問題,li是dw的默認標簽所以不需要調(diào)用class,直接設(shè)置完css之后li即可生效。不過它控制的是所有的li.如果要控制單個要分開定義css樣式,然后再用class或id調(diào)用.
當前題目:cssli樣式模板,css樣式模板網(wǎng)站
鏈接分享:http://m.rwnh.cn/article4/dsdhiie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計公司、網(wǎng)站策劃、電子商務(wù)、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、微信公眾號
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)