HTML+CSS仿写京东登陆页⾯附代码（web前端期末⼤作业）cc
本来想加上JS实现选项卡功能的，奈何本⼈⽔平实在有限，⽤JavaScript⽤到⼀半就放弃了，真的不会使⽤啊给你们看看效果吧。
flask如何部署整体布局
个⼈认为我这个整体布局还是⽐较科学的，把这个界⾯分成了三个div部分，整体还是display:block上⾯的欢迎登录界⾯，中间的主界⾯包括登录框，下⾯的版权和关于我们。我毕竟是初学者，当然就是只会⽤div盒⼦⼀点⼀点做了哈哈哈
由于考虑到css可能要写⽐较多，所以分为了两个css来写，⼀个是base.css主要⽤于设置⼀些基础预设，另⼀个是main.css主要⽤于写各⽅⾯的细节。
登录界⾯
这个是我本⼈花了最长事件的地⽅，因为这⾥运⽤的知识很多，各种布局⽅式，input等等，包括后⾯的第三⽅登录框和⽴即注册⽤了⼀个弹性布局，效果还是⽐较美观的。
细节⽅⾯
作为⼀名初学者，当然要养成代码写注释的好习惯了，另外规范命名（学好英语很重要，尽量不要拼⾳命名了）提⾼了代码的可读性。关于图标和图⽚在哪，其实百度解决百分之95的问题，还有些⼩图标实在是不知道往哪⾥了，我就去，这⾥基本常⽤的图标都得到，虽然不到⼀模⼀样，类似的也总得到了。
废话不多说，开始整代码
HTML（index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东-欢迎登录</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- 顶部 -->
<div class="top">
<!-- 左边 -->
<div class="logo">
<img src="img/logo.png" alt="" class="logo">
<h2 class="wel">欢迎登录</h2>
</div>
spaceflight下载地址<!-- 右边 -->
<div class="survey">
<img src="img/massage.png" alt="" >
<a href="#">登录页⾯，调查问卷</a>
</div>
</div>
<!-- 条款法律 -->
<div class="policy">
<img src="img/warn.png" alt="">
<span class="text">依据《⽹络安全法》，为保障您的账户安全和正常使⽤，请尽快完成⼿机号验证！新版<a href="#" class="policy">《京东隐私政策》</a> </div>
<!-- 主界⾯ -->
<div class="main">
<!-- 主界⾯下的⼦盒⼦⽤于放背景图⽚ -->
<div class="img">
<!-- 登录页 -->
<div class="login">
<!-- 登录页顶部 -->
<div class="top">
<img src="img/warn.png" alt="">
<span>京东不会以任何理由要求您转账汇款，谨防。</span>
</div>
<!-- 账户登录和扫码登录选项卡 -->
<div id="tab">
<div class="sel">
<ul>
<div class="left">
<li class="off"><a href="">扫码登录</a></li>
</div>
<div class="right">
<li class="on"><a href="">账户登录</a></li>
</div>
</ul>
</div>
<!-- 账户密码登录界⾯ -->
<div class="m">
<div class="show">
<div class="inputs">c语言数据类型的特点是什么
<input type="text" class="user">
<input type="text" class="pwd">
<span class="user_img"></span>
<span class="pwd_img"></span>
<a href="#">忘记密码</a>
<input type="button" class="button" value="登 ；录">
</div>
</div>
</div>
</div>
<!-- 登录页底部 -->
<div class="login-bottom">
<!-- 第三⽅登录界⾯ -->
<div class="other-login">
<img src="img/qq.png" alt="">
<a href="#">QQ</a>
<img src="img/WeChat.png" alt="">
<a href="#"></a>
</div>
<!-- 注册界⾯ -->
<div class="enroll">
<img src="img/login.png" alt="">
<a href="#">⽴即注册</a>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<ul class="about">
<a href="#"> 关于我们 </a><span>|</span>
<a href="#"> </a><span>|</span>
<a href="#"> ⼈才招聘 </a><span>|</span>
<a href="#"> 商家⼊驻 </a><span>|</span>
<a href="#"> ⼴告服务 </a><span>|</span>
<a href="#"> ⼿机京东 </a><span>|</span>
<a href="#"> 友情链接 </a><span>|</span>
<a href="#"> 销售联盟 </a><span>|</span>
<a href="#"> 京东社区 </a><span>|</span>
<a href="#"> 京东公益 </a><span>|</span>
<a href="#"> English Site </a>
</ul>
<!-- 底部版权 -->
<p class="copy">
Copyright © 2004-2021 京东JD 版权所有 </p>
</div>
</body>
html网页设计代码购物网站</html>
CSS (base.css)
/* 基本预设 */
getchar和getch/*清除页⾯中标签⾃带的外间距和内填充*/
* {
margin: 0;
padding: 0;
}
/*清除ul⾃带的列表符*/
ul, li {
list-style: none;
}
/*去掉a⾃带的下划线*/
a {
color: #666666;
text-decoration: none;
}
/* 删除a点击后变蓝⾊ */
a:visited {
color: #999999;
text-decoration: none;
}
/* 点击a上⾯有下划线且变红*/
a:hover{
text-decoration: underline;
color: red;
}html个人网页完整代码图片
/*去掉img⾃带的边框<；当图像加上a标签后，IE浏览器在不去除图像边框时会显⽰边框>*/ img {
border: none;
}
html {
height:100%;
}
body {
min-height: 100%;
position: relative;
}
(main.css)
/* 顶部基础设置 */
.top{
width: 1000px;
margin: 0 auto;
padding: 18px;
overflow: hidden;
}
/* 左浮动京东logo和欢迎登录 */
.top .logo .logo,.top .logo .wel{
float: left;
}
/* 调整京东logo和欢迎登录之间的距离以及字体颜⾊和样式 */
.top .logo .wel{
height: 60px;
line-height: 70px;
font-weight: normal;
margin-left: 25px;
color: #333333;
}
/* 使⽤元素的相对定位将其调整到合适的界⾯并调整字体颜⾊和样式 */
.top .survey {
position: relative;
float: right;
float: right;
top: 45px;
font-size: 12px;
font-family: SimSun;
color: #999999;
}
/* 政策条款改背景⾊、字体、字号并居中*/ .policy{
margin: 0 auto;
padding-top: 10px;
padding-bottom:10px;
background: #fff8f0;
width: 100%;
text-align: center;
font-size: 12px;
font-family: SimSun;
color: #999999;
}
/* 条款调整颜⾊*/
.policy .policy{
padding:0px;
color: #333333;
}
/* 定义主界⾯⾼度和颜⾊*/
.main{
height: 475px;
background-color: #E93854;
}
/* 导⼊背景图并居中 */
.main .img{
width: 990px;
height: 475px;/* 或者100% */
margin: 0 auto;
background: url(../img/main.png);
}
/* 定义登录页⾯的⾼度宽度并定位好位置 */ .main .img .login{
width: 350px;
height: 410px;
background-color: white;
float: right;
margin-top: 15px;
}
/* 上边的提醒警告栏修改padding 字号字体 */ .main .img .login .top{
text-align: center;
width: 350px;
padding: 10px 0;
background-color:#fff8f0;
color: #666666;
font-size: 12px;
font-family: SimSun;
}
/* 扫码登录和账号登录⼤盒⼦ */
.main .img .login .sel{
width: 350px;
height: 56px;
display: block;
}
/* 扫码登录和账号登录 */
.main .img .login .left,
.main .img .login .right{
width: 175px;
height: 55px;
text-align: center;
line-height: 55px;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论