仿朋友圈页面(超小白)_罡罡同学的博客-程序员秘密

技术标签: css  仿app  html  css3  

我是罡罡同学,一位初入网安的小白。☜(ˆ▽ˆ)
(疯狂暗示 点赞 !关注!转发 !!! 点赞 !关注!转发 !!!

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

在这里插入图片描述

<!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>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_46625346/article/details/115105472

智能推荐

vue-cli脚手架Vue2.x与Vue3.x安装与预设_脚手架如何安装2.x_麦圈先生的博客-程序员秘密

https://next.router.vuejs.org/vue路由https://v3.cn.vuejs.org/vue官网Vue.js中this.$nextTick()的使用vue里ref ($refs)用法

JDom输出UTF-8的XML出现中文乱码完美解决_jd路径输出怎么会出现文字_A洛的博客-程序员秘密

完美的解决方法从辟谣开始:1)JDOM是否生成UTF-8的文件与Format是否设置无关,只有输出其他字符编码才需要设置,见下面的注释。2)JDOM输出UTF-8文件乱码的根本原因并非在JDOMAPI,而是在JDK。具体描述:    JDOM的输出类XMLOutputter有两个output接口,除了都具有一个Document参数外,分别接受Writer和O

生活中点滴_chenjun840168660的博客-程序员秘密

机械轴键盘  cherry(樱桃) , mx swithch  和ml switch(薄膜式) ;mx 系列主要分黑、青、茶、白、红四种轴;特点:青轴 :机械性最强,click 声音比较大,段落感最强,较有节奏感;黑轴:段落感最弱,直上直下,压力克数大,触发键程短,游戏性较好;茶轴:结合了青轴和黑轴的特点,段落感不是很强又不是直上直下的感觉,适合大众;白轴:段落感比茶轴强,

认识区块链,认知区块链— —通证、公链_MavenTalk的博客-程序员秘密

引子:上周末分享会,胡子俱乐部请到了两位已经有区块链落地实践的大咖,一个是专注于联盟链的金股链,另外一个就是专注于内容分发领域的ulord。会议议题主要集中在公链的发展以及落地的实践。一上午的讨论,意犹未尽。期间就比较关注的内容,做了笔记,分享给大家。前两年有个提法叫ABC,翻译下就是AI,BigData,Cloud。短短一年提法升级为ABCD,意为AI,Block Chain,Cloud...

H3C 路由器NAT及远程telnet配置_weixin_34268310的博客-程序员秘密

&lt;H3C&gt;display cu#acl number 2000rule 1 permit source 172.0.0.0 0.255.255.255rule 2 permit source 160.0.4.0 0.0.0.255rule 3 permit source 173.66.66.0 0.0.0.255#vlan 1#local-user ...

随便推点

opengis介绍_cnstartech的博客-程序员秘密

OpenGIS定义了一组基于数据的服务,而数据的基础是要素(Feature)。所谓要素简单地说就是一个独立的对象,在地图中可能表现为一个多边形建筑物,在数据库中即一个独立的条目。要素具有两个必要的组成部分,几何信息和属性信息。OpenGIS将几何信息分为点、边缘、面和几何集合四种:其中我们熟悉的线(Linestring)属于边缘的一个子类,而多边形(Polygon)是面的一个子类。也就是说Open

springboot整合TCP接收文件_springboot接收tcp请求_phoenix_xqq的博客-程序员秘密

TCPConnect.javaimport org.apache.logging.log4j.LogManager;import org.apache.logging.log4j.Logger;import org.springframework.boot.ApplicationArguments;import org.springframework.boot.ApplicationRunner;import org.springframework.stereotype.Component;.

Windows DDK中经典的宏——CONTAINING_RECORD_ddkspec 宏_李朝淋的博客-程序员秘密

#define CONTAINING_RECORD(address, type, field) ((type *)( \                                                  (PCHAR)(address) - \                                                  (ULONG_PTR)(&((t

XMLHttpRequest在请求失败(Origin null is not allowed by Access-Control-Allow-Origin.)_LXP的博客-程序员秘密

错误解释:跨域我尝试了chrome、firfox、opera都出现了这种情况,但是使用IE8就不会出现这种错误,很多人不是很理解。这里Windows help and support 做出了解释 IE本身也并不是允许跨域的因为这样很不安全,但是如果不跨域的话又带来很多不便,所以会让你手动的选择一下是否允许跨域。而chrome、firfox、opera则默认就是不允许。参考文章:

C# Task.Run 和 Task.Factory.StartNew 区别_c# task.run(async () =>_正怒月神的博客-程序员秘密

一,问题最近有水友提了个问题。Task task = Task.Factory.StartNew(async () =&gt; { while (true) { await Task.Delay( 1000); } } Task.WaitAll(new Task[] { task });结果运行到await Task.Delay( 1000);直接跳出了while,导致 Task.WaitAll完成了,这是怎么回

DNS解析偶尔延迟_weixin_34019144的博客-程序员秘密

DNS解析偶尔延迟,发生的时间都在早高峰上班时间。看系统日志报错如下:May 18 11:04:54 it-aa kernel: [3390259.778899] nf_conntrack: table full, dropping packet.May 18 11:04:54 it-aa kernel: [3390259.836110] nf_...

推荐文章

热门文章

相关标签