<!DOCTYPE?html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
<title>Nav-bar</title>
<style>
*{
padding:?0;
margin:?0;
}
.page{
width:?100%;
height:?3000px;
background:?url("mooc.png")?center?top?no-repeat;
}
.nav{
width:160;
height:auto;
position:?fixed;
left:0;
top:?50%;
margin-top:-103px;
font-family:?'Miscrosoft?YaHei'
}
.nav-li{
width:?160px;
height:?40px;
border-bottom:?1px?solid?#fff;
background:?#333;
text-align:?center;
line-height:?40px;
color:?#fff;
font-size:?16px;
}
.tit{
width:?160px;
height:?40px;
}
.nav-li?ul{
width:?160px;
height:?auto;
background:?#fff;
}
.nav-li?ul?li{
width:?160px;
height:?40px;
border-bottom:?1px?dashed?#666;
color:?#333;
text-align:?center;
line-height:?40px;
}
</style>
</head>
<body>
<div?class="page">
<div?class="nav">
<div?class="nav-li">
<div?class="tit">網(wǎng)站導(dǎo)航</div>
<ul>
<li>
二級(jí)導(dǎo)航
</li>
</ul>
</div>
<div?class="nav-li">網(wǎng)站導(dǎo)航</div>
<div?class="nav-li">網(wǎng)站導(dǎo)航</div>
<div?class="nav-li">網(wǎng)站導(dǎo)航</div>
<div?class="nav-li">網(wǎng)站導(dǎo)航</div>
</div>
</div>
</body>
</html>
2018-02-17
.nav-li{
height:auto;
}
這里要改為auto長(zhǎng)度才能顯示。
2018-02-06
Css最后一行少一個(gè)position呀
2018-02-04
display:none? ? 1)先設(shè)置隱藏
*****:hover?ul{?display:block;}? ? 2)在設(shè)置鼠標(biāo)時(shí)顯示
3)看視頻別快進(jìn)