呃…我的第一个仿网页,微信,
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结束 */
效果图