标签：app 仿某 width nbsp background 10px 0px margin CSS
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>
我是罡罡同学，一位初入网安的小白。☜(ˆ▽ˆ)
（疯狂暗示 点赞 ！关注！转发 ！！！ 点赞 ！关注！转发 ！！！）
* 您的支持是罡罡同学前进的最大动力！
标签：app,仿某,width,nbsp,background,10px,0px,margin,CSS 来源： https://blog.csdn.net/m0_46625346/article/details/114843092
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。