WEB一次作业，用CSS仿某APP
只是实验而已！！
效果图：
我是罡罡同学，一位初入网安的小白。☜(ˆ▽ˆ)
（疯狂暗示 点赞 ！关注！转发 ！！！ 点赞 ！关注！转发 ！！！）
* 您的支持是罡罡同学前进的最大动力！
效果图：
上代码！！（有点多。。）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<meta charset="utf-8">
<title>fans</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html,body {
width: 100%;
height: 100%;
}
#nav{
width: 100%;
height: 130px;
background-size: 410px;
position:fixed;
/*background-color: #e4573b;*/
background-image: linear-gradient(to right, #d8a7bd , #b7d5e0);
}
#nav1{
width: 350px;
height: 30px;
background-size: 350px;
position:fixed;
margin: 215px 0px 0px 30px;
/*background-color: #e4573b;*/
background-image: linear-gradient(to right, #fff5e9 , #fcf9f4);
border-radius: 5px;
}
#nav2{
width: 170px;
height: 60px;
background-color: white;
background-size: 350px;
position:fixed;
margin: 265px 0px -20px 30px;
/*background-color: #e4573b;*/
border-radius: 10px;
border: 1px solid #f1f1ef;
}
#nav3{
width: 170px;
height: 60px;
background-color: white;
background-size: 350px;
position:fixed;
margin: 265px 0px -20px 210px;
/*background-color: #e4573b;*/
border-radius: 10px;
border: 1px solid #f1f1ef;
}
#nav4{
width: 350px;
height: 140px;
background-color: white;
background-size: 350px;
position:fixed;
margin: 345px 0px -20px 30px;
/*background-color: #e4573b;*/
border-radius: 10px;
border: 1px solid #f1f1ef;
}
#nav5{
width: 30px;
height: 5px;
background-color:red;
position:fixed;
margin: 535px 0px -20px 40px;
/*background-color: #e4573b;*/
border-radius: 10px;
border: 1px solid #f1f1ef;
}
#nav6{
width: 65px;
height: 22px;
background-color: white;
background-size: 350px;
position:fixed;
margin: 555px 0px -20px 30px;
text-align: center;
/*background-color: #e4573b;*/
border-radius: 15px;
border: 1px solid #f1f1ef;
color: pink;
}
#nav7{
width: 65px;
height: 22px;
background-color: white;
background-size: 350px;
position:fixed;
margin: 555px 0px -20px 110px;
text-align: center;
/*background-color: #e4573b;*/
border-radius: 15px;
border: 1px solid #f1f1ef;
color: pink;
}
#nav8{
width: 170px;
height: 120px;
background-size: 350px;
position:fixed;
margin: 595px 0px 0px 30px;
/*background-color: #e4573b;*/
background-image: linear-gradient(to bottom right, #f76968 , #fdc97d);
border-radius: 5px;
}
#nav9{
width: 100%;
height: 70px;
bottom: 0px;
background-size: 410px;
background-color: white;
position:fixed;
border: 1px solid #f1f1ef;
/*background-color: #e4573b;*/
}
/*下一个矿用色#fbfbf9*/
.esc{
width: 30px;
height: 30px;
margin: 10px 20px 0px 250px;
}
.email{
width: 30px;
height: 30px;
margin: -60px 10px 20px 300px;
}
.emit{
width: 30px;
height: 30px;
margin: -60px 10px 40px 350px;
}
.mine{
width: 65px;
height: 65px;
margin: -35px 0px 0px 30px;
border-radius: 50px;
}
.p1{
color: white;
margin: -60px 0px 0px 105px;
font-size: 20px;
}
.p2{
color: white;
margin: 5px 0px 0px 105px;
font-size: 13px;
font-weight: 500;
}
.n1{
color: black;
margin: 40px 0px 0px 75px;
font-size: 25px;
font-weight: 500;
}
.p3{
color: black;
margin: 3px 0px 0px 68px;
font-size: 15px;
font-weight: 600;
}
.p4{
color: black;
margin: 5px 0px 0px 35px;
font-size: 14px;
font-weight: 500;
}
.sun{
width:20px;
margin: -20px 0px 17px 10px;
}
.p5{
margin: 12px 10px 0px 15px;
font-weight: 500;
}
.p6{
margin: 0px 10px 0px 15px;
font-size: 10px;
font-weight: 400;
color: #6a6a6a;
}
.soft{
width: 40px;
margin: -40px 10px 20px 115px;
}
.p7{
margin: 12px 10px 0px 15px;
font-weight: 500;
}
.p8{
margin: 0px 10px 0px 15px;
font-size: 10px;
font-weight: 400;
color: #6a6a6a;
}
.vip{
width: 40px;
margin: -40px 10px 20px 115px;
}
.p9{
margin: 13px;
font-weight: 500;
}
.people{
width: 40px;
margin: -5px 15px 10px 30px;
}
.adress{
width: 40px;
margin: -5px 15px 10px 20px;
}
.argue{
width: 40px;
margin: -5px 15px 10px 25px;
}
.ticket{
width: 40px;
margin: -5px 15px 10px 30px;
}
.p10{
margin: -10px 10px 0px 25px;
}
.p11{
margin: 10px 10px 0px 142px;
font-weight: 400;
font-size: 14px;
color: #6a6a6a;
}
.down{
width: 25px;
margin: -30px 10px 14px 200px;
}
.emit1{
width: 30px;
height: 30px;
margin: 0px 0px -15px 135px;
}
.add{
width: 50px;
height: 50px;
margin: -50px 20px -50px 305px;
}
.p14{
color: white;
text-align: left;
padding: 0px 15px 0px 20px;
}
.p15{
color: black;
text-align: left;
padding: 0px 15px 0px 20px;
}
.select{
width: 30px;
margin: 10px 0px 0px 20px;
}
.all{
width: 30px;
margin: 10px 0px 0px 46px;
}
.live{
width: 30px;
margin: 10px 0px 0px 50px;
}
.money{
width: 30px;
margin: 10px 0px 0px 50px;
}
.my{
width: 30px;
margin: 10px 0px 0px 50px;
}
</style>
</head>
<body>
<div id="nav">
<img src="设置白.png" class="esc" />
<img src="消息.png" class="email" />
<img src="省略.png" class="emit" />
<img src="个人.jpg" class="mine" />
<p class="p1">孔侑0</p>
<p class="p2">暂无简介涨粉慢</p>
<p class="n1">2 0 0</p>
<p class="p3">关注 粉丝 获赞与想看</p>
</div>
<div id="nav1">
<p class="p4">累计发布<font color="#e4ae72">1</font>篇</p>
<img src="星星.png" class="sun" />
</div>
<div id="nav2">
<p class="p5">我的订单</p>
<p class="p6">查看全部订单</p>
<img src="沙发.png" class="soft" />
</div>
<div id="nav3">
<p class="p7">VIP会员</p>
<p class="p8">含400元演出红包</p>
<img src="vip.png" class="vip" />
</div>
<div id="nav4">
<p class="p9">我的服务</p>
<img src="人.png" class="people" />
<img src="地址.png" class="adress" />
<img src="评价.png" class="argue" />
<img src="优惠券.png" class="ticket" />
<p class="p10">观演人 收货地址 评价 优惠券</p>
<p class="p11">展开更多 </p>
<img src="向下.png" class="down" />
<p class="p12"><font size="+2"> 动态</font> <font color="#6a6a6a" > 想看 </font></p>
</div>
<div id="nav5">
</div>
<div id="nav6">
<p class="p13"><font color="#e4779e" >全部1</font></p>
</div>
<div id="nav7">
<p class="p13"><font color="#6a6a6a" >评价1</font></p>
</div>
<div id="nav8">
<img src="省略.png" class="emit1" />
<img src="加号1.png" class="add" />
<p class="p14">金霏陈曦人间值得！二位功底很棒！</p>
</div>
<div id="nav9">
<img src="首页.png" class="select" />
<img src="全部.png" class="all" />
<img src="现场.png" class="live" />
<img src="钱包.png" class="money" />
<img src="我的.png" class="my" />
<p class="p15">精选 全部 现场 票夹 我的</p>
</div>
</body>
</html>
我是罡罡同学，一位初入网安的小白。☜(ˆ▽ˆ)
（疯狂暗示 点赞 ！关注！转发 ！！！ 点赞 ！关注！转发 ！！！）
* 您的支持是罡罡同学前进的最大动力！