溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何做html橫向?qū)Ш?/h1>
發(fā)布時間:2021-11-10 11:04:22 來源:億速云 閱讀:415 作者:iii 欄目:web開發(fā)

這篇文章主要講解了“如何做html橫向?qū)Ш健?,文中的講解內(nèi)容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“如何做html橫向?qū)Ш健卑桑?/p>

做html橫向?qū)Ш椒椒ǎ?、通過ul標簽里li標簽搭建導航菜單(豎向);2、給li標簽添加“l(fā)ist-style:none”樣式來去掉導航菜單前的小黑點;3、給li標簽添加“float: left;”樣式讓導航欄橫向排列即可。

如何做html橫向?qū)Ш?></p><p>本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。</p><p>思路:創(chuàng)建<ul>標簽,然后在<ul>標簽里面創(chuàng)建<li>標簽,最后設置<li>標簽為浮動。</p><p><strong>做html橫向?qū)Ш降姆椒ǎ?/strong></p><p>1、新建html頁面,打開html編輯軟件,新建一個html頁面。如圖:</p><p><img src=.nav li{   background-color: red;    padding: 8px 15px;      float: left;     list-style: none;     color:#fff;   }

如何做html橫向?qū)Ш?></p><p>6、引用樣式類。在<ul>標簽內(nèi)添加 class="nav",就可以讓nav下的<li>標簽引用到設置好的樣式類。如圖:</p><p><img src=<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>橫向?qū)Ш讲藛?lt;/title>  <style type="text/css">   .nav li{   background-color: red;    padding: 8px 15px;      float: left;     list-style: none;     color:#fff;   }  </style> </head> <body>  <ul class="nav">   <li>首頁</li>   <li>新聞</li>   <li>公司產(chǎn)品</li>   <li>關(guān)于我們</li>   <li>公司介紹</li>  </ul> </body> </html>

感謝各位的閱讀,以上就是“如何做html橫向?qū)Ш健钡膬?nèi)容了,經(jīng)過本文的學習后,相信大家對如何做html橫向?qū)Ш竭@一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!

向AI問一下細節(jié)
AI