css定位和元素的堆叠顺序-php第五期培训 - html+css

Home > List of blog posts > css定位和元素的堆叠顺序-php第五期培训

Blogger Information

Blog 8

fans 0

comment 0

visits 5917

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>优酷-这世界很酷</title>
	<link rel="icon" type="icon/x-images" href="http://img.alicdn.com/tfs/TB1u5jLkMoQMeJjy0FpXXcTxpXa-200-200.jpg">
	<style type="text/css">
	*{margin:0;padding: 0px;}
	.clear{clear:both;}
	li{list-style: none;}
	a{color: #333;text-decoration: none;font-size: 16px;}
	span{color: #ccc;font-size: 12px;}
	h2{line-height: 26px;font-size: 25px;margin:0 auto;}
	.head{width: 100%;height: 420px;position: relative;}
	.head_pic{width: 1536px;height: 420px;background: url(https://ykimg.alicdn.com/develop/image/2019-03-14/c63e7842043cf754cd66d766d1b30883.jpg) 0 -100px no-repeat;}
	.head_pic1{width: 1536px;height: 420px;background: url(https://gw.alicdn.com/mt/TB1RQJ6ognH8KJjSspcXXb3QFXa-1664-520.png) 0 -100px no-repeat;}
	.logo{position:absolute;top: 20px;left: 100px; }
	.head form{position: absolute;top: 20px;left: 600px;width: 320px;height: 38px;}
	.head input{width: 320px;height: 38px;border: none;border-radius: 50px;height: 38px;position: relative;outline: 0 none;}
	.head button{width: 80px;height: 38px;border: none;border-top-right-radius: 25px;background: #B30702;border-bottom-right-radius: 25px;position: absolute;right:0;top: 0;color: #FFEABF;}
/*	.head img{background: no-repeat;}*/
	.contents{width: 100%;margin-bottom: 20px;}
	.content{width: 1200px;margin:0 auto; }
	.text{margin:0 0 20px 0;height: 26px;line-height: 26px;}
	.text li{float: left;}
	.text li a{margin:0 10px;}
	.show{width: 1200px;height: 340px;margin:0 auto;}
	.show li{float: left;}
	.img1{width: 192px;height: 288px;margin-right: 8px;}
	.img2{width: 192px;height: 108px;}
	.img_l{margin-left: 8px;}
	.img_t{margin-top: 8px;}
</style>
</head>
<body>
	<div class="head">
		<div class="head_pic">
			<div class="head_pic1"></div>
		</div>
		<div class="logo">
			<img src="https://img.alicdn.com/tfs/TB1dw0vqHGYBuNjy0FoXXciBFXa-120-24.png">
		</div>
		<form>
			<input type="text" name="">
			<button>搜全网</button>
		</form>
	</div>
	<div class="contents">
		<div class="content">
			<div class="text">
				<h2 style="margin-top: 100px;">正在热播</h2>
			</div>
			<div class="show">
				<ul>
					<li><img class="img1" src="https://r1.ykimg.com/050E00005C46D398ADC311BEE20A5697?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
						<ul>
							<li><a href="">闯堂兔3</a></li><br>
							<li><span>闯堂兔的穿越之旅</span></li>
						</ul>
					</li>
					<li><img class="img1" src="https://r1.ykimg.com/050E00005C248687AD881A04D80ABCF1?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
						<ul>
							<li><a href="">巨兵长城传</a></li><br>
							<li><span>寻找将神的冒险之旅</span></li>
						</ul>
					</li>
					<li><img class="img1" src="https://r1.ykimg.com/050E000059C3713EADBC0904C106D601?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
						<ul>
							<li><a href="">名侦探柯南</a></li><br>
							<li><span>万年小学生的推理生涯</span></li>
						</ul>
					</li>
					<li><img class="img1" src="https://r1.ykimg.com/050E00005BBD6765859B5D699901BE17?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
						<ul>
							<li><a href="">不良人 第三季</a></li><br>
							<li><span>王者弈天下大唐生死局</span></li>
						</ul>
					</li>
					<li><img class="img1" src="https://r1.ykimg.com/050E00005C18548F859B5E9775088BEF?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
						<ul>
							<li><a href="">白蛇:缘起</a></li><br>
							<li><span>白蛇前世爱情凄美动人</span></li>
						</ul>
					</li>
					<li><img class="img1" src="https://r1.ykimg.com/050E00005C4EE7CB8B7774D04402A24F?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
						<ul>
							<li><a href="">我的亲爹和后爸</a></li><br>
							<li><span>张译张国立花式互怼</span></li>
						</ul>
					</li>
				</ul>		
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="contents">
		<div class="content">
			<div class="text">
				<a href=""><h2 style="float: left;">剧集 ></h2></a>
				<ul>
					<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="show">
				<div style="float: left;">
					<img src="https://ykimg.alicdn.com/develop/image/2019-03-14/e5c8e654077f568854e460b9fbd8f046.jpg" width="394px" height="280px">
					<ul>
						<li><a href="">只为遇见你.张嘴吃糖</a></li><br>
						<li><span>行走的任性战斗机!</span></li>
					</ul>
				</div>
				<div>
					<ul>
						<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-26/02d572e76b827a4317c36639cbccdf33.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
							<ul>
								<li><a href="">都挺好</a></li><br>
								<li><span>亲情旋涡</span></li>
							</ul>
						</li>
						<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-01-26/79d4c3de275715d4c09ba15d4baeda63.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
							<ul>
								<li><a href="">乡村爱情11</a></li><br>
								<li><span>刘熊赵四争c位</span></li>
							</ul>
						</li>
						<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-21/7cb276539f90edde8e1dafc559692133.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
							<ul>
								<li><a href="">老中医</a></li><br>
								<li><span>陈宝国冯远征许晴弘扬医德</span></li>
							</ul>
						</li>
						<li class="img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-02-12/778d31c3d19e28e1ed2a3672ecce5b8c.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
							<ul>
								<li><a href="">国宝奇旅</a></li><br>
								<li><span>张大彪花和尚携手护国宝</span></li>
							</ul>
						</li>
						<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-03-12/7e0311477110ff80df583f98cca4b899.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
							<ul>
								<li><a href="">重耳传奇</a></li><br>
								<li><span>春秋版"王子历险记"</span></li>
							</ul>
						</li>
						<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-03-13/013cc9422f4c032737722edf1e6180f7.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
							<ul>
								<li><a href="">春暖花又开</a></li><br>
								<li><span>李建上演新农村创业</span></li>
							</ul>
						</li>
						<li class="img_t img_l"><img class="img2" src="https://ykimg.alicdn.com/develop/image/2019-03-14/60d637f05f000a19542c742ba5f01158.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
							<ul>
								<li><a href="">逆流而上的你</a></li><br>
								<li><span>咸鱼夫妻带娃逆袭</span></li>
							</ul>
						</li>
						<li class="img_t img_l"><img class="img2" src="https://liangcang-material.alicdn.com/liangcang/product/20190107391926/upload/e35649cd7a8a47b58fabe456480bf37a.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100" alt="">
							<ul>
								<li><a href="">小女花不弃</a></li><br>
								<li><span>林依晨来袭</span></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>

		</div>
	</body>
	</html>

运行实例 »

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

笔记:

css中的三种定位:

1.fixed(固定定位):元素的位置相对于浏览器窗口是固定位置;

2.relative(相对定位):相对定位元素的定位是相对其正常位置,相对定位元

素经常被用来作为绝对定位元素的容器块;

3.absolute(绝对定位):绝对定位的元素的位置相对于最近的已定位父元素，

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

使元素的位置与文档流无关，因此不占据空间;

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

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

html+css常用的一些标签使用-2019年3月11日晚10:00

2019-03-12 10:01:05