中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

Dreamweaver網(wǎng)站制作(Dreamweaver網(wǎng)站制作)

2024-01-22    分類: 網(wǎng)站建設(shè)

【一、項(xiàng)目背景】

讓更多的人去學(xué)習(xí)html,以廣東科技學(xué)院的導(dǎo)航欄為例, 教大家怎么去做一個(gè)橫向的導(dǎo)航欄。

【二、項(xiàng)目準(zhǔn)備】

準(zhǔn)備一個(gè)編程的軟件Dreamweaver,打開軟件點(diǎn)擊文件新建一個(gè)叫導(dǎo)航欄的項(xiàng)目,如下圖所示。

點(diǎn)擊確定之后,會(huì)彈出下圖。

【三、項(xiàng)目實(shí)施】

1. 在<body>標(biāo)簽里面寫下一個(gè)框架:

注:<nav>標(biāo)簽定義導(dǎo)航鏈接的部分。<ul> 標(biāo)簽定義無(wú)序列表,<li>標(biāo)簽定義列表項(xiàng)目。

<li> 標(biāo)簽可用在有序列表 (<ol>) 和無(wú)序列表 (<ul>) 中。

2. 寫完運(yùn)行(運(yùn)行:右下角點(diǎn)擊f12運(yùn)行)看到效果,如下圖所示:

3. 加入css樣式表(這里采用內(nèi)部樣式表)。

3.1 CSS樣式表有兩種加入的方式 如圖:

3.2 去除li帶來(lái)的小黑點(diǎn):

li{ list-style: none; }

4. 基于上述步驟,運(yùn)行一下 如下圖所示:

5. 設(shè)置一下導(dǎo)航欄的樣式。

1) 設(shè)置一下列表ul 的寬度 ,高度,背景顏色,文字位置居中(margin:0 auto)。

Li 同樣的設(shè)置高度 。

2) 去掉小黑點(diǎn) ,再設(shè)置文字的顏色 ,高度 ,內(nèi)邊距 ,(個(gè)人喜好 看著舒服就行)

3) 設(shè)置文字的大小,去掉下劃線(text-decoration:none;)。

下面是詳細(xì)備注

ul li{float: left; # 把內(nèi)容左浮動(dòng),這樣可以橫向排列 width: 100px; # 設(shè)置每個(gè)li的寬 height: 30px; # 設(shè)置每個(gè)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è)置將鼠標(biāo)放到li時(shí)的背景顏色ul li:hover a{color: black;} # 設(shè)置將鼠標(biāo)放到li中的a標(biāo)簽的內(nèi)容時(shí)的文字顏色

6. 完整代碼,如下圖所示。

7. 運(yùn)行之后,效果圖如下圖所示。

【四、總結(jié)】

1. Html能做的效果非常多,希望你耐心的去學(xué)習(xí),同時(shí)希望碰到問(wèn)題主動(dòng)搜索,嘗試一下總會(huì)有解決方法。

2. 如果需要本文源碼,請(qǐng)?jiān)诠娞?hào)后臺(tái)回復(fù)“導(dǎo)航欄”三個(gè)字獲取。

看完本文有收獲?請(qǐng)轉(zhuǎn)發(fā)分享給更多的人

IT共享之家

想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識(shí),可前往專業(yè)網(wǎng)站:http://pdcfighting.com/

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章:"Dreamweaver網(wǎng)站制作(Dreamweaver網(wǎng)站制作)",僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供:網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù),歡迎聯(lián)系我們提供您的需求。

當(dāng)前題目:Dreamweaver網(wǎng)站制作(Dreamweaver網(wǎng)站制作)
網(wǎng)頁(yè)地址:http://m.rwnh.cn/news2/314902.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、小程序開發(fā)、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司
武冈市| 新津县| 乌兰察布市| 邵武市| 比如县| 丹棱县| 高平市| 贞丰县| 沂南县| 阿图什市| 外汇| 香格里拉县| 旬阳县| 遂平县| 鄂尔多斯市| 苏尼特左旗| 北安市| 秀山| 丰宁| 环江| 师宗县| 池州市| 甘泉县| 抚顺市| 林口县| 江山市| 弥渡县| 吴忠市| 佛坪县| 泗洪县| 资溪县| 石渠县| 二连浩特市| 永安市| 宿迁市| 彝良县| 宣武区| 长汀县| 天津市| 镇江市| 茶陵县|