CSS定位，伪选择器的使用及优酷头部布局案例--PHP五期培训线上班 - HTML与CSS

Home > List of blog posts > CSS定位，伪选择器的使用及优酷头部布局案例--PHP五期培训线上班

Blogger Information

Blog 6

fans 0

comment 2

visits 5376

Special Recommendation

More>

Related recommendations

实例一

<!-- 
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>

运行实例 »

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

Correction status：Uncorrected

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

背景控制、边框、表格与无序列表、表单--PHP五期培训线上班

2019-03-18 16:38:44