HTML5期末大作业:品优购项目网站设计——品优购项目(7页)含设计 HTML+CSS+JavaScript
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录</title>
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入我们初始化的css -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入我们自己的注册页面的css -->
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="w">
<header>
<div class="logo">
<a href="index.html"> <img src="images/logo.png" alt=""></a>
</div>
</header>
<div class="registerarea">
<h3>登录
<div class="zhuce">我没账号,去<a href="./register.html">注册</a></div>
</h3>
<div class="saoma_login">
<h4>扫码登录</h4>
<div class="img">
<img src="./images/下载.jpg" alt="">
<p>
使用品优购APP扫一扫
<br>
手机可打开「品优购APP」>「扫码登录」
</p>
</div>
</div>
<div class="txt_login">
<h4>账户密码登录</h4>
<form action="">
<ul>
<li>
<label for="">账户:</label>
<input type="text" class="inp" placeholder="请输入账户" required maxlength="11" minlength="11" autofocus>
</li>
<li>
<label for="">密码:</label>
<input type="password" class="inp" placeholder="请输入密码" required maxlength="16" minlength="6">
</li>
<li>
<button>登录</button>
</li>
</ul>
<p>
<a class="ps" href="#">手机验证码登录</a> / <a class="psa" href="./register.html">手机号注册</a>
</p>
<div class="zhuce">
<span><a href="./register.html">立即注册</a></span>
<span><a href="#">忘记密码</a></span>
</div>
</form>
</div>
</div>
<footer>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
品优购公益 | English Site | Contact U
</div>
<div class="copyright">
地址:河南省郑州市新郑市龙湖镇河南机电职业学院 邮编:123456 电话:132-123-1234 传真:132-45678912 邮箱: 123456789@qq.com <br>
豫ICP备13245678号京公网安备1324567890
</div>
</div>
</footer>
</div>
</body>
</html>
四、获取更多源码
~ 关注我,点赞博文~ 每天带你涨知识!
相关问题可以相互学习,可关注↓公Z号 获取更多源码