abstrait：<!-- 1.詳解css中的定位(fixed/relative/absolute) 2.偽選擇器:hover 3.案例:優(yōu)酷頂部導航 --><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Pos
<!--
1.詳解css中的定位(fixed/relative/absolute)
2.偽選擇器:hover
3.案例:優(yōu)酷頂部導航
-->
<!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)屬性允許你對元素進行定位;(fixed/relative/absolute)*/
/* fixed:元素的位置相對于瀏覽器窗口是固定位置;*/
.fix{
width: 35px;
height: 500px;
background: red;
/*position: fixed;top:20px ;left:40px;*/
position: fixed;right: 0;bottom: 20px;
}
/*relative:相對定位元素的定位是相對其正常位置,相對定位元素經常被用來作為絕對定位元素的容器塊;*/
.rel{
width: 200px;
height: 200px;
background: pink;
position: relative;/*top: 20px;left: 20px;*/
}
/* absolute:絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于出始包含塊*/
/* 特點：絕對定位使元素的位置與文檔流無關，因此不占據空間*/
.a{width: 1500px;
height: 50px;
background: blue;
position: absolute;left:30px;
z-index:-1;
}
/* z-index 屬性設置元素的堆疊順序 注意: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;/*清除列表項前面的點*/
float: left; /*左浮動*/
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; /*使當前元素不顯示*/
}
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中文網!</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>