Div+CSS仿微信公众平台登录页面

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )

本文实例为大家分享了Div+CSS仿微信公众平台登录页面的具体代码，供大家参考，具体内容如下

html代码：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信公众平台</title>
<link rel="stylesheet" type="text/css" href="weixin.css"/>
</head>
<body>
<div id="header" class="head">
<div class="head_box">
<div class="inner wrp">
<h1 class="logo">
<a title="微信公众平台" href="javascript:void(0);">微信公众平台</a>
</h1>
<div class="account">
<div class="account_meta account_faq">
<a target="_blank" href="javascript:void(0);">在线客服</a>
</div>
</div>
</div>
</div>
</div>
<div id="body">
<div class="inner wrp">
<div class="container_box">
<div class="login_panel">
<div class="login_panel_hd">
<div class="inner">
<dl class="system_info">
<dt>微信公众平台接口测试账号申请</dt>
<dd>无需公众账号、快速申请接口测试号</dd>
<dd>直接体验和测试公众平台所以高级接口</dd>
<dd class="icon_sandbox"></dd>
</dl>
</div>
</div>
<div class="login_panel_bd">
<div class="wxlogin_wrp">
<div class="wxlogin_desc">
<h3>微信号扫一扫登录</h3>
<p>免注册，方便快捷</p>
</div>
<div class="wxlogin_opr">
<p class="btn_line">
<a id="wx_loginBtn" class="btn btn_primary btn_wxlogin" href="javascript:void(0);">
<img class="icon_wxlogo_inbtn" src="/images/weixin.png"></img>
登录
</a>
</p>
<p>
若你已注册手机账号，请
<a id="phone_loginBth" href="javascript:void(0);">点此登录</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

CSS代码：

CSS Code复制内容到剪贴板

body{
min-width: 1200px;
background-color: #e7e8eb;
font-family: "Microsoft YaHei","微软雅黑"，Helvetica,"黑体"，Arial,Tahoma;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.head_box{
position: relative;
background-color: #fff;
border-top: 4px solid #44b549;
border-bottom: 1px solid #d9dadc;
}
.head_box .inner.wrp{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.head_box .inner{
height: 60px;
}
.logo{
float: left;
padding-top: 8px;
font-size: 24px;
}
.logo a{
display: block;
width: 248px;
height: 40px;
overflow: hidden;
text-decoration: none;
color: #595959;
margin-top: -15px;
}
.account{
float: rightright;
padding-top: 10px;
}
.account_meta{
display: inline-block;
vertical-align: top;
font-size: 14px;
}
.account_meta a{
text-decoration: none;
color: #222;
display: inline-block;
margin-top: 18px;
}
#body{
width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 2.5em 0 3.5em;
}
.container_box{
min-height: 650px;
overflow: hidden;
border: 1px solid #d3d3d3;
background-color: #fff;
box-shadow: 0 2px 2px 0 #e3e3e3;
border-radius: 3px;
}
.login_panel_hd{
height: 140px;
margin-bottom: 50px;
background: transparent url(/images/weixin2.png) no-repeat 0 0;
}
.login_panel_hd .inner{
padding: 24px;
}
.login_panel_hd .system_info{
position: relative;
margin-left: 120px;
color: #fff;
}
dt{
font-size: 22px;
}
dd{
font-size: 16px;
margin: 0px;
}
.login_panel_bd{
margin: 0 50px;
}
.login_panel_bd .wxlogin_wrp{
text-align: center;
}
.login_panel_bd .wxlogin_desc{
margin-bottom: 20px;
}
.login_panel_bd .wxlogin_desc h3{
font-weight: 400;
font-style: normal;
font-size: 16px;
margin: 0;
}
.login_panel_bd .wxlogin_desc p{
margin: 0px;
}
.login_panel_bd .wxlogin_wrp .wxlogin_opr .btn_line{
padding-bottom: 20px;
}
.btn{
min-width: 60px;
display: inline-block;
overflow: visible;
padding: 0 22px;
line-height: 30px;
vertical-align: middle;
text-align: center;
font-size: 14px;
border-width: 1px;
border-style: solid;
cursor: pointer;
color: #fff;
}
.btn_primary{
background-color: #44b549;
}
.icon_wxlogo_inbtn{
vertical-align: middle;
margin-right: 5px;
border: 0;
}
a{
text-decoration: none;
color: #459ae9;
outline: 0;
}

总结：

css中的vertical-align:middle;表示垂直居中的意思

line-height: 30px;表示行高30px;

overflow: visible/hidden;表示溢出的部分可见/隐藏

border-radius: 3px;表示圆角边框的半角为3px。

以上就是本文的全部内容，希望对大家学习CSS样式有所帮助。

上一篇：CSS3使用多列制作瀑布流
下一篇：Div+CSS仿支付宝登录页面