实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例