工具/材料
專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)， 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開(kāi)發(fā)公司不同，創(chuàng)新互聯(lián)公司的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷(xiāo)的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。
notepad++
瀏覽器
打開(kāi)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ù)你的需求來(lái)自己定義。
--
/style
添加一個(gè)DIV標(biāo)簽，在頁(yè)面中劃分出一個(gè)塊來(lái)，用來(lái)顯示。
div中所用的樣式為剛才咱們聲明的樣式“jiao”這個(gè)盒子來(lái)描述
然后使用無(wú)序標(biāo)簽ul+樣式li 來(lái)實(shí)現(xiàn)模塊。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問(wèn)問(wèn)/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/div
放上全部的代碼吧，可以參考一下啊，
!DOCTYPE html
html xmlns=""http://允許你通過(guò)一個(gè)網(wǎng)址來(lái)識(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ù)你的需求來(lái)自己定義。
--
/style
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問(wèn)問(wèn)/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
如果要添加更多的菜單，只需要后邊繼續(xù)添加ul/li即可
特別提示
寫(xiě)代碼過(guò)程中一定要記得換行，開(kāi)頭留空，否則過(guò)后找東西，連你自己都不知道寫(xiě)的是什么。何談從哪里找起？
使用css的margin屬性設(shè)置。
1、首先打開(kāi)hbuilder軟件，新建一個(gè)html文件，在html里面寫(xiě)入html結(jié)構(gòu)，在給每個(gè)子div設(shè)置一個(gè)class屬性。2、接著在上方的style標(biāo)簽中設(shè)置這個(gè)名叫div的class的css樣式，這里把文字字號(hào)放大并加入了邊框，然后就可以使用margin屬性設(shè)置子容器之間的間距了，margin中前面的是設(shè)置上下間距，后面的則是左右間距，最后根據(jù)自己的需要設(shè)置即可。3、來(lái)到瀏覽器即可看到效果，三個(gè)div的間距都是20px。以上就是cs設(shè)置div子容器之間的間距的方法。
可以使用彈性布局，display: flex 就可以讓div橫排，默認(rèn)布局軸方向就是橫向，justify-content: space-between可以是div平均分布在水平軸上。
重慶分公司
重慶分公司
