博客列表 >css中的定位与伪选择器 -3.14

css中的定位与伪选择器 -3.14

太早的博客
太早的博客原创
2019年03月15日 23:38:23887浏览

总结

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>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议