2024-01-22 分類: 網(wǎng)站建設(shè)
【一、項目背景】
讓更多的人去學習html,以廣東科技學院的導(dǎo)航欄為例, 教大家怎么去做一個橫向的導(dǎo)航欄。
【二、項目準備】
準備一個編程的軟件Dreamweaver,打開軟件點擊文件新建一個叫導(dǎo)航欄的項目,如下圖所示。
點擊確定之后,會彈出下圖。
【三、項目實施】
1. 在<body>標簽里面寫下一個框架:
注:<nav>標簽定義導(dǎo)航鏈接的部分。<ul> 標簽定義無序列表,<li>標簽定義列表項目。
<li> 標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。
2. 寫完運行(運行:右下角點擊f12運行)看到效果,如下圖所示:
3. 加入css樣式表(這里采用內(nèi)部樣式表)。
3.1 CSS樣式表有兩種加入的方式 如圖:
3.2 去除li帶來的小黑點:
li{ list-style: none; }4. 基于上述步驟,運行一下 如下圖所示:
5. 設(shè)置一下導(dǎo)航欄的樣式。
1) 設(shè)置一下列表ul 的寬度 ,高度,背景顏色,文字位置居中(margin:0 auto)。
Li 同樣的設(shè)置高度 。
2) 去掉小黑點 ,再設(shè)置文字的顏色 ,高度 ,內(nèi)邊距 ,(個人喜好 看著舒服就行)
3) 設(shè)置文字的大小,去掉下劃線(text-decoration:none;)。
下面是詳細備注
ul li{float: left; # 把內(nèi)容左浮動,這樣可以橫向排列 width: 100px; # 設(shè)置每個li的寬 height: 30px; # 設(shè)置每個li的高 background-color:pink # 設(shè)置li的背景顏色為粉色 border: 1px solid 6495ED; # 設(shè)置li的邊框顏色以及邊框大小 text-align: center; # 設(shè)置li中的文字樣式為居中 line-height: 30px; # 設(shè)置li中文字舉例上邊框的高度 }ulli:hover{background-color: aqua;} # 設(shè)置將鼠標放到li時的背景顏色ul li:hover a{color: black;} # 設(shè)置將鼠標放到li中的a標簽的內(nèi)容時的文字顏色6. 完整代碼,如下圖所示。
7. 運行之后,效果圖如下圖所示。
【四、總結(jié)】
1. Html能做的效果非常多,希望你耐心的去學習,同時希望碰到問題主動搜索,嘗試一下總會有解決方法。
2. 如果需要本文源碼,請在公眾號后臺回復(fù)“導(dǎo)航欄”三個字獲取。
看完本文有收獲?請轉(zhuǎn)發(fā)分享給更多的人
IT共享之家
想學習更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識,可前往專業(yè)網(wǎng)站:http://pdcfighting.com/
非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章:"Dreamweaver網(wǎng)站制作(Dreamweaver網(wǎng)站制作)",僅為提供更多信息供用戶參考使用或為學習交流的方便。我們公司提供:網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù),歡迎聯(lián)系我們提供您的需求。
當前題目:Dreamweaver網(wǎng)站制作(Dreamweaver網(wǎng)站制作)
網(wǎng)頁地址:http://chinadenli.net/news2/314902.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、手機網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、小程序開發(fā)、網(wǎng)站策劃、網(wǎng)站設(shè)計
聲明:本網(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)
猜你還喜歡下面的內(nèi)容