博主信息
博文 25
粉丝 0
评论 0
访问量 24279
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
优酷首页顶部菜单布局
moonheart的博客
原创
703人浏览过

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>案例-优酷,这世界很酷</title>
	<link rel="shortctut icon" type="image/x-icon" href="images/1.ico">
	<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
	<style type="text/css">
	*{margin: 0;padding: 0;}
	li{list-style: none;float: left;}
	a{color: #000;text-decoration: none;font-size: 12px;}/*清除浮动*/
	small{color: #989898;}
	span{font-weight: bold;color: #363636;}
	.mr{margin-right: 10px;}
	.hi{margin-bottom: 18px;}
	.l{float: left;}
	.clear{clear:both;}
	.contents{
		width: 1204px;
		margin: 0 auto;
	}
	.content{
		width: 100%;
		margin-top: 20px;
	}
	.contentUL{line-height: 70px;}
	.hot_tv img{
		width: 192px;
		height: 282px;
	}
	.big_show img{
		width: 394px;
		height: 280px;
	}
	.tab li{margin-left: 25px;}
	.tab a{font-size: 18px;}
	.tv_tab img{
		width: 190px;
		height: 108px;
	}
	.header{
		width: 100%;
		height:520px;
		background-color: #E8E8E8;
	}
	.pic_show{
		margin: 0px auto;
		width: 1664px;
		height: 520px;
		background: url(images/bg.jpg) no-repeat;

	}
	.bg{background: rgba(0,0,0,0.3);
		width: 100%
		height:100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.menu_ul{
		position: fixed;top:20px;left: 120px;z-index: 999;
	}
	.menu_ul form{
		width: 500px;
		height: 40px;
		position: relative;left: 180px;
	}
	.menu_ul input{
		width: 500px;
		height: 40px;
		border-radius: 100px;
		border: none;
		background: rgba(234,234,234,0.5);
	}
	.menu_ul button{
		width: 90px;
		height: 40px;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
		background: #B30702;
		color: #fff;
		position: absolute;top: 0px;right: 0;
	}
	.menu_li{
		position: absolute;top:0px;right: 0px;

	}
	.menu_li li{
		width: 40px;
		height: 40px;
		margin: 18px 10px;
		text-align: center;
		font-size: 18px;


	}


	</style>
</head>
<body>
	<div class="header">
		<div class="pic_show"></div>
		<div class="bg"></div>
		<div class="contents menu_ul">
			<img src="images/logo.png" class="l">
			<form action="" method="" class="l">
			<input type="text" name="">
			<button>全网搜</button>
			</form>
		</div>
		<ul class="menu_li l">
			<li><i class="fa fa-gift"></i><br><span>VIP</span></li>
			<li><i class="fa fa-feed (alias)"></i><br><span>订阅</span></li>
			<li><i class="fa fa-clock-o"></i><br><span>记录</span></li>
			<li><i class="fa fa-arrow-up"></i><br><span>上传</span></li>
			<li><i class="fa fa-television"></i><br><span>终端</span></li>
		</ul>
	</div>
	<div class="contents">
		<div class="content">
			<div class="contentUL">
				<h2>正在热播</h2>
			</div>
			<ul class="hot_tv">
				<li class="mr">
					<a href="">
						<img src="images/a.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
					</a>
				</li>			

				<li class="mr">
					<a href="">
						<img src="images/b.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
					</a>
				</li>			

				<li class="mr">
					<a href="">
						<img src="images/c.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
					</a>
				</li>			

				<li class="mr">
					<a href="">
						<img src="images/d.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
					</a>
				</li>			

				<li class="mr">
					<a href="">
						<img src="images/e.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
					</a>
				</li>			

				<li>
					<a href="">
						<img src="images/f.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
					</a>
				</li>			
			</ul>
			<div class="clear"></div>
		</div>
		<div class="content">
			<div class="contentUL">
				<h2 class="l">剧集 ></h2>
				<ul class="tab l" >
					<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="big_show l mr">
					<a href="">
						<img src="images/tv.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
					</a>
				</div>
				<ul class="tv_tab">
					<li class="mr hi">
						<a href="">
						<img src="images/tv1.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
 						</a>
					</li>
					<li class="mr hi">
						<a href="">
						<img src="images/tv2.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
 						</a>
					</li>
					<li class="mr hi">
						<a href="">
						<img src="images/tv3.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
 						</a>
					</li>
					<li class="hi">
						<a href="">
						<img src="images/tv4.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
 						</a>
					</li>
					<li class="mr hi">
						<a href="">
						<img src="images/tv5.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
 						</a>
					</li>
					<li class="mr hi">
						<a href="">
						<img src="images/tv1.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
 						</a>
					</li>
					<li class="mr hi">
						<a href="">
						<img src="images/tv1.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
 						</a>
					</li>
					<li class="mr hi">
						<a href="">
						<img src="images/tv1.jpg"><br>
						<span>瞰中国:宁夏 </span><br>
						<small>低调的宁夏 美了四季 </small>
 						</a>
					</li>					
				</ul>
				<div class="clear"></div>
			</div>
		</div>
	</div>

</body>
</html>

运行实例 »

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

TIM图片20190315145017.png
批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学