用CSS仿某APP
WEB一次作业，用CSS仿某APP（优酷）
只是实验而已！！
效果图：
我是罡罡同学，一位初入网安的小白。☜(ˆ▽ˆ)
（疯狂暗示 点赞 ！关注！转发 ！！！ 点赞 ！关注！转发 ！！！）
* 您的支持是罡罡同学前进的最大动力！
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<meta charset="utf-8">
<title>优酷视频title>
<style >
*{
margin: 0px;
padding: 0px;
}
html,body,#searchHead,#chat{
width: 100%;
height: 100%;
}
#searchHead{
text-align: center;
width: 100%;
height: 60px;
background-color: #e4573b;
background-size: 100px;
position:fixed;
left: 0px;
top: 0px;
}
.search1{
border-color: #d9d9d9;
line-height: 10px;
margin: 10px;
background-color: #e4573b;
padding: 8px;
border-radius: 100px;
text-align: center;
color:black;
margin-left: -10px;
opacity: 0.8;
text-decoration: none;
outline: none;
}
.big{
width: 30px;
margin-left: -50px;
margin-bottom: -10px;
opacity: 0.7;
}
.download{
width: 35px;
margin-left: 20px;
margin-bottom: -12px;
margin-right: -40px;
}
.clock{
width: 30px;
margin-left: 50px;
margin-bottom: -10px;
margin-right: -50px;
margin-top: 10px;
}
.button1{
line-height: 10px;
font-weight:bold;
background-color: red;
border: none;
padding: 10px;
border-radius: 50px;
color: #e9e973;
margin-left: -30px;
margin-right: 20px;
outline: none;
}
#nav{
list-style: none;
display: block;
width:100%;
height: 40px;
background-color: red;
position: fixed;
left:0px;
top:60px;
}
#nav ul{
width: 500px;
list-style: none;
}
#nav li{
display: block;
width:100px;
height: 40px;
background-color: red;
text-align: center;
float:left;
}
#nav a{
display: block;
width:100px;
height: 40px;
color:white;
line-height: 40px;
text-decoration: none;
}
#nav a:hover{
color:black;
width:100px;
height: 40px;
background-color: red;
font-size: 20px;
}
/*下方导航栏*/
#nav2{
list-style: none;
display: block;
width:500px;
height: 70px;
background-color: white;
position: fixed;
bottom: 0px;
}
#nav2 ul{
width: 500px;
list-style: none;
}
#nav2 li{
display: block;
width:80px;
height: 40px;
background-color: white;
text-align: center;
float:left;
font-weight: 100;
}
#nav2 a{
display: block;
width:80px;
height: 40px;
color:white;
line-height: 100px;/*控制字体上下的*/
text-decoration: none;
color: black;
}
#nav2 a:hover{
color:black;
width:100px;
height: 40px;
background-color: red;
font-size: 20px;
}
.order{
width: 30px;
margin-top: 68px;
float: right;
opacity: 0.9;
}
.box{
width: 470px;
height: 200px;
margin:100px 0px 0px 0px;
background-color: red;
padding: 3px;
position: fixed;
}
.box ul{
width: 1410px;
height: 200px;
list-style: none;
}
.box li{
float: left;
padding-right: 3px;
animation:animate 10s linear infinite;
}
@keyframes animate{
0% {
transform:translate(5px);
}
33.3% {
transform:translate(-303px);
}
66.6% {
transform:translate(-602px);
}
100%{
transform:translate(5px);
}
}
.header{
width:185px;
height: 100px;
margin: 310px 210px -20px 10px ;
border-radius: 10px;
}
.header1{
width:185px;
height: 100px;
margin: -220px 0px 0px 220px ;
border-radius: 10px;
}
.header2{
width:185px;
height: 100px;
margin: 20px 210px -20px 10px ;
border-radius: 10px;
}
.header3{
width:185px;
height: 100px;
margin: -220px 0px 0px 220px ;
border-radius: 10px;
}
.header4{
width:185px;
height: 100px;
margin: 20px 210px -20px 10px ;
border-radius: 10px;
}
.header5{
width:185px;
height: 100px;
margin: -220px 0px 0px 220px ;
border-radius: 10px;
}
.p1{
font-weight:500;
}
.p2{
color: #919191;
font-weight:normal;
}
.index{
width: 30px;
margin: 5px 10px -15px -470px;
}
.view{
width: 30px;
margin:10px 10px -15px 35px ;
}
.vip{
width: 30px;
margin:10px 10px -15px 35px ;
}
.infor{
width: 30px;
margin:10px 10px -15px 35px ;
}
.mine{
width: 30px;
margin:10px 35px -15px 35px ;
}
style>
head>
<body>
<div id='searchHead'>
<button class="button1" style="width:50px;height:30px">两会button>
<img src="big.png" class="big" />
<img src="download11.png" class="download" />
<img src="timer1.png" class="clock" />
<ul id='nav'>
<li><a href='https://tv.youku.com/?spm=a2ha1.14919748_WEBHOME_GRAY.drawer4.d_zj1_1'>快看a>li>
<li><a href='https://zy.youku.com/?spm=a2ha1.14919748_WEBHOME_GRAY.drawer4.d_zj1_2'>精选a>li>
<li><a href='https://tv.youku.com/?spm=a2ha1.14919748_WEBHOME_GRAY.drawer4.d_zj1_1'>电视剧a>li>
<li><a href='https://movie.youku.com/?spm=a2ha1.14919748_WEBHOME_GRAY.drawer4.d_zj1_3'>电影a>li>
ul>
<ul id='nav2'>
<img src="首页.png" class="index"/>
<img src="看点.png" class="view"/>
<img src="会员.png" class="vip"/>
<img src="消息.png" class="infor"/>
<img src="我的.png" class="mine"/>
<li><a href='http://www.baidu.com'>首页a>li>
<li><a href='http://www.baidu.com'>看点a>li>
<li><a href='http://www.baidu.com'>会员a>li>
<li><a href='http://www.baidu.com'>消息a>li>
<li><a href='http://www.baidu.com'>我的a>li>
ul>
<img src="order1.png" class="order" />
div>
<div class="box">
<ul>
<li><img src="觉醒.png" alt="" style="width:350px;height:200px">li>
<li><img src="王牌.png" alt="" style="width:350px;height:200px">li>
<li><img src="同一.png" alt="" style="width:350px;height:200px">li>
ul>
div>
<img class='header' src="乡村.jpg">
<img class='header1' src="地狱.jpg">
<p class="p1"> 乡村爱情13#更新 地狱男爵#猛男吸猫p>
<p class="p2" > 内奸被抓！赵四上门找广坤 漫画改编奇幻片p>
<img class='header2' src="同一.jpg">
<img class='header3' src="柯南.jpg">
<p class="p1"> 同一屋檐下#辣眼 柯南·新兰发糖p>
<p class="p2" > 80万+弹幕热议中 No.5 · 动漫热度榜>p>
<img class='header4' src="山河.jpg">
<img class='header5' src="鲨鱼.jpg">
<p class="p1"> 山河令#双双坠崖 深海狂鲨3·刺激p>
<p class="p2" > 周温为救成岭坠崖受伤 港口惊现夺命食人鲨p>
<br><br><br>
<p>下拉刷新<p/>
body>
html>
我是罡罡同学，一位初入网安的小白。☜(ˆ▽ˆ)
（疯狂暗示 点赞 ！关注！转发 ！！！ 点赞 ！关注！转发 ！！！）
* 您的支持是罡罡同学前进的最大动力！