优酷布局-2019年3月15号22:00 - html/css

Home > List of blog posts > 优酷布局-2019年3月15号22:00
Blogger Information
Blog 19
fans 0
comment 0
visits 13306
Special Recommendation
More>
Related recommendations
实例

<!DOCTYPE html>
<html>
<head>
	<title>优酷-这世界很酷</title>
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="static/css/style.css">
	<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
	<style type="text/css">
		*{margin:0;padding:0;}
li{list-style: none;float:left;}
a{text-decoration:none;color:#333;}
.l{float:left;}
.r{float:right;}
.clear{clear:both;}
.mr{margin-right: 8px}
.header{width:100%;height:520px;position: relative;background: #07253C}
.png{background:url(../images/bg.png)/* no-repeat*/; width: 100%;height: 100%;position:absolute;top:0;left: 0;z-index: 99;}
.bg{background:url(../images/bg.jpg);width: 1664px;height: 520px;position: relative;margin:0 auto;}
.menu{position: absolute;top:120px;right:80px; z-index: 999;background: rgba(0,0,0,0.5);}
.menu_ul{width:190px;padding: 0 15px;background: rgba(0,0,0,0.5);}
.menu_ul a{display: block;line-height: 25px;font-size: 14px;padding: 10px 0;color: rgba(254,254,254,0.6);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border-bottom: 1px solid rgba(147,147,147,0.4);}
.menu_ul a:hover{color: #fff;}
.menu_ul a:hover span{font-size: 20px;display: block; color: #fff;}
.header_top{/*margin:20px auto;*/position:fixed;top:20px;left: 0;z-index: 999;width:100%;}
.logo{margin-left:140px;}
form{margin-left:400px;display:inline-block;position:relative;}
input{width: 500px;height: 40px;border:none;border-radius: 100px;background:rgba(255,255,255,0.3);outline: none;padding-left:20px;color:#fff;}
.logo button{width:80px;height:40px;border:none;border-top-right-radius:100px;border-bottom-right-radius:100px;background: #1F81FA;position:absolute;left:440px;top:0;}
.header_tap{margin-right:50px;position:relative;}
.header_tap a,li{color: rgba(234,234,234,0.5);}
.header_tap img{width: 40px;height: 40px;}
.header_tap i{font-size: 18px;}
.header_tap li{padding-right:20px;text-align: center;}
.box{position: absolute;top:50px;right:20px;background:#fff;display: none;}
.header_tap li:hover .box{display: block;}
.box span{color:#555;margin-top:20px;display: inline-block;}
.box button{background: #1F81FA;color:#fff;width:200px;height: 35px;border-radius: 100px;margin:20px;border:none;font-size: 14px}
.arrow{position:relative;top:-36px;right: -165px;
 	border-top: 7px transparent dashed;
	border-left: 7px transparent dashed;
 	border-right: 7px transparent dashed;
	border-bottom: 7px #fff solid;
}
.arrow_1{
	position:relative;top:-26px;right:77px;
 	border-top: 7px transparent dashed;
	border-left: 7px transparent dashed;
 	border-right: 7px transparent dashed;
	border-bottom: 7px #fff solid;
}

.header_tap li:hover .box_k{display: block;}
.box_k{display: none;position: absolute;top:50px;right:20px;background:#fff;}
.box_k li{margin-top: 20px;margin-left: 20px }
.box_k img{width: 70px;height: 70px}
.box_k h3{color:#000;font-weight: 400;font-size: 14px}
.box_k span{color:#ccc;font-size: 12px}
.box_tv{margin-top: 155px;background: #e6e5e5;height: 50px;}
.box_tv span{color:#999;}
.box_tv h3{color:#000;font-weight: 400;font-size: 14px;display: inline-block;margin-top: 15px}

.countents{width: 1740px;margin:20px auto;}
.hot{line-height:70px;}
.hot_pic img{width:240px;height:360px;}
.countents h2{font-weight:200;font-size:26px;}
.countents p{font-size:12px;color:#999;line-height: 20px;margin-bottom:18px;}
.episode{line-height: 70px}
.episode h2{margin-right: 30px}
.pic_show img{width: 490px;height:335px;}
.episode_pic img{width: 240px;height:136px;}
	</style>
</head>
<body>
	<div class="header">
		<!-- <div class="png"></div> --><!-- 这里背景图片没有设置好 -->
		<div class="bg">
			<div class="png"></div>
			<div class="menu">
				<ul class="menu_ul"><!-- 这里字体换行效果不会设置 --><!-- 这里下划线长短居中不会设置 -->
					<li><a href=""><span>只为遇见你：</span>于直高洁同居撒糖</a></li>
					<li><a href=""><span>只为遇见你：</span>于直高洁同居撒糖</a></li>
					<li><a href=""><span>只为遇见你：</span>于直高洁同居撒糖</a></li>
					<li><a href=""><span>只为遇见你：</span>于直高洁同居撒糖</a></li>
					<li><a href=""><span>只为遇见你：</span>于直高洁同居撒糖</a></li>
					<li><a href=""><span>只为遇见你：</span>于直高洁同居撒糖</a></li>
					<li><a href="">只为遇见你：于直高洁同居撒糖</a></li>
				</ul>
			</div>	
		</div>
		<!--背景代码结束-->
		<!--头部导航代码开始-->
		<div class="header_top">
			<div class="logo l">
				<a href=""><img src="static/images/logo.png"></a>
				<form action="url" method="post">
					<input type="text" name="">
					<button>全网搜</button>
				</form>
			</div>
			<ul class="header_tap r">
				<li><i class="fa fa-television"></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-upload"></i><br><a href="">上传</a></li>
				<li><i class="fa fa-television"></i><br><a href="">客户端</a>
					<a href="">
						<ul class="box_k">
						<span class="arrow_1"></span>
						<li>
							<img src="static/images/5.png"><br>
							<h3>优酷客户端</h3>
							<span>快速·稳定的观看体验</span>
						</li>
						<li>
							<img src="static/images/0.jpg"><br>
							<h3>优酷移动APP</h3>
							<span>全网独播尽在手中</span>
						</li>
						<div class="box_tv">
							<h3>优酷TV版</h3>
							<span>CIBN酷喵影视智能电视App</span>
						</div>
					</ul></a>
				</li>
				<li><a href=""><img src="static/images/rw.png"></a>
					<ul class="box">
						<span class="arrow"></span>
						<span>登录使用更多功能</span><br>
						<button>登录/注册</button>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div class="countents">
		<div class="countent">
			<div class="hot">
				<h2>正在热播</h2>
			</div>
			<ul class="hot_pic">
				<li class="mr">
					<a href="">
						<img src="static/images/hot1.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/hot2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/hot3.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/hot4.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/hot5.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/hot6.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li>
					<a href="">
						<img src="static/images/hot5.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<div class="clear"></div>
			</ul>
		</div>
		<div class="countent">
			<div class="episode">
				<h2 class="l">剧集 ></h2>
				<ul class="l">
				<li class="mr"><a href="">最新</a></li>
				<li class="mr"><a href="">大陆剧</a></li>
				<li class="mr"><a href="">日韩剧</a></li>
				<li class="mr"><a href="">港台剧</a></li>
				<li class="mr"><a href="">英美剧</a></li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="pic_show l mr">
				<a href="">
					<img src="static/images/ju1.jpg"><br>
					<span>只为遇见你·张嘴吃糖</span>
				</a>
				<p>行走的“撩妹宝典”！霸气帅总撩动你的少女心</p>
			</div>
			<ul class="episode_pic">
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li class="mr">
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
				<li>
					<a href="">
						<img src="static/images/ju2.jpg"><br>
						<span>悠哉日常大王剧场版:假期活动</span>
					</a>
					<p>暑假就是要出去玩呀</p>
				</li>
			</ul>
		</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
优酷热门栏目布局—2019年3月14日22时00分

2019-03-31 10:31:35