模拟QQ音乐微信登录界面

先上代码

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>QQ音乐-登录界面</title><link rel="stylesheet" href="03-weichat_login.css">
</head>
<body><div class="nav"><!-- 上盒子开始 --><div class="nav_up"><div class="nav_s"><a href="qq_login.html" class="qq">QQ登录</a><a href="weichat_login.html" class="weichat">微信登录</a></div><hr><img src="data:images/qrcode_qq.png" alt="微信登录"><div class="explanation1">请使用微信扫描二维码登录“QQ音乐”</div><span>QQ与微信账号的音乐资产，付费特权不互通</span></div><!-- 上盒子结束 --><div class="client_btn"><a href="#">下载客户端&nbsp;体验更多内容</a></div></div>
</body>
</html>

这里“请使用微信扫描二维码登录“QQ音乐””和“QQ与微信账号的音乐资产，付费特权不互通”两个单行文本，一个用div盒子包住，一个用span标签写是为了体现div块级元素和span行内元素的区别。

需要注意的是：div盒子margin的上下左右值都是有效的，而span标签margin-left和margin-right值有效，而margin-top和margin-bottom值无效。

效果如下图：

还需要注意的是：为了使“下载客户端”这个按钮与QQ登录界面上的下载按钮位置一致，可以如html代码中一样设置个上盒子将按钮上面的布局包在其中并设置高度，两个登录界面中此盒子高度一样即可按标准流将下面的按钮盒子布置在同样的高度，水平居中则可用margin:0 auto。

css代码

* {/*清除浏览器默认内外边距*/margin: 0;padding: 0;
}body {background-color: #ccc;
}a {/*去掉下划线*/text-decoration: none;
}.nav {width: 710px;height: 500px;background-color: white;/*巧用auto使其水平居中*/margin: 130px auto 0;
} .nav_up {height: 420px;
}.nav_s {width: 258px;height: 56px;margin: 0 auto;/*flex布局*/display: flex;/*主轴上子元素两边贴边，然后均分剩余空间*/justify-content: space-between;
}.qq,
.weichat {display: inline-block;line-height: 56px;
}.qq {color: black;
}.weichat {color: #31c27c;
}.qq:hover {color: #31c27c;
}.nav img {display: block;width: 130px;height: 130px;/*巧用auto使其水平居中*/margin: 62px auto 0;
}.explanation1 {width: 260px;height: 30px;font-size: 14px;color: #696969;background-color: #F7F7F7;border-radius: 20px;text-align: center;line-height: 30px;/*巧用auto使其水平居中*/margin: 50px auto 0;
}span {display: block;width: 260px;color: #999;font-size: 12px;text-align: center;/*巧用auto使其水平居中*/margin: 30px auto 0;
}.client_btn {width: 240px;height: 40px;background-color: #31c27c;border-radius: 20px;text-align: center;line-height: 40px;margin: 0 auto;
}.client_btn a {color: white;
}

css代码中需要注意的是：img是行内块（inline-block）元素，它的特点如下：

相邻行内元素（行内块）在一行上,但是之间会有空白缝隙（可以用浮动解决），一行可以显示多个
默认宽度就是它本身内容的宽度
宽度，高度，行高，外边距以及内边距都可以设置

虽然外边距margin值可以设置，但img标签左右外边距设置auto是无效的，所以必须用display:block将其转换为块级元素再设置auto使其水平居中。

模拟QQ音乐微信登录界面相关推荐

请你根据微信登录界面设计测试用例
请你根据微信登录界面设计测试用例参考回答: 一.功能测试 1.输入正确的用户名和密码,点击提交按钮,验证是否能正确登录. 2.输入错误的用户名或者密码,验证登录会失败,并且提示相应的错误信息. 3. ...
Android入门小项目--微信登录界面源码（倒计时、fragement切换、activity信息传递）
微信登录的完全源码,复制粘贴即可使用作为Android学习的入门,一次性搞定Android的布局,让你的view层畅通无阻手机界面插入数据线,将手机调入开发者模式的usb调试,即可进行手机调试安 ...
Erphplogin Pro 连接QQ/微博/微信登录/弹窗登录 WordPress插件
Erphplogin Pro是一款由模板兔开发的wordpress网站用户通过QQ.微博.微信扫码以及弹窗来进行登录的wordpress中文插件.微信登录的接口是微信开发者平台的接口,扫码登录. 本插 ...
QQ支持微信登录，手机QQ与微信联手！
手机QQ支持微信登录了,今天看到有网友说,QQ现在可以用微信登录了,立马登录QQ去看看,果不其然,在登录方式那里选择添加账号,选择微信登录,就可以了. 记得最早的时候,微信是可以用QQ号登录的,目的也 ...
ios 仿电脑qq登录界面_1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）...
开始搭建登录界面登录界面效果图: 步骤开始: 设置辅助窗口的位置在下方快捷键option,然后拖拽复制之后: 这里就直接省去了将背景颜色改为经典黑了. 到这里QQ空间的登录界面搭建完毕. 下面进行 ...
用html写QQ音乐首页,使用HTML5仿制的QQ音乐PC版界面
QQ音乐界面仿制在专业认识实习中,我们通过学习HTML超文本标记语言,提高了静态web前端页面的开发能力,下面就给大家展示一下我们小组仿制的QQ音乐官网界面,只是仿制了PC版,但是部分手机浏览器(Q ...
1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）
开始搭建登录界面登录界面效果图: 相关的图片资源下载百度云备份链接: http://pan.baidu.com/s/1o71cvMU 密码: 2h7e 步骤开始: 设置辅助窗口的位置在下方快捷键o ...
Android学习笔记3---仿微信登录界面
仿微信登录界面有几个东西,分别是 1.欢迎页,2秒跳转 2.用户名只允许为手机号 3.密码不可见 4.以及忘记密码页面跳转主要用了3个控件,分别是:TextView.EditView.Button ...
微信登录画面_微信登录界面的地球变了_微信登录界面首变真相
细心的小伙伴发现在启动微信的时候,那个经典的一个小人剪影面对着地球的画面开始发生了一些变化,似乎云层变得更为清晰细致了.微信登录界面6年来首变化,那么为何改变来的如此突然呢,下面小编就分享给大家! 手 ...

模拟QQ音乐微信登录界面

模拟QQ音乐微信登录界面

模拟QQ音乐微信登录界面相关推荐

最新文章

热门文章