首次博客-css仿微信官网

最新推荐文章于 2023-04-26 12:22:35 发布
最新推荐文章于 2023-04-26 12:22:35 发布
阅读量334 收藏 3
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46323591/article/details/105910445
版权

呃…我的第一个仿网页，微信，

html:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>
	<link rel="stylesheet icon" href="../image/wxin.ico" type="../">
	<title></title>
</head>
<body>
	<!-- head头部 -->
	  <div id="head" class="w">
		  <a href=""><img src="../image/logo.png" alt="" class="logo"></a>
		  <ul>
		  	<li>
				<a href="" class="a-ts">
			         <span class="span-ts">首页</span>
			    </a>
			</li>
			<li>
				<a href="">
			         <span>帮助与反馈</span>
			    </a>
			</li>
			<li>
				<a href="">
			         <span>公众平台</span>
			    </a>
			</li>
			<li>
				<a href="">
			         <span>开发平台</span>
			    </a>
			</li>
			<li>
				<a href="">
			         <span>微信支付</span>
			    </a>
			</li>
			<li>
				<a href="">
			         <span>微信广告</span>
			    </a>
			</li>
			<li>
				<a href="">
			         <span>企业微信</span>
			    </a>
			</li>
			<li>
				<a href="">
			         <span>表情开放台</span>
			    </a>
			</li>
			<li>
				<a href="">
			         <span>微信网页版</span>
			    </a>
			</li>
		  </ul>
	  </div>
	  <!-- head结束-->
	  
	  <!-- headArr开始-->
	  <div id="headArr" class="w">
		  <!-- head-z-->
		  <div class="head-z">
			  <h2>微信，是一个生活方式</h2>
			  <div class="tph">
				  <p>超过十亿人使用的手机应用</p>
				  <p>支持发送语音短信、视频、图片和文字</p>
				  <p>可以群聊，仅耗少量流量，适合大部分智能手机</p>
			  </div>
			  <a href="" class="a-ts2">
				  <div class="bj-img"></div>
				  <img src="../image/xiazai.png" alt="" class="xzai">
				  
			  </a>
			  <ul class="aof-ul">
			  	<li><a href="">忘记了微信帐号或密码？</a></li>
			  	<li><a href="">自助解除登录或功能限制</a></li>
			  	<li><a href="">冻结或解冻微信帐号</a></li>
			  </ul>
		  </div>
		  <!-- head-y-->
		  <div class="head-y">
			   <a href="" class="anniu-z"></a>
			   <a href="" class="anniu-y"></a>
					<span>
						微信 for iOS / Android 
						<br>
						<a href="">iOS 7.0.12</a>
						<a href="">Windows 2.9.0</a>
					</span>
			   <img src="../image/2vAOmr0.png"/>
			  <div class="a-ts3">
					<a href=""></a>
					<a href="" class="ts4"></a>
					<a href=""></a>
			  </div>
		  </div>
	  </div>
	  <!-- headArr结束-->
	  <!-- headAtofthe开始-->
	  <div id="headAtofthe" class="w">
		  <!-- aofthe-z-->
		  <div class="aofthe-z">
			<div class="wx-1">
				<a href="" class="a-nao1"></a>
				<ul>
					<li><h5>微信网页版</5></li>
					<li><p>扫一扫二维码</p></li>
					<li><p>就能在浏览器上使用微信</p></li>
					<li><a href="">了解更多</a></li>
				</ul>
			</div>
			<div class="wx-2">
				   <a href="" class="a-nao2"></a>
				<ul>
					<li><h5>微信 Mac 版</h5></li>
					<li><p>极致简洁，迅捷沟通</p></li>
					<li><a href="">了解更多</a></li>
				</ul>
			</div>
			<div class="wx-3">
				   <a href="" class="a-nao3"></a>
				<ul>
					<li><h5>微信 Windows 版</h5></li>
					<li><p>让沟通更方便</p></li>
					<li><a href="">了解更多</a></li>
				</ul>
			</div>
		  </div>
		  
		  <!--aofthe-y-->
		  <div class="aofthe-y">
			 <div class="advertising">
				<h5>最新消息</h5>
				<ul>
					<li><a href="">微信 7.0.14 for Android 正式版发布</a><i>(New)</i><span>04-30</span></li>
					<li><a href="">微信 2.9.0 for Windows 正式版发布</a><i>(New)</i><span>04-16</span></li>
					<li><a href="">微信 7.0.12 for iOS 正式版发布</a><i>(New)</i><span>03-22</span></li>
					<li><a href="">微信 2.3.30 for Mac 正式版发布</a><span>02-28</span></li>
					<li><a href="">关于部分 iOS 9 用户无法更新微信</a><i>(New)</i><span>01-28</span></li>
					<li><a href="">微信外部链接内容管理规范</a><span>02-11</span></li>
					<li><a href="">微信网页版 2.1 版本发布</a><span>01-17</span></li>
					<li><a href="">微信表情开放平台上线</a><span>07-29</span></li>
					<li><a href="">官方辟谣公众号开通</a><span>10-28</span></li>
				</ul>
				<a href="" class="toview">查看更多</a>
				<div class="soulo">
					<img src="../image/soulo.png" alt="">
					<a href="">联系我们</a>
				</div>
			 </div>
		  </div>
	  </div>
	  <!-- headAtofthe结束-->
	 
	  <!-- theBottom开始-->
	  <div id="thBottom" class="w">
		  <!-- zm-z-->
		  <div class="tm-z">
			   <div class="information">
				   <a href="">关于腾讯</a>|
				   <a href="">服务条款 </a>|
				   <a href="">使用规范</a>|
				   <a href="">客服中心</a>|
				   <a href="">隐私保护指引</a>
			   </div>
			   <p> © 2020-5-3 - 2020 Tencent Inc. All Rights Reserved</p>
		  </div>
		    <!-- zm-y-->
			<div class="zm-y">
				<a href="">简体中文</a>|
				<a href=""> 繁體中文</a>|
				<a href="">English</a>
			</div>
	  </div>
	  <!-- TheBottom结束-->
</body>
</html>

css:

*{
	margin:0;
	padding: 0;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 padding: 0;
 margin: 0;
 }
 li{
	 list-style: none;
 }
 a{
	 text-decoration: none;
 }
 body{
	 background: url(../image/banxin.jpg) repeat-x;
 }
 .w{
	 width: 968px;
	 margin: auto;
 }
/* <!-- head开始 --> */
 #head{
	 height: 75px;

 }
 #head .logo{
	 float: left;
	 margin-top:15px;
	 width: 129.63px;
	 height: 44px;
	
 }
  #head ul {
	  float: right;
	  margin-top:20px;
	  
  }
  #head ul li{
	  float: left;
	
	  
  }
  #head li a,
  #head li a span{
	  display: inline-block;
	  height: 33px;
	  line-height: 33px;
	  font-size: 14px;
  }
    #head li a{
		padding-left: 10px;
		color: #fff;
		margin: 0 3px;
	}
	#head a span{
		padding-right: 10px;
		
	}
	#head li a:hover{
		background: url(../image/ww.png) no-repeat;
	}
	#head li a:hover span{
		background: url(../image/ww.png) no-repeat right top;
		}
	#head .a-ts{
		font-weight: 700;
		background: url(../image/ww.png) no-repeat;
	}
	#head .span-ts{
		background: url(../image/ww.png) no-repeat right top;
	}
/* head结束*/



/*headArr开始-*/

#headArr{
	height: 422px;
	
	
}
#headArr .head-z{
	float: left;
	margin-top:50px;
	
}
#headArr h2{
	font-size: 26px;
	font-weight: 400;
}
#headArr .tph{
	margin:15px 0;
	color: #979797;

}
#headArr .tph p{
	margin-bottom: 7px;
}
.head-z {
	
}
.head-z .a-ts2{
	position: relative;
	width: 226px;
	height: 64px;

}
.head-z .a-ts2:hover{
	color:#red;
}

#headArr .aof-ul{
	margin-top: 10px;
	padding-left: 20px;
}
 .aof-ul li{
	font-size: 14px;
	list-style: inherit;
	color: #999999;
	font-size: 16px;
}
.aof-ul li a{
	color: #609700;
	font-size: 12px;
}
.aof-ul li a:hover{
	text-decoration: underline;
}
.head-y{
	height: 350px;
	position: relative;
	float:right;
	margin-right: 70px;
	margin-top:20px;
} 
.anniu-z, .anniu-y{
	position: absolute;
	top:50%;
	matin-top:17.5px;
	width: 35px;
	height: 35px;
	border-radius: 10px;
}
.head-y:hover .anniu-z{
	left:-30px;
	background:url(../image/DxopYJv.png) no-repeat -18px -13px;
}
.head-y:hover .anniu-y{
	right:-30px;
	background:url(../image/DxopYJv.png) no-repeat -70px -13px;
}
.head-y img{
	margin:auto;
}

.head-y span{
	position: absolute;
	left: 50%;
	margin-left: -125px;
	bottom: 20px;
	width: 250px;
	text-align: center;
	color: #0B0B0B;
	font-size: 14px;
}
.head-y span a{
	color: #74A223;
	font-size: 14px;
	margin-left: 15px;
}
.head-y .li-ts{
	position: absolute;
	left:50%;
	margin-left:-20px;
	bottom: -40px;

}
.head-y .a-ts3{
	position: absolute;
	left: 50%;
	bottom:-40px;
	width: 75px;
	margin-left: -34px;

}
.a-ts3 a{
	display: inline-block;
	width: 11px;
	height: 11px;
	line-height: 11px;
	padding: 0 5px;
	text-align: center;
	background:url(../image/DxopYJv.png) no-repeat -42px -116px;
}
.a-ts3 .ts4{
	background:url(../image/DxopYJv.png) no-repeat -18px -116px;
}
/*headArr结束-/


/*  headAtofthe开始 */
#headAtofthe{
	width: 970px;
	margin-top:70px;
	height: 500px;
	/* border: 1px red solid; */
}

#headAtofthe .aofthe-z{
	padding: 0;
	float: left;
	margin-left:15px;
/* 	border: 1px red solid; */
}
 .aofthe-z div{
	 float: left;
	 margin-right: 15px;
 }
  .aofthe-z  ul{
	  margin-top: 5px;
  }
  .aofthe-z  ul li{
	margin-bottom: 7px;	
  }
  .aofthe-z  ul li h5{
	  font-size: 14px;
  }
  .aofthe-z  ul li p{
	  font-size: 14px;
	  color: #999999;
  }
   .aofthe-z  li a{
	   font-size:14px;
	   color: #609700;
   }
   .aofthe-z  li a:hover{
	   color:#333;
	   text-decoration: underline;
   }
 .a-nao1,
 .a-nao2,
 .a-nao3{
	 display: inline-block;
	 width: 200px;
	 height: 114px;
	 margin-bottom: -2px;
 }
.a-nao1{
	  background: url(../image/1oPgjZ4.png) no-repeat 0px 0px ;
  }
.a-nao2{
	  background: url(../image/1oPgjZ4.png) no-repeat -218px -1px ;
  }
.a-nao3{
	  background: url(../image/1oPgjZ4.png) no-repeat -436px -1px ;
  }
  /* aofthe-y*/
 .aofthe-y{
	  float: left;
/* 	  border: 1px red solid; */
  }
 .advertising{
	  margin-left: 10px;
	  float:right;
  }
.advertising h5{
	margin-bottom: 10px;
}
.advertising  li{
	margin-bottom:10px;
	list-style-type:disc;
	font-size: 14px;
	color: #999999;
}
.advertising ul li a{
	color: #609700;
}
.advertising ul li a:hover{
	text-decoration: underline;
	color: #333333;
}
.advertising ul li i{
	font-style: normal;
	color: #FF0000;
	font-size: 12px;
}
.advertising ul li span{
	float:right;
	font-size: 12px;
	font-weight: 100;
	color: #99A6C4;
}
.advertising .toview{
	color: #609700;
	font-size: 14px;
	margin-left: -6px;
}
.advertising .soulo{
	margin-top:20px;
	margin-left:-15px;
	/* border: 1px red solid; */
}
.advertising .soulo img{
	vertical-align: middle;
/* 	border: 1px red solid; */
}
 .soulo a{
	 font-size: 14px;
	 font-weight: 700;
	 color: #333;
	 display: inline-block;
	
}
/*  headAtofthe结束 */

/* theBottom开始 */
#thBottom{
	height: 60px;
	border-top:1px #D4DADF solid;
	padding-top:12px;
}
#thBottom .tm-z{
	color:#888888;
	font-size: 12px;
	float:left;
	border:1p red solid;
}
.information{
	margin-bottom: 10px;
}

#thBottom .tm-z a{
	margin:0 6px;
	padding: 0 ;
	color:#888888;
}
#thBottom .zm-y{
	float:right;
	}
#thBottom .zm-y{
	font-size:12px;
	color:#888888;
}
#thBottom .zm-y a{
	color: #888888;
	margin:0 7px;
}
/* theBottom结束 */

效果图
在这里插入图片描述

在这里插入图片描述

尹太初
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序学习指南
weixin_30446197的博客
12-13 3340
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
Taro 1.2：将已有微信小程序转换为多端应用
凹凸实验室
12-18 691
在距离 Taro 1.1 发布 之后一个月，经历了 500 多次提交和 17 个预览版本的迭代之后，我们有信心在今天发布 Taro 1.2 正式版。Taro 1.2 比起 Taro 1.1 和其它的小程序开发框架，增加了许多首次在小程序框架上实现的功能，这些功能包括但不限于：微信小程序转多端应用字节跳动（头条）小程序支持CSS Modules 支持MobX 支持微信小程序转多端应用就像博客大战时代...
模仿微信官网页面布局
01-07
使用div ul 等标签以及使用定位position和float浮动模仿微信官网页面布局，只有静态页面没有动态效果。
html模仿微信支付页面
04-05
html css jquery 模仿微信支付页面，用于微信公众号支付，展示微信支付页面。jquery微信支付代码
仿写 微信 界面
09-25
网上找的的一份源码，基本实现了微信的所有界面，对于Dialog，动画等UI元素的使用都有很好的借鉴意义。
HTML5仿微信朋友圈图片展示特效代码
03-20
总的来说，HTML5仿微信朋友圈图片展示特效代码是一个结合了HTML5新特性的网页图片展示解决方案，旨在提供与微信类似的操作体验，适用于个人网站、博客或者任何需要展示多张图片的场景。通过学习和理解这个代码，...
华众6.5模板仿万网
10-05
【华众6.5模板仿万网】是一个针对网站建设和管理的模板系统，它借鉴了知名网站万网的设计风格和用户体验，为用户提供了一套高效、便捷的建站工具。这套模板系统旨在帮助用户快速构建出专业且具有吸引力的网站，减少...
iOS：iOS开发非常全的三方库、插件等等
dienangpiao2051的博客
09-23 7324
iOS开发非常全的三方库、插件等等 github排名:https://github.com/trending, github搜索：https://github.com/search. 此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 一、UI 下拉刷新 EGOTableViewPullRefresh- 最早...
最全网络全部仿webqq界面总结,HTML+CSS
09-17
用了很长时间整理得到的。。挺辛苦的。希望能得到点辛苦费吧。谢谢大家。
html5实现的仿网页版微信聊天界面效果源码.zip
07-04
这是一款基于html5实现的仿网页版微信聊天界面效果源码，可实现微信网页版聊天界面效果，在编辑框编辑文字之后按Ctrl Enter键即可提交文字到聊天对话框上。整体效果流畅逼真，是一款比较经典的HTML5特效源码。建议使用支持HTML5与css3效果较好的火狐或谷歌等浏览器预览本源码。
仿写微信Demo
aluoshiyi的博客
10-30 1201
今年上半年的时候，当时为了练习Swift和RAC，萌生了利用空余时间写一个仿写微信的想法，今天我就要来王婆卖瓜，自卖自夸了，哈哈哈哈哈。 截止今天已经完成：（微信参照版本：6.7.2） 微信首页（下拉显示小程序，点击进入聊天详情界面，语音消息，图片消息，文字消息） 通讯录（联系人字母排序） 发现 我（界面） 部分截图： 下面计划半年内完成的功能： 首页 （文字消息，表...
SSM+Websocket实现微信网页版仿写
qq_44196763的博客
03-18 902
微信网页版仿写聊天思路WebSocket部分一.后端WebSocketChat类ServerManager类SendMyMessage类二.前端WebSocket主要页面展示1.注册登录页面2.和好友聊天3.群聊4.添加好友5.群聊管理6.更换头像(用户和群聊)7.查看好友个人信息源码下载:无法访问github项目地址总结 聊天思路 在一个窗口发送消息,确保其他建立了连接的窗口能够接收到这个消息。 1.和好友聊天:提供sendUid和receiveUid,对当前登录用户id判断是否和该receiveUid一
css 微信首页案例
Shao_mou_ren的博客
11-29 331
如图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } bod...
仿微信5.4UI （一）
u010666022的专栏
10-28 477
最近比较闲，打算仿照微信做一遍UI，功能部分的话能做多少算多少吧。。
EMLOG仿微信主题模板V3.11
最新发布
SEO资源下载
04-26 93
一款基于emlog博客系统的高仿微信主题模板主题设计来源于某信UI，界面简洁，特别适用于个人博客,日记等建站。全站PC移动端自适应，无任何阻碍。V3.1更新1.增加友联功能2.消息页面 page/message。
【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
lxidw7的博客
04-15 1528
能学习写好这个首页，就能掌 握HTML网页设计前端盒子的布局、嵌套，及css效果的 使用...
html网页设计仿微信首页
qq_65208855的博客
05-20 2442
最近学习了h5c3 ，做了个仿微信首页，浅发一下吧~ 聊天内容虚构，仅供参考！ 效果图如下所示 话不多说，核心代码 html设置 <body> <!-- 顶部 --> <div class="a1 ee"> <div class="a1_b1">微信</div> <div class="a1_b2"> <div class="a1_c1"><img src="image.
Div+CSS仿微信登录页面实现教程与代码示例
本文将详细介绍如何使用Div+CSS技术来创建一个仿微信公众平台登录页面的实例。首先，我们了解到这是一篇针对前端开发者的教程，主要关注HTML和CSS的编码技巧。HTML部分，作者提供了详细的代码段落，展示了如何构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值