サマリー：<!-- 1.詳解css中的定位(fixed/relative/absolute) 2.偽選擇器:hover 3.案例:優(yōu)酷頂部導(dǎo)航 --><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Pos
<!--
1.詳解css中的定位(fixed/relative/absolute)
2.偽選擇器:hover
3.案例:優(yōu)酷頂部導(dǎo)航
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position(定位)</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
/*CSS中的定位(Position)屬性允許你對(duì)元素進(jìn)行定位;(fixed/relative/absolute)*/
/* fixed:元素的位置相對(duì)于瀏覽器窗口是固定位置;*/
.fix{
width: 35px;
height: 500px;
background: red;
/*position: fixed;top:20px ;left:40px;*/
position: fixed;right: 0;bottom: 20px;
}
/*relative:相對(duì)定位元素的定位是相對(duì)其正常位置,相對(duì)定位元素經(jīng)常被用來作為絕對(duì)定位元素的容器塊;*/
.rel{
width: 200px;
height: 200px;
background: pink;
position: relative;/*top: 20px;left: 20px;*/
}
/* absolute:絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于出始包含塊*/
/* 特點(diǎn)：絕對(duì)定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間*/
.a{width: 1500px;
height: 50px;
background: blue;
position: absolute;left:30px;
z-index:-1;
}
/* z-index 屬性設(shè)置元素的堆疊順序 注意:Z-index 僅能在定位元素上奏效*/
/*子絕父相*/
/* 2.偽選擇器:hover*/
a{
color: #000;
text-decoration: none;
}
a:hover{
font-weight: bold;/*字體加粗*/
color: red;
text-decoration: underline; /*給元素加上下劃線*/
}
ul{margin-left: 30px;}
ul li{
position: relative;
list-style: none;/*清除列表項(xiàng)前面的點(diǎn)*/
float: left; /*左浮動(dòng)*/
width: 100px;
border: 1px solid #ccc;
line-height: 40px; /*行高*/
text-align: center; /*文本居中*/
}
ul li:hover{background: pink;color: blue;}
ul li ul{
width: 100px;
height: 100px;
position: absolute;left:-30px;
display: none; /*使當(dāng)前元素不顯示*/
}
ul li:hover .menu{
display: block;
}
</style>
</head>
<body>
<div class="fix">
</div>
<div style="height: 1200px;">
<div class="rel">
<div class="a"></div>
</div>
<a href="">php中文網(wǎng)!</a>
<ul>
<li>web
<ul class="menu">
<li>html</li>
<li>css</li>
<li>jquery</li>
</ul>
</li>
<li>sql</li>
<li>java</li>
</ul>
</div>
</body>
</html>