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

时间：2021-05-08

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

html代码：

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

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>微信公众平台</title>

<linkrel="stylesheet"type="text/css"href="weixin.css"/>

</head>

<body>

<divid="header"class="head">

<divclass="head_box">

<divclass="innerwrp">

<h1class="logo">

<atitle="微信公众平台"href="javascript:void(0);">微信公众平台</a>

</h1>

<divclass="account">

<divclass="account_metaaccount_faq">

<atarget="_blank"href="javascript:void(0);">在线客服</a>

</div>

<divid="body">

<divclass="innerwrp">

<divclass="container_box">

<divclass="login_panel">

<divclass="login_panel_hd">

<divclass="inner">

<dlclass="system_info">

<dt>微信公众平台接口测试账号申请</dt>

<dd>无需公众账号、快速申请接口测试号</dd>

<dd>直接体验和测试公众平台所以高级接口</dd>

<ddclass="icon_sandbox"></dd>

</dl>

</div>

<divclass="login_panel_bd">

<divclass="wxlogin_wrp">

<divclass="wxlogin_desc">

<h3>微信号扫一扫登录</h3>

</div>

<divclass="wxlogin_opr">

<pclass="btn_line">

<aid="wx_loginBtn"class="btnbtn_primarybtn_wxlogin"href="javascript:void(0);">

<imgclass="icon_wxlogo_inbtn"src="/images/weixin.png"></img>

</a>

</p>

<p>

若你已注册手机账号，请

<aid="phone_loginBth"href="javascript:void(0);">点此登录</a>

</p>

</div>

</body>

</html>

CSS代码：

CSS Code复制内容到剪贴板

body{

min-width:1200px;

background-color:#e7e8eb;

font-family:"MicrosoftYaHei","微软雅黑"，Helvetica,"黑体"，Arial,Tahoma;

font-size:14px;

line-height:1.6;

margin:0;

}

.head_box{

position:relative;

background-color:#fff;

border-top:4pxsolid#44b549;

border-bottom:1pxsolid#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;

}

.logoa{

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_metaa{

text-decoration:none;

color:#222;

display:inline-block;

margin-top:18px;

}

#body{

width:1200px;

margin-left:auto;

margin-right:auto;

padding:2.5em03.5em;

}

.container_box{

min-height:650px;

overflow:hidden;

border:1pxsolid#d3d3d3;

background-color:#fff;

box-shadow:02px2px0#e3e3e3;

border-radius:3px;

}

.login_panel_hd{

height:140px;

margin-bottom:50px;

background:transparenturl(/images/weixin2.png)no-repeat00;

}

.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:050px;

}

.login_panel_bd.wxlogin_wrp{

text-align:center;

}

.login_panel_bd.wxlogin_desc{

margin-bottom:20px;

}

.login_panel_bd.wxlogin_desch3{

font-weight:400;

font-style:normal;

font-size:16px;

margin:0;

}

.login_panel_bd.wxlogin_descp{

margin:0px;

}

.login_panel_bd.wxlogin_wrp.wxlogin_opr.btn_line{

padding-bottom:20px;

}

.btn{

min-width:60px;

display:inline-block;

overflow:visible;

padding:022px;

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;

}

text-decoration:none;

color:#459ae9;

outline:0;

}

总结：

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

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

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

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

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

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

相关文章

DIV+CSS实现仿DreamWeaver界面图形菜单效果代码

DIV+CSS实现仿京东商城导航条效果

Div+CSS仿支付宝登录页面

DIV+CSS布局的网站对网站SEO的影响分析

如何对网站代码进行SEO优化?