本文实例为大家分享了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样式有所帮助。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年10月05日
2024年10月05日
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]