我是罡罡同学,一位初入网安的小白。☜(ˆ▽ˆ)

(疯狂暗示 点赞 !关注!发 !!! 点赞 !关注!转发 !!!

* 您的支持是罡罡同学前进的最大动力!

仿朋友圈页面(超小白)_2d

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<meta charset="utf-8">
<title>朋友圈</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#nav{
width: 100%;
height: 100%;
}
#nav1{
width: 100%;
height: 100%;
}

.p1{
width: 318px;
height: 50px;
font-size: 20px;
text-align: center;
line-height: 50px;
background-color: #d1d2d4;
/*margin: 10px 0px 0px 200px;*/
}
.p2{
margin: 15px 10px 0px 70px;
/*text-align: center;*/
}
.p3{
margin: -40px 10px 0px 70px;
/*text-align: center;*/
}
.p4{
margin: 30px 10px 0px 70px;
/*text-align: center;*/
}
.pn1{
width:30px;
margin: -25px 10px 10px 20px;
}
.pn2{
width:30px;
margin: 15px 10px 10px 20px;
}
.pn3{
width:30px;
margin: -30px 10px 10px 20px;
}

.pn4{
width:30px;
margin: 30px 10px 10px 30px;
}
.pn5{
width:30px;
margin: 30px 10px 10px 30px;
}
.pn6{
width:30px;
margin: 30px 10px 10px 30px;
}
.pn7{
width:30px;
margin: 30px 10px 10px 30px;
}


.h2{
margin: 20px 10px -10px 0px;
}
.h3{
margin: 0px 10px 0px 0px;
}
.h4{
margin: 350px 10px 0px 0px;
}

.p5{
margin: -10px 10px 0px 20px;
color: black;
}

</style>
</head>
<body>
<p class="p1">发现</p>
<hr class="h1" width=320px size=1 align="center" color="#d1d2d4">
<div id="nav">
<p class="p2">朋友圈</p>
<img src=" 朋友圈.png" class="pn1" />
<hr class="h1" width=320px size=3 align="center" color="#d1d2d4">
<img src="扫一扫.png" class="pn2" />
<p class="p3">扫一扫</p>
<hr class="h2" width=320px size=3 align="center" color="#d1d2d4">
<p class="p4">小程序</p>
<img src="小程序.png" class="pn3" />
<hr class="h3" width=320px size=3 align="center" color="#d1d2d4">
</div >

<div id="nav1">
<hr class="h4" width=320px size=3 align="center" color="#d1d2d4">
<img src="微信.png" class="pn4" />
<img src="通讯录.png" class="pn5" />
<img src="发现.png" class="pn6" />
<img src="我.png" class="pn7" />
<p class="p5">&nbsp;&nbsp;微信&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 通讯录&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; 发现&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;我</p>


</div>

</body>
</html>