实例
*{margin: 0;padding:0;}
li{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
.mr{
margin-right: 10px;
}
.mt{
margin-top: 20px;
}
.clear{
clear: both;
}
.float_all{
float: left;
}
/*----------------------------------------------------------------------------------------------*/
.box{
width: 1200px;
margin: 0 auto;
}
.box-1{
width: 100%;
margin-top: 35px;
}
h2{
line-height: 52px;
margin-right: 15px;
}
.img_1{
width: 162px;
height: 240px;
}
.p2{
font-size: 14px;
}
li a{
font-size: 14px;
}
.p1{
font-size: 16px;
line-height: 52px;
}
.p1 a{
margin-left: 15px;
}
.img_2{
width: 394px;
height: 280px;
}
.img_3{
width: 190px;
height: 108px;
}
/*-------------------------------------------------------------------------------*/
.holder{
width: 1190px;
height: 70px;
background: rgba(255,255,255,0.6);
position: fixed;top: 0;left: 0;
padding: 0 64px 0 54px;
}
.holder .a_1{
line-height: 70px;
font-weight: bold;
font-size: 24px;
color: #44474A;
font-family: 华文新魏;
}
.holder .img_4{
position: relative;top: 5px;
}
.a_2{
margin-right: 10px;
font-size: 14px;
background: rgba(255,255,255,0.1);
}
.a_2:hover{
color: #0F9CFF;
}
.holder form{
margin-top: 20px;
}
.holder input{
width: 285px;
height: 30px;
border: none;
border-radius: 60px;
position: relative;
background: rgba(0,0,0,0.1);
padding-left: 15px;
}
.holder button{
width: 50px;
height: 30px;
background: #1486F8;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border: none;
position: relative;left: -55px;top: 1px;
}
/*----------------------------------------------------------------------*/
.wp{
width: 1310px;
height: 420px;
background: url(../images/13.png);
}
.wp>div{
width: 240px;
height: 320px;
margin-left: 950px;
background: rgba(22,40,47,0.5);
padding-top: 100px;
padding-left: 20px;
line-height: 30px;
}
.wp div ol li span{
font-size: 12px;
display: none;
}
.wp div ol .li_1 a:hover{
font-size: 24px;
color: red;
}
.wp div ol li:hover span{
display: block;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!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/css/youku.css"> </head> <body> <div class="holder"> <div class="float_all"> <a href=""><img class="img_4"src="static/images/logo.png"></a> <a class="a_1 ml" href="#">优酷</a> <span>· 剧集 </span> <a class="a_2" href="#"><img src="static/images/11.png"><span> 首页</span></a> <a class="a_2" href="#"><img src="static/images/12.png"><span> 频道</span></a> </div> <form action="" method="" class="l"> <input type="text"> <button>搜全网</button> </form> </div><!-- holder --> <div class="wp"> <div> <ol> <li class="li_1"> <a href="#">都挺好</a><br> <span>姚晨郭京飞兄妹决裂</span> </li> <li class="li_1"> <a href="#">都挺好</a><br> <span>姚晨郭京飞兄妹决裂</span> </li> <li class="li_1"> <a href="#">都挺好</a><br> <span>姚晨郭京飞兄妹决裂</span> </li> <li class="li_1"> <a href="#">都挺好</a><br> <span>姚晨郭京飞兄妹决裂</span> </li> <li class="li_1"> <a href="#">都挺好</a><br> <span>姚晨郭京飞兄妹决裂</span> </li> <li class="li_1"> <a href="#">都挺好</a><br> <span>姚晨郭京飞兄妹决裂</span> </li> <li class="li_1"> <a href="#">都挺好</a><br> <span>姚晨郭京飞兄妹决裂</span> </li> </ol> </div> </div> <div class="box"> <div class="box-1"> <h2>正在热播</h2> <ul> <li class="mr float_all"> <a href="#"><img class="img_1" src="static/images/a.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href="#"><img class="img_1" src="static/images/b.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href="#"><img class="img_1" src="static/images/c.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href="#"><img class="img_1" src="static/images/d.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href="#"><img class="img_1" src="static/images/e.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href="#"><img class="img_1" src="static/images/a.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="float_all"> <a href="#"><img class="img_1" src="static/images/f.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> </ul> <div class="clear"></div> </div> <div class="box-1"> <h2 class="float_all">剧集 ></h2> <p class="p1"> <a href="#">最新</a> <a href="#">大陆剧</a> <a href="#">日剧</a> <a href="#">韩剧</a> <a href="#">美剧</a> </p> <div class="clear"></div> <ul class="float_all mr"> <li><a href=""><img class="img_2" src="static/images/tv.jpg"></a></li> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </ul> <ul class="float_all"> <li class="mr float_all"> <a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="float_all"> <a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> </ul> <ul class="float_all mt"> <li class="mr float_all"> <a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="mr float_all"> <a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> <li class="float_all"> <a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br> <a href="#">瞰中国：宁夏</a> <p class="p2">低调的宁夏 美了四季</p> </li> </ul> </div> </div><!-- id="box" --> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例