本篇內(nèi)容主要講解“DW怎么制作一個(gè)簡(jiǎn)單的垂直導(dǎo)航”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“DW怎么制作一個(gè)簡(jiǎn)單的垂直導(dǎo)航”吧!
創(chuàng)新互聯(lián)建站于2013年開始,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目做網(wǎng)站、成都做網(wǎng)站網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元龍勝做網(wǎng)站,已為上家服務(wù),為龍勝各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792步驟
1、打開Adobe Dreamweaver CC 2015。
2、執(zhí)行菜單欄中的"文件>新建"命令或按住Ctrl+N鍵打開"新建文檔"對(duì)話框,選擇其文檔類型為HTML,單擊"創(chuàng)建"按鈕,即創(chuàng)建一個(gè)網(wǎng)頁(yè)文檔。
3、<body>和</body>之間添加"<div id="menu"></div>",如下圖所示。
【解釋】DIV元素是用來(lái)為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的,其中所包含元素的特性由DIV標(biāo)簽的屬性來(lái)控制,或者是通過使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。DIV標(biāo)簽稱為區(qū)隔標(biāo)記。作用:設(shè)定字、畫、表格等的擺放位置。
id屬性:規(guī)定元素的 id,通過 CSS 為帶有指定 id 的元素改變或添加樣式。
【基本語(yǔ)法】<div 屬性="屬性值">標(biāo)簽內(nèi)容</div>
【功能說(shuō)明】div元素為包含型的DIV塊元素,可以設(shè)定放置在其"標(biāo)簽內(nèi)容"中的元素(例如對(duì)齊方式),若是加上id、class等屬性,則可設(shè)定任意范圍的樣式。
在HTML、XHTML文件中開始標(biāo)簽與結(jié)束標(biāo)簽都不可省略。
4、<div id="menu">和</div>之間添加"<h4>全部商品分類</h4>",如下圖所示。
【基本語(yǔ)法】<h#>標(biāo)題文字</h#>
【語(yǔ)法說(shuō)明】
1.標(biāo)題標(biāo)記本身具有換行的作用,標(biāo)題總是從新的一行開始;
2.#用來(lái)指定標(biāo)題文字的大小,#取1~6的整數(shù)值,取1時(shí)文字較大;取6時(shí)文字最小。
5、<body>和</body>之間添加"<ul></ul>",如下圖所示。
【基本語(yǔ)法】
<ul> ....</ul>
【語(yǔ)法說(shuō)明】
在HTML文件中,可以利用成對(duì)的<ul></ul>標(biāo)記插入無(wú)序列表。其里面有列表項(xiàng)標(biāo)記<li></li>。
6、<ul>和</ul>之間添加"<li>圖書音像</li> <li>手機(jī)數(shù)碼</li> <li>>電腦辦公</li> <li>>家用電器</li>",如下圖所示。
基本語(yǔ)法】
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
.....
</ul>
【語(yǔ)法說(shuō)明】
列表項(xiàng)標(biāo)記<li></li>用來(lái)定義列表項(xiàng)序列。
7、<head>和</head>之間添加"<style type="text/css"></style>",如下圖所示。
【基本語(yǔ)法】
<style type="text/css">
選擇符1{樣式屬性:屬性值;樣式屬性:屬性值;...}
選擇符2{樣式屬性:屬性值;樣式屬性:屬性值;...}
....
選擇符n{樣式屬性:屬性值;樣式屬性:屬性值;...}
</style>
【語(yǔ)法說(shuō)明】
<style>標(biāo)記是用來(lái)說(shuō)明所要定義的樣式,type屬性是指style元素以CSS的語(yǔ)法定義。
【選擇符1..選擇符n】:選擇符可以使用HTML標(biāo)記的名稱,所有的HTML標(biāo)記都可以作為選擇符。
【樣式屬性】:主要指關(guān)于對(duì)選擇符格式化顯示風(fēng)格的樣式屬性名稱。
【屬性值】:設(shè)置對(duì)應(yīng)樣式屬性的值。
8、<style type="text/css">和</style>之間添加"body{font-family:Verdana; font-size:12px; line-height:1.5;} a{color:#000; text-decoration:none;} a:hover{color:#F00;} #menu{width:100px; border:1px solid #ccc;} #menu ul{list-style:none; margin:0px; padding:0px;} #menu ul li{background:#eee; padding:0px 8px; height:26px; line-height:26px; border-bottom:1px solid #ccc;}
",如下圖所示。
font-family屬性:指定字體系列。
font-size屬性:設(shè)置字體大小。
line-height屬性:設(shè)置行間的距離(行高)。
border屬性:規(guī)定圖像周圍的邊框的寬度,就是說(shuō)可以增加或去掉圖像的邊框。
height屬性:設(shè)置高度。
background屬性:設(shè)置背景色。
list-style屬性:設(shè)置列表樣式。
margin屬性:設(shè)置邊框外的距離。
float屬性:定義元素在哪個(gè)方向浮動(dòng)。
padding屬性:設(shè)置邊框內(nèi)的距離。
#menu:對(duì)應(yīng)于頁(yè)面中id為menu的元素
#menu ul:對(duì)應(yīng)于頁(yè)面中id為menu的元素里的<ul>無(wú)序列表。
#menu ul li:對(duì)應(yīng)于頁(yè)面中id為menu的元素里<ul>無(wú)序列表里面的<li>列表項(xiàng)目。
【重點(diǎn)】
a:link 未鏈接時(shí)的超鏈接文字的樣式。
a:visited 已鏈接過的超鏈接文字的樣式。
a:active 當(dāng)鼠標(biāo)單擊超鏈接后,超鏈接文字所顯示的樣式。
a:hover 當(dāng)鼠標(biāo)移動(dòng)超鏈接文字上方時(shí),超鏈接文字所顯示的樣式。
a 在此屬性內(nèi)設(shè)置樣式時(shí),則上述4種屬性將同時(shí)引用此值。
【基本語(yǔ)法】border-bottom:下邊框?qū)挾葇下邊框樣式|下邊框顏色
【功能說(shuō)明】設(shè)置下邊框的樣式、寬度和顏色。
9、保存網(wǎng)頁(yè)文件,按住F12鍵可以在瀏覽器中預(yù)覽效果,如下圖所示。
到此,相信大家對(duì)“DW怎么制作一個(gè)簡(jiǎn)單的垂直導(dǎo)航”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)建站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
名稱欄目:DW怎么制作一個(gè)簡(jiǎn)單的垂直導(dǎo)航-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源:http://vcdvsql.cn/article2/hciic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷推廣、企業(yè)建站、營(yíng)銷型網(wǎng)站建設(shè)
聲明:本網(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)
猜你還喜歡下面的內(nèi)容