收藏
批改状态：未批改
老师批语：
实例一为CSS定位及伪选择器的使用
实例二为优酷头部布局案例
一、CSS中的定位Position
CSS中的定位（Position）属性允许你对元素定性定位。
（1）fixed:元素的位置相对于浏览器窗口是固定的位置。
（2）relative:相对定位，元素的定位是相对其正常位置，相对定位元素经常被用来作为绝对定位元素的容器块。
（3）absolute:绝对定位的元素位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于初始包含块（即body），特点：绝对定位使元素的位置与文档流无关，因此不占据空间。
其他：
z-index属性设置元素的堆叠顺序，仅能在定位元素上奏效。
子绝父相，相对定位通常不会单独使用，与绝对定位配合使用。
二、伪选择器hover
鼠标移动到元素上的效果。
例如：
a:hover{
font-weight: bold;/*字体加粗*/
color: red;
text-decoration: underline;/*给元素加上下划线*/
}
ul li:hover{
background: pink;
color: blue;
}
ul li:hover .menu{
display: block;
}
三、优酷轮播图，头部导航案例
<!--
1.详解CSS中的定位（fixed/relative/absolute）
2.伪选择器：hover
3.案例：优酷顶部导航
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position(定位)</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
/*CSS中的定位（Position）属性允许你对元素定性定位*/
/*fixed:元素的位置相对于浏览器窗口是固定的位置*/
.fix{
width: 35px;
height: 400px;
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:绝对定位的元素位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于初始包含块（即body），特点：绝对定位使元素的位置与文档流无关，因此不占据空间*/
.a{
width: 1500px;
height: 50px;
background: blue;
position: absolute;left: 30px;
/*z-index: -1;*/
}
/*z-index属性设置元素的堆叠顺序，仅能在定位元素上奏效*/
/*子绝父相，相对定位通常不会单独使用，与绝对定位配合使用*/
/*伪选择器：hover*/
a{
color: #000;
text-decoration: none;
}
a:hover{
font-weight: bold;/*字体加粗*/
color: red;
text-decoration: underline;/*给元素加上下划线*/
}
ul{
/*margin-left: 30px;*/
}
ul li{
list-style: none;
float: left;
width: 100px;
border: 1px solid #ccc;
line-height: 40px;
text-align: center;
position: relative;
}
ul li:hover{
background: pink;
color: blue;
}
ul li ul{
width: 100px;
height: 100px;
position: absolute;left: 0;/*top: 200px;*/
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>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优酷-这世界很酷</title>
<link rel="icon" type="image/x-icon" href="static/images/1.ico">
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{margin: 0;padding: 0;}
.clear{clear: both;}
a{
text-decoration: none;
color: #000;
}
li{
list-style: none;
float: left;
}
.mr{
margin-right: 10px;
}
.mt{
margin-top:20px;
}
.l{
float: left;
}
.r{
float: right;
margin-right: 90px;
}
.contents{
width: 1750px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 20px;
}
.contentUL{
line-height: 60px;
}
.hot_tv img{
width: 240px;
height: 360px;
}
.tab li{
margin-left: 20px;
}
.tv_show img{
height: 318px;
}
.tv_tab img{
width: 240px;
height: 135px;
}
.header{
width: 100%;
height: 520px;
background: #e8e8e8;
}
.pic_show{
margin: 0 auto;
width: 1664px;
height: 520px;
background: url(static/images/bg.jpg) no-repeat;
position: relative;
}
.bg{
background: rgba(0,0,0,0.3);
width: 100%;
height: 100%;
position: absolute;top: 0;left: 0;z-index: 99;
}
.header_ul{
position: fixed;top: 0px;left: 180px;z-index: 100;
}
form{
width: 500px;
height: 40px;
position: relative;margin-left: 500px;
display: inline-block;
}
input{
width: 480px;height: 40px;
border-radius: 30px;border: none;
background: rgba(234,234,234,0.5);
outline: none;/*去掉表单元素自动获取焦点效果*/
padding-left: 20px;
color: #fff;
}
button{
width: 90px;height: 40px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #b30702;
border: none;
color: #fff;
position: absolute;right: 0;top: 0;
}
.menu_li a,i{
color: rgba(234,234,234,0.5);
}
.menu_li li{
padding: 0 10px;
text-align: center;
font-size: 12px;
}
.menu_li i{
font-size: 18px;
}
</style>
</head>
<body>
<div class="header">
<!-- 轮播模块 -->
<div class="pic_show">
<div class="bg"></div>
<div class="contents header_r"></div>
</div>
<!-- 顶部搜索导航 -->
<div class="contents header_ul">
<div class="logo mt l">
<a href=""><img src="static/images/logo.png"></a>
<form>
<input type="text" name="">
<button>全网搜</button>
</form>
</div>
<!-- <div class="clear"></div> -->
<ul class="menu_li r mt">
<li><i class="fa fa-bank"></i><br><a href="">VIP</a></li>
<li><i class="fa fa-feed"></i><br><a href="">订阅</a></li>
<li><i class="fa fa-clock-o"></i><br><a href="">记录</a></li>
<li><i class="fa fa-arrow-up"></i><br><a href="">上传</a></li>
<li><i class="fa fa-television"></i><br><a href="">客户端</a></li>
</ul>
</div>
</div>
<div class="contents">
<div class="content">
<div class="contentUL"><h2>正在热播</h2></div>
<ul class="hot_tv">
<li class="mr">
<a href="">
<img src="static/images/a.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/b.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/c.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/d.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/e.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/f.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/g.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="content">
<div class="contentUL">
<h2 class="l mr">剧集 ></h2>
<ul class="tab">
<li>
<a href="">最新</a>
</li>
<li>
<a href="">大陆剧</a>
</li>
<li>
<a href="">日韩剧</a>
</li>
<li>
<a href="">港台剧</a>
</li>
<li>
<a href="">英美剧</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="tv_show l mr">
<a href="">
<img src="static/images/tv.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</div>
<ul class="tv_tab">
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv2.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv3.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv4.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<br>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv2.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv3.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv4.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv5.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
