1、建立一個靜態(tài)頁命名為change.html ，標題為js導(dǎo)航點擊的怎么同時變圖片跟字體顏色。
創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、明山網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、商城建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為明山等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
2、設(shè)置一個簡易的導(dǎo)航欄。
3、加css 控制菜單的樣式，并加入背景圖片。
4、為li添加id，創(chuàng)建函數(shù)fun ，并傳遞傳遞參數(shù)。
5、為函數(shù)加入點擊導(dǎo)航改變背景圖片的代碼element.style.backgroundImage="url(images/bg2.png)";
6、加入改變文字大小的代碼
element.style.color="black";
//修改文字大小
element.style.fontSize="18px";
7、然后就完成了。
CSS（層疊樣式表）級聯(lián)樣式表是一種用來表現(xiàn)HTML（標準通用標記語言的一個應(yīng)用）或XML
（標準通用標記語言的一個子集）等文件樣式的計算機語言。
有三種方法可以在站點網(wǎng)頁上使用樣式表：
外聯(lián)式Linking（也叫外部樣式）：將網(wǎng)頁鏈接到外部樣式表。
嵌入式Embedding（也叫內(nèi)頁樣式）：在網(wǎng)頁上創(chuàng)建嵌入的樣式表。
內(nèi)聯(lián)式Inline（也叫行內(nèi)樣式）：應(yīng)用內(nèi)嵌樣式到各個網(wǎng)頁元素。
在Dreamweaver 8中，可以在開始彈出框中點擊新建CSS文件。也可以在最上面的菜單欄里占擊
文件，新建。在彈出框中選擇CSS文件就可以了。
可以鼠標右擊"審查元素"來打開css的樣式面板，還可以通過配置workspace來修改css后，直接映射到文件中，對于開發(fā)都而言，是能提高開發(fā)效率的一種方式。chrome還有一個插件名字叫作liveStyle，也可以做到這個效果，插件可以直接在chrome的應(yīng)用商店進行下載。
工具/材料
notepad++
瀏覽器
打開Notepad++，先輸入個頁面框架
！DOCTYPE html
html xmlns=""
hade
/hade
body
/body
框架好了，那么就該定義頁面的title，關(guān)鍵詞keyword，和描述description
meta charset="UTF-8" content="text/html" http-equiv="content-type"
title純css二級導(dǎo)航下拉菜單/title
meta name="keyword" content="搜狗略懂"
meta name="description" content="描述"
這些內(nèi)容只能在head/head中完成。
定義頁面使用的css樣式，也是需要在head里定義的。
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只選擇nav下一級里面的ul元素
nav ul選擇nav內(nèi)所包含的所有ul元素
navul比nav ul限定更嚴格，必須后面的元素只比前面的低一個級別。
這里根據(jù)你的需求來自己定義。
--
/style
添加一個DIV標簽，在頁面中劃分出一個塊來，用來顯示。
div中所用的樣式為剛才咱們聲明的樣式“jiao”這個盒子來描述
然后使用無序標簽ul+樣式li 來實現(xiàn)模塊。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問問/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/div
放上全部的代碼吧，可以參考一下啊，
!DOCTYPE html
html xmlns=""http://允許你通過一個網(wǎng)址來識別你的標記
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="keyword" content="利用css實現(xiàn)下拉菜單"
meta name="description" content="搜狗略懂、css分享"
titlecss實現(xiàn)下拉導(dǎo)航欄菜單/title
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只選擇nav下一級里面的ul元素
nav ul選擇nav內(nèi)所包含的所有ul元素
navul比nav ul限定更嚴格，必須后面的元素只比前面的低一個級別。
這里根據(jù)你的需求來自己定義。
--
/style
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問問/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
如果要添加更多的菜單，只需要后邊繼續(xù)添加ul/li即可
特別提示
寫代碼過程中一定要記得換行，開頭留空，否則過后找東西，連你自己都不知道寫的是什么。何談從哪里找起？
css定義一條導(dǎo)航欄
首先建立一個DIV，為其命名為“nav”，在DIV中建立一個ul無序列表，導(dǎo)航共有幾個欄目，就為列表添加幾個li的列表項，為每個列表項中的內(nèi)容加上超鏈接，鏈接到所需的項目頁面。
然后設(shè)置CSS樣式，為列表規(guī)定寬度和高度，去掉列表前面的符號，代碼為：
ul {width:寬度值；height：高度值； list-style:none；}
如果是橫向?qū)Ш?，還需為里面的列表項li標簽設(shè)置左浮動的樣式，代碼為：li {float:left;}
每個欄目之間分隔的距離可通過margin（外邊距）屬性來設(shè)置。
導(dǎo)航條的更多樣式及詳細步驟可去這里參考
查看店鋪，右擊，查看源代碼，在里面找到你要改字體的標簽，可以使用ctrl+f，找到后，根據(jù)class名，更改樣式即可，font-family：‘宋體’。
font-family、微軟雅黑，宋體，seri、解釋下：這個設(shè)置的意思是，優(yōu)先微軟雅黑，如果沒有微軟雅黑就用宋體，兩個都沒有就用serif類字體。
導(dǎo)航欄CSS樣式制作流程：
1、導(dǎo)航欄CSS樣式設(shè)置，預(yù)覽:導(dǎo)航樣式是選擇設(shè)置后，預(yù)覽區(qū)會自動發(fā)生變化，涉及到“經(jīng)過"的效果，是指鼠標放到該元素上產(chǎn)生的效果，需要把鼠標放設(shè)置的元素上查看設(shè)置效果。
2、顏色、點擊顏色選擇器，在顏色選擇界面，選擇你喜歡的顏色，或者設(shè)置指定的顏色(在#位置，填寫顏色編號，可以指定需要的顏色。
這個需要自己提前使用PS或者其他取色軟件獲得需要的顏色編號)。選擇了馬賽克，意思是不設(shè)置，沒有任何顏色。
3、圖片、部分設(shè)置框里，是設(shè)置圖片。首先，進入淘寶店鋪圖片空間，上傳準備好的背景素材圖片，上傳完成后，復(fù)制圖片地址，在圖片設(shè)置框里粘貼(一定是淘寶圖片空間的圖片，否則不能在淘寶店鋪安裝導(dǎo)航CSS代碼)。
注意，部分樣式設(shè)置里，一個位置有顏色設(shè)置，同樣有圖片設(shè)置，任取一種必須設(shè)置一種。
4、字體、字體大小、字體名稱、字體樣式，根據(jù)提供的選項進行選擇即可。
重慶分公司
重慶分公司
