模拟QQ音乐微信登录界面

最新推荐文章于 2024-08-26 13:11:04 发布

掠冰-1

最新推荐文章于 2024-08-26 13:11:04 发布

阅读量946

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_36721783/article/details/117840893

版权

本文介绍如何模拟QQ音乐的微信登录界面，通过HTML和CSS实现。关键点包括利用div和span展示元素区别，注意span的margin限制，以及如何通过设置高度和margin使按钮布局与原版一致。在CSS中，探讨了img元素的行内块特性，以及如何通过display属性调整其布局以达到水平居中。

摘要由CSDN通过智能技术生成

模拟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="images/qrcode_qq.png" alt="微信登录">
			<div class="explanation1">请使用微信扫描二维码登录“QQ音乐”</div>
			<span>QQ与微信账号的音乐资产，付费特权不互通</span>
		</div>
        <!-- 上盒子结束 -->
		<