欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DW如何制作一個簡單的垂直導(dǎo)航?

  發(fā)布時間：2016-07-28 16:49:27   作者：691021805   我要評論
怎么用dreamweaver軟件做一個簡單的垂直導(dǎo)航呢,其實(shí)我們要學(xué)會一些簡單的代碼,慢慢的去練習(xí),孰能生巧，下面小編就為大家詳細(xì)介紹一下，不會的朋友可以參考本文，來看看吧

CSS縱向?qū)Ш讲藛瓮ǔＪ侵阜胖迷诰W(wǎng)頁左側(cè)或右側(cè)的從上至下排列的一種導(dǎo)航形式。縱向?qū)Ш讲藛蔚氖褂靡草^為常見，如淘寶網(wǎng)的淘寶服務(wù)。我現(xiàn)在詳細(xì)教你如何制作垂直導(dǎo)航，一起來看看吧。

步驟

1、打開Adobe Dreamweaver CC 2015。

【DW教程】如何制作垂直導(dǎo)航

2、執(zhí)行菜單欄中的"文件>新建"命令或按住Ctrl+N鍵打開"新建文檔"對話框，選擇其文檔類型為HTML，單擊"創(chuàng)建"按鈕，即創(chuàng)建一個網(wǎng)頁文檔。

【DW教程】如何制作垂直導(dǎo)航

【DW教程】如何制作垂直導(dǎo)航

3、<body>和</body>之間添加"<div id="menu"></div>"，如下圖所示。

【解釋】DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進(jìn)行控制。DIV標(biāo)簽稱為區(qū)隔標(biāo)記。作用：設(shè)定字、畫、表格等的擺放位置。

id屬性：規(guī)定元素的唯一 id，通過 CSS 為帶有指定 id 的元素改變或添加樣式。

【基本語法】<div 屬性="屬性值">標(biāo)簽內(nèi)容</div>

【功能說明】div元素為包含型的DIV塊元素，可以設(shè)定放置在其"標(biāo)簽內(nèi)容"中的元素（例如對齊方式），若是加上id、class等屬性，則可設(shè)定任意范圍的樣式。

在HTML、XHTML文件中開始標(biāo)簽與結(jié)束標(biāo)簽都不可省略。

【DW教程】如何制作垂直導(dǎo)航

4、<div id="menu">和</div>之間添加"<h3>全部商品分類</h3>"，如下圖所示。

【基本語法】<h#>標(biāo)題文字</h#>

【語法說明】

1.標(biāo)題標(biāo)記本身具有換行的作用，標(biāo)題總是從新的一行開始；

2.#用來指定標(biāo)題文字的大小，#取1~6的整數(shù)值，取1時文字最大；取6時文字最小。

【DW教程】如何制作垂直導(dǎo)航

【DW教程】如何制作垂直導(dǎo)航

5、<body>和</body>之間添加"<ul></ul>"，如下圖所示。

【基本語法】

<ul> ....</ul>

【語法說明】

在HTML文件中，可以利用成對的<ul></ul>標(biāo)記插入無序列表。其里面有列表項(xiàng)標(biāo)記<li></li>。

【DW教程】如何制作垂直導(dǎo)航

6、<ul>和</ul>之間添加"<li>圖書音像</li> <li>手機(jī)數(shù)碼</li> <li>>電腦辦公</li> <li>>家用電器</li>"，如下圖所示。

基本語法】

<ul>

<li>....</li>

<li>....</li>

<li>....</li>

<li>....</li>

.....

</ul>

【語法說明】

列表項(xiàng)標(biāo)記<li></li>用來定義列表項(xiàng)序列。

【DW教程】如何制作垂直導(dǎo)航

【DW教程】如何制作垂直導(dǎo)航

7、<head>和</head>之間添加"<style type="text/css"></style>"，如下圖所示。

【基本語法】

<style type="text/css">

選擇符1{樣式屬性：屬性值；樣式屬性：屬性值；...}

選擇符2{樣式屬性：屬性值；樣式屬性：屬性值；...}

....

選擇符n{樣式屬性：屬性值；樣式屬性：屬性值；...}

</style>

【語法說明】

<style>標(biāo)記是用來說明所要定義的樣式，type屬性是指style元素以CSS的語法定義。

【選擇符1..選擇符n】：選擇符可以使用HTML標(biāo)記的名稱，所有的HTML標(biāo)記都可以作為選擇符。

【樣式屬性】：主要指關(guān)于對選擇符格式化顯示風(fēng)格的樣式屬性名稱。

【屬性值】：設(shè)置對應(yīng)樣式屬性的值。

【DW教程】如何制作垂直導(dǎo)航

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ī)定圖像周圍的邊框的寬度，就是說可以增加或去掉圖像的邊框。

height屬性：設(shè)置高度。

 background屬性：設(shè)置背景色。

list-style屬性：設(shè)置列表樣式。

 margin屬性：設(shè)置邊框外的距離。

float屬性：定義元素在哪個方向浮動。

padding屬性：設(shè)置邊框內(nèi)的距離。

#menu：對應(yīng)于頁面中id為menu的元素

#menu ul：對應(yīng)于頁面中id為menu的元素里的<ul>無序列表。

#menu ul li：對應(yīng)于頁面中id為menu的元素里<ul>無序列表里面的<li>列表項(xiàng)目。

【重點(diǎn)】

a:link   未鏈接時的超鏈接文字的樣式。

a:visited 已鏈接過的超鏈接文字的樣式。

a:active  當(dāng)鼠標(biāo)單擊超鏈接后，超鏈接文字所顯示的樣式。

a:hover  當(dāng)鼠標(biāo)移動超鏈接文字上方時，超鏈接文字所顯示的樣式。

a     在此屬性內(nèi)設(shè)置樣式時，則上述4種屬性將同時引用此值。

【基本語法】border-bottom：下邊框?qū)挾葇下邊框樣式|下邊框顏色

【功能說明】設(shè)置下邊框的樣式、寬度和顏色。

【DW教程】如何制作垂直導(dǎo)航

【DW教程】如何制作垂直導(dǎo)航

9、保存網(wǎng)頁文件，按住F12鍵可以在瀏覽器中預(yù)覽效果，如下圖所示。

【DW教程】如何制作垂直導(dǎo)航

以上就是DW如何制作一個簡單的垂直導(dǎo)航方法介紹，操作很簡單的，大家學(xué)會了嗎？希望這篇文章能對大家有所幫助！

相關(guān)文章

最新評論