查看店鋪,右擊,查看源代碼,在里面找到你要改字體的標(biāo)簽,可以使用ctrl+f,找到后,根據(jù)class名,更改樣式即可,font-family:‘宋體’。
成都創(chuàng)新互聯(lián)是一家專業(yè)提供延長(zhǎng)企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為延長(zhǎng)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
font-family、微軟雅黑,宋體,seri、解釋下:這個(gè)設(shè)置的意思是,優(yōu)先微軟雅黑,如果沒有微軟雅黑就用宋體,兩個(gè)都沒有就用serif類字體。
導(dǎo)航欄CSS樣式制作流程:
1、導(dǎo)航欄CSS樣式設(shè)置,預(yù)覽:導(dǎo)航樣式是選擇設(shè)置后,預(yù)覽區(qū)會(huì)自動(dòng)發(fā)生變化,涉及到“經(jīng)過"的效果,是指鼠標(biāo)放到該元素上產(chǎn)生的效果,需要把鼠標(biāo)放設(shè)置的元素上查看設(shè)置效果。
2、顏色、點(diǎn)擊顏色選擇器,在顏色選擇界面,選擇你喜歡的顏色,或者設(shè)置指定的顏色(在#位置,填寫顏色編號(hào),可以指定需要的顏色。
這個(gè)需要自己提前使用PS或者其他取色軟件獲得需要的顏色編號(hào))。選擇了馬賽克,意思是不設(shè)置,沒有任何顏色。
3、圖片、部分設(shè)置框里,是設(shè)置圖片。首先,進(jìn)入淘寶店鋪圖片空間,上傳準(zhǔn)備好的背景素材圖片,上傳完成后,復(fù)制圖片地址,在圖片設(shè)置框里粘貼(一定是淘寶圖片空間的圖片,否則不能在淘寶店鋪安裝導(dǎo)航CSS代碼)。
注意,部分樣式設(shè)置里,一個(gè)位置有顏色設(shè)置,同樣有圖片設(shè)置,任取一種必須設(shè)置一種。
4、字體、字體大小、字體名稱、字體樣式,根據(jù)提供的選項(xiàng)進(jìn)行選擇即可。
可以鼠標(biāo)右擊"審查元素"來打開css的樣式面板,還可以通過配置workspace來修改css后,直接映射到文件中,對(duì)于開發(fā)都而言,是能提高開發(fā)效率的一種方式。chrome還有一個(gè)插件名字叫作liveStyle,也可以做到這個(gè)效果,插件可以直接在chrome的應(yīng)用商店進(jìn)行下載。
工具/材料
notepad++
瀏覽器
打開Notepad++,先輸入個(gè)頁(yè)面框架
!DOCTYPE html
html xmlns=""
hade
/hade
body
/body
框架好了,那么就該定義頁(yè)面的title,關(guān)鍵詞keyword,和描述description
meta charset="UTF-8" content="text/html" http-equiv="content-type"
title純css二級(jí)導(dǎo)航下拉菜單/title
meta name="keyword" content="搜狗略懂"
meta name="description" content="描述"
這些內(nèi)容只能在head/head中完成。
定義頁(yè)面使用的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下一級(jí)里面的ul元素
nav ul選擇nav內(nèi)所包含的所有ul元素
navul比nav ul限定更嚴(yán)格,必須后面的元素只比前面的低一個(gè)級(jí)別。
這里根據(jù)你的需求來自己定義。
--
/style
添加一個(gè)DIV標(biāo)簽,在頁(yè)面中劃分出一個(gè)塊來,用來顯示。
div中所用的樣式為剛才咱們聲明的樣式“jiao”這個(gè)盒子來描述
然后使用無序標(biāo)簽ul+樣式li 來實(shí)現(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://允許你通過一個(gè)網(wǎng)址來識(shí)別你的標(biāo)記
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="keyword" content="利用css實(shí)現(xiàn)下拉菜單"
meta name="description" content="搜狗略懂、css分享"
titlecss實(shí)現(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下一級(jí)里面的ul元素
nav ul選擇nav內(nèi)所包含的所有ul元素
navul比nav ul限定更嚴(yán)格,必須后面的元素只比前面的低一個(gè)級(jí)別。
這里根據(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即可
特別提示
寫代碼過程中一定要記得換行,開頭留空,否則過后找東西,連你自己都不知道寫的是什么。何談從哪里找起?