Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css中的定位与伪选择器 -3.14
Blogger Information
Blog 18
fans 0
comment 0
visits 13500
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css中的定位与伪选择器 -3.14
太早的博客
Original
888 people have browsed it

总结

1.详解css中的定位(fixed/relative/absolute)

3.案例:优酷顶部导航

CSS中的定位(Position)属性允许你对元素进行定位;(fixed/relative/absolute)

fixed:元素的位置相对于浏览器窗口是固定位置

例：position: fixed;top:20px ;left:40px

relative:相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块

position: relative;top: 20px;left: 20px

absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于出始包含块

特点：绝对定位使元素的位置与文档流无关，因此不占据空间

例：position: absolute;left:30px;

z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效

子绝父相

例：z-index:-1;

 

2.伪选择器:hover

例：ul li:hover

font-weight: bold 字体加粗

text-decoration: underline 给元素加上下划线

display: none 使当前元素不显示

display: block 使当前元素显示




实例

<!DOCTYPE html>
<html>
<head>
	<title>优酷-这世界很酷</title>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="http://img.alicdn.com/tfs/TB1u5jLkMoQMeJjy0FpXXcTxpXa-200-200.jpg">
	<style type="text/css">
	*{margin: 0; padding: 0;}
	li{float: left; list-style: none;}
	a{color: black; text-decoration: none;}
	h2{font-family: 微软雅黑 Light;}
	span{
		font-size: 13px;
	}
	small{
		font-size: 10px;
		color: #999999;
	}
	.tv_show li{
		margin-bottom: 18px;
	}
	.clear{clear: both;}
	.mr{margin-right: 10px;}
	.l{float: left;}
	.contents{
		width: 1740px;
		margin: 0 auto;
	}
	.content{
		width: 100%;
		margin-top: 20px;
	}
	.contentUL{
		line-height: 70px;
	}
	.hot_tv img{
		width: 240px;
		height: 360px;
	}
	.tv_show ul img{
		width: 240px;
		height: 135px;
	}
	.tab li{
		margin-left: 20px;
	}
	.header{
		position: relative;
		width: 100%;
		height: 520px;
		background: #BCBFC5;
	}
	.pic_show{
		width: 1664px;
		height: 520px;
		background:url(http://ykimg.alicdn.com/develop/image/2019-03-13/6ab534d2c40f22b065325bc04d588531.jpg) no-repeat;
		margin: 0 auto;
	}
	.bg{
		background: url(http://gw.alicdn.com/mt/TB1RQJ6ognH8KJjSspcXXb3QFXa-1664-520.png);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.menu_ul{
		position: absolute;
		left: 82px;
		top: 23px;
		z-index: 100;
	}
	.menu_ul form{
		width: 500px;
		height: 40px;
		position: relative;
		left: 490px;
		top: -7px;
	}
	.menu_ul input{
		width: 421px;
		height: 38px;
		border-top-left-radius: 19px;
		border-bottom-left-radius: 19px;
		border: none;
		background:rgba(234,234,234,0.6);
	}
	button{
		width: 80px;
		height: 38px;
		border-top-right-radius: 19px;
		border-bottom-right-radius: 19px;
		background: #B30702;
		border: none;
		color: #FFEABF;
		position: absolute;
	}

	</style>
</head>
<body>
	<div class="header">
		<div class="pic_show"></div>
		<div class="bg"></div>
		<div class="menu_ul">
			<img src="https://img.alicdn.com/tfs/TB1dw0vqHGYBuNjy0FoXXciBFXa-120-24.png" class="l">
			<form action="" method="" class="l">
			    <input type="text" name="">
			    <button>搜全网</button>
		    </form>
		    <ul>
		    	<li>
		    		
		    	</li>
		    </ul>
		    <div class="clear"></div>
		</div>
	</div>
	<div class="contents">
	   <div class="content">
			<div class="contentUL">
				<h2>正在热播</h2>
			</div>
			<div class="hot_tv">
				<ul class="l">
                    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XMzk1NjM1MjAw.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_bank">
					        <img src="http://r1.ykimg.com/050E000059C3713EADBC0904C106D601?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>名侦探柯南</span>
				        </a><br>
				        <small>万年小学生的推理生涯</small>
				    </li>
				    <li class="mr">
					    <a href="https://v.youku.com/v_show/id_XNDA5MjAxMzcyNA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!2~5~5~A" target="_bank">
					        <img src="http://r1.ykimg.com/050E00005C3EC801ADBA6B484907E37A?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>大冰小将 第一季</span>
				        </a><br>
				        <small>千玺雷佳音冰雪大狂欢</small>
				    </li>
				    <li class="mr">
					    <a href="https://v.youku.com/v_show/id_XNDA4MjM0OTUyOA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!3~5~5~A" target="_bank">
					        <img src="http://r1.ykimg.com/050E00005C662F3FADB185E088068403?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>欢乐喜剧人 第五季</span>
				        </a><br>
				        <small>张云雷返场爆笑来袭</small>
				    </li>
				    <li class="mr">
					    <a href="https://v.youku.com/v_show/id_XNDA4OTMyMDQ0NA==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!4~5~5~A" target="_bank">
					        <img src="http://r1.ykimg.com/050E00005C416719ADC311330B03413D?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>最强大脑之燃烧吧大脑 第二季</span>
				        </a><br>
				        <small>百名天才少年脑力竞技</small>
				    </li>
				    <li class="mr">
					    <a href="https://v.youku.com/v_show/id_XNDA2MDEzMjQ5Mg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!5~5~5~A" target="_bank">
					        <img src="http://r1.ykimg.com/050E00005C0A0869859B5E5CCA0ADF28?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>运行中国 第二季</span>
				        </a><br>
				        <small>展现中国最新发展成果</small>
				    </li>
				    <li class="mr">
					    <a href="https://v.youku.com/v_show/id_XNDAwMjMwODcxMg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!6~5~5~A" target="_bank">
					         <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					         <span>偶像</span>
				        </a><br>
				        <small>独立音乐系列纪录长片</small>
				    </li>
				    <li>
					    <a href="https://v.youku.com/v_show/id_XNDA4OTE1MTE3Ng==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5!7~5~5~A" target="_bank">
					         <img src="http://r1.ykimg.com/050E00005C77A8DAADA7B2AE4A0E2B7F?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					         <span>大城晓聚</span>
				        </a><br>
				    <small>四座城市四场晓聚</small>
				    </li>
				</ul>
			</div>
		</div>
		<div class="content">
			<div class="contentUL">
				<h2 class="l mr">剧集 ></h2>
				<ul class="l 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 class="clear"></div>
			</div>
			<div class="tv_show">
				<div class="l mr">
					<a href="https://v.youku.com/v_show/id_XNDA5MDAxMzk5Mg==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5~5~5~A" target="_bank">
					    <img src="http://ykimg.alicdn.com/develop/image/2019-03-14/e5c8e654077f568854e460b9fbd8f046.jpg"><br>
					    <span>只为遇见你·张嘴吃糖</span>
					</a><br>
					<small>行走的“撩妹宝典”！霸气帅总撩动你的少女心</small>
					<div class="clear"></div>
				</div>
				<ul>
                    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li>
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li class="mr">
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				    <li>
				        <a href="https://v.youku.com/v_show/id_XNDA3OTMzMTE4MA==.html?spm=a2ha1.12325017.m_2556_c_8261.5~5!2~5~5~1!2~3~A" target="_bank">
					        <img src="http://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
					        <span>都挺好</span>
				        </a><br>
				        <small>姚晨郭京飞陷亲情旋涡</small>
				    </li>
				</ul>
				<div class="clear"></div>
			</div>
		</div>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post