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样式有所帮助。
您可能感兴趣
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 如何用python识别微信内容(Python 实现微信防撤回功能)
- 开发者微信公众号开发流程(微信公众平台开发教程⑥ 微信开发集成类的使用图文详解)
- python微信红包分配(PHP切割整数工具类似微信红包金额分配的思路详解)
- python 提取微信消息(python实现文件助手中查看微信撤回消息)
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- python获取微信用户(python-itchat 获取微信群用户信息的实例)
- 微信公众号文章 爬虫(python抓取搜狗微信公众号文章)
- php开发微信小程序后台步骤流程(基于PHP实现微信小程序客服消息功能)
- python发送微信消息脚本(python实现微信定时每天和女友发送消息)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- thinkphp框架实例(ThinkPHP框架整合微信支付之JSAPI模式图文详解)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- python如何获取微信好友(利用Python查看微信共同好友功能的实现代码)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
热门推荐
- tomcat运行警告(tomcat异常解决Invalid character found in the request target. The valid characters are defined in)
- js验证身份证号
- php命名空间真的存在吗(PHP中命名空间的使用例子)
- python数据存取(python异步存储数据详解)
- apache和yii域名配置(yii框架数据库关联查询操作示例)
- php查询数据库给变量赋值(详解PHP变量传值赋值和引用赋值变量销毁)
- 阿里云ecs服务器数据在哪儿(阿里云ECS云服务器linux系统安装mysql后远程连接不了踩坑)
- sqlserver代理无法启动错误1607(SQL Server代理:理解SQL代理错误日志处理方法)
- pythonmatplotlib画图流程(python3使用matplotlib绘制条形图)
- mysql拆分成多行(mysql单字段多值分割和合并的处理方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9