css代码大全登录界面(Div+CSS仿微信公众平台登录页面)
类别:Web前端 浏览量:646
时间:2021-11-05 14:24:53 css代码大全登录界面
Div+CSS仿微信公众平台登录页面本文实例为大家分享了li+CSS仿微信公众平台登录页面的具体代码,供大家参考,具体内容如下
html代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>微信公众平台</title>
- <link rel="stylesheet" type="text/css" href="weixin.css"/>
- </head>
- <body>
- <li id="header" class="head">
- <li class="head_box">
- <li class="inner wrp">
- <h1 class="logo">
- <a title="微信公众平台" href="javascript:void(0);">微信公众平台</a>
- </h1>
- <li class="account">
- <li class="account_meta account_faq">
- <a target="_blank" href="javascript:void(0);">在线客服</a>
- </li>
- </li>
- </li>
- </li>
- </li>
- <li id="body">
- <li class="inner wrp">
- <li class="container_box">
- <li class="login_panel">
- <li class="login_panel_hd">
- <li class="inner">
- <dl class="system_info">
- <dt>微信公众平台接口测试账号申请</dt>
- <dd>无需公众账号、快速申请接口测试号</dd>
- <dd>直接体验和测试公众平台所以高级接口</dd>
- <dd class="icon_sandbox"></dd>
- </dl>
- </li>
- </li>
- <li class="login_panel_bd">
- <li class="wxlogin_wrp">
- <li class="wxlogin_desc">
- <h3>微信号扫一扫登录</h3>
- <p>免注册,方便快捷</p>
- </li>
- <li 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>
- </li>
- </li>
- </li>
- </li>
- </li>
- </li>
- </li>
- </body>
- </html>
CSS代码:
- 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样式有所帮助。
您可能感兴趣
- 微信小程序简易计算器制作(微信小程序实现简单计算器功能)
- python采集微信电脑端聊天信息(利用Python实现微信找房机器人实例教程)
- python 微信发天气信息(python微信聊天机器人改进版定时或触发抓取天气预报、励志语录等,向好友推送)
- php微信支付怎么做(ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解)
- python怎么抽取微信图片(Python 一键制作微信好友图片墙的方法)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序通知验证签名方法(微信小程序实现电子签名)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- 微信小程序怎么绕过人脸的(详解微信小程序官方人脸核身认证)
- thinkphp支付宝支付(thinkPHP和onethink微信支付插件分享)
- python关于微信的模块(python基于itchat模块实现微信防撤回)
- 微信小程序计算器怎么用(用微信小程序实现计算器功能)
- 开发者微信公众号开发流程(微信公众平台开发教程⑥ 微信开发集成类的使用图文详解)
- 如何用python在微信里自动回复(Python实现微信自动好友验证,自动回复,发送群聊链接方法)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- php教程微信支付技术(php微信扫码支付 php公众号支付)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
热门推荐
- dede数据统计(DEDE [field:global name=autoindex/] 按序号排列从0从1开始)
- laravel关联查询限制数量(laravel-admin 后台表格筛选设置默认的查询日期方法)
- angular定义一个管道(Angular管道PIPE的介绍与使用方法)
- idea发布项目在tomcat哪个目录下(idea发布web项目后Tomcat服务器找不到该项目的问题及解决方法)
- 百度智能云安全教程(百度云服务器安全组开放端口配置图文教程)
- 微信小程序计算器怎么用(用微信小程序实现计算器功能)
- uiapp入门(amaze ui 的使用详细教程)
- 微信公众号文章 爬虫(python抓取搜狗微信公众号文章)
- 私有云服务器是什么意思(私有云服务器选择配置的依据是什么?)
- sql server2012自动备份(SQL SERVER 2012数据库自动备份的方法)