文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-544234.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
body {
background: #23232f;
padding: 50px;
}
/*元素寬度由內(nèi)容撐開(kāi)
display:inline ——內(nèi)嵌 不支持寬度
display:inline-block ——不支持塊標(biāo)簽
float ——浮動(dòng)
position:absolute ——需要給每個(gè)元素設(shè)置坐標(biāo)
position:fixed ——存在不兼容問(wèn)題
*/
/* 寬度跟著父級(jí) 高度由子級(jí)決定 */
.nav {
background: #0f0f14 url(img/navL.png) no-repeat;
float: left;
}
.navR{background: url(img/navR.png) no-repeat right 0;float: left;padding: 4px 4px 0 3px;}
.navR li{float: left;padding-left: 1px;}
.nav a{float: left;background: url(img/btn2.png) no-repeat;}
.nav span{float: left;background: url(img/btnR.png) no-repeat right 0; height: 31px;font-size: 14px;line-height: 30px;color: #fff;padding: 0 18px;}
.nav a:hover { background-image: url(img/hoverA.png);}
.nav a:hover span {background-image: url(img/hoverR.png);}
</style>
</head>
<body>
<div class="nav">
<ul class="navR">
<li>
<a href="#" >
<span>心理</span>
</a>
</li>
<li>
<a href="#">
<span>科技</span>
</a>
</li>
<li>
<a href="#">
<span>歷史</span>
</a>
</li>
<li>
<a href="#" class="active">
<span>數(shù)理</span>
</a>
</li>
<li>
<a href="#">
<span>文史</span>
</a>
</li>
</ul>
</div>
</body>
</html>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-544234.html
到了這里，關(guān)于前端基礎(chǔ)知識(shí)學(xué)習(xí)——滑動(dòng)門(mén)（導(dǎo)航欄應(yīng)用）十三的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
