HTML+CSS实战：做一个京东登录页面

首先创建一个HTML目录,在目录下创建一个html文件，一个index.css文件，一个base.css文件
然后在html中写页面的相关代码，主要分为三个部分：顶部，主体和尾部
同时不要忘了在目录下创建一个文件夹放要·用到的·图片

顶部(top)内容包括

logo部分：
字体“欢迎登录部分”

2.主体(main)内容包括：

中间区域的主体
居中的主体区域
登录的白色登录区域(分login（登录）,input(文本框)，auto-login(自动登录），超链接a标签（忘记密码)，submit(提交部分)

3.底部（bottom）

无序的超链接
版权字段

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>京东登录</title><link rel="stylesheet" href="base.css"><link rel="stylesheet" href="index.css">
</head>
<body><!--顶部--><div class="top"><div class="logo"><img src="data:images/logo.png" width="130" height="60" alt=""></div><h2>欢迎登录</h2></div>
<!--    中间区域的主体，左右撑开--><div class="main">
<!--居中的主体区域--><div class="main-content">
<!-- 登录的白盒子--><div class="login"><h2>京东会员<span>立即注册</span></h2><div class="input"><span class="user-name"></span><input type="text" value="邮箱/用户名/登录手机"></div><div class="input"><span class="password"></span><input type="password" value=""></div><div class="auto-login"><label><input type="checkbox"><span>自动登录</span></label><a herf="">忘记密码</a></div><div class="submit"><a herf="">登录</a></div></div></div></div>
<!--    居中的底部盒子--><div class="bottom"><ul><li><a herf="">关于我们</a><span |></span></li><li><a herf="">联系我们</a><span |></span></li><li><a herf="">人才招聘</a><span |></span></li><li><a herf="">商家入驻</a><span |></span></li><li><a herf="">广告服务</a><span |></span></li><li><a herf="">手机京东</a><span |></span></li><li><a herf="">友情链接</a><span |></span></li><li><a herf="">销售联盟</a><span |></span></li><li><a herf="">京东社区</a><span |></span></li><li><a herf="">京东公益</a><span |></span></li><li><a herf="">English Site</a><span |></span></li></ul><p>Copyright&copy;2004-2021 京东JD.com</p>
</div>
</body>
</html>

接下来就是通过CSS来美化页面

basic.css（基本的）每个页面都需要引入这些（在HTML中通过link来引入这两个文件）

*{margin: 0;padding: 0;
}
ul,li{list-style-type: none;
}
a{text-decoration:none;
}

index.css中需要根据各个部分逐一美化

代码如下：

.top{width: 995px;margin: 0 auto;padding-top: 17px;padding-bottom: 22px;overflow: hidden;
}
.top .logo,.top h2{float: left;
}
/*欢迎登录标题*/
.top h2 {height: 60px; /*跟图片一样高*/line-height: 60px; /*跟height一样，可以垂直居中*/font-weight: normal;color:#666666;margin-left: 25px;
}
/*主体区域*/
.main{background-color: #e75858;height:475px;
}
.main-content{width: 995px;margin: 0 auto;height: 100%;background: url(images/2.png);
}
/*登录的白盒子*/
.login{width:306px;height:238px;background-color: white;float:right;margin-top:40px;padding: 23px 20px 20px 20px;
}
.login h2{font-weight: normal;color: #666666;font-size: 20px;margin-bottom: 30px;
}
.login h2 span{float:right;font-size: 14px;color: red;padding-left: 22px;background-image: url("images/5.png")no-repeat;
}
/*文本框样式*/
.input{border: 1px solid #BBDDBB;width:305px;height: 38px;margin-top: 28px;
}
.input span{float: left;width:38px;height:38px;border-right: 1px solid #BBDDBB;
}
.input input{float:right;width: 256px;height:38px;border: none;outline: none;padding-left: 10px;
}
.input .user-name{background-image: url("images/6.png");
}
.input .password{background-image: url("images/7.png");
}
.login .auto-login{font-size: 12px;margin-top: 22px;
}
.login .auto-login a{float: right;
}
.login .auto-login label span,.auto-login label input{vertical-align: middle;
}
/*登录按钮*/
.login .submit{width: 306px;height:30px;background-color: #e75858;font-size: 18px;margin-top: 13px;
}
.login .submit a{color: white;display: block;width: 100%;height: 100%;line-height: 30px;text-align: center;
}
/*底部区域*/
.bottom{width:995px ;margin: 0 auto;font-size: 12px;padding-top: 22px;
}
.bottom ul{/*overflow:hidden ;*/text-align: center;margin-bottom:12px;
}
.bottom ul li{/*float: left;*/display: inline-block;
}
.bottom p{text-align: center;
}
/*超链接*/
.bottom ul li a,.bottom ul li span ,.bottom p{color:#666666;
}
bottom ul li span{margin-left: 10px;margin-right: 8px;
}

页面效果图：（虽然不是一模一样，但感觉还行）

HTML+CSS实战：做一个京东登录页面相关推荐

HTML+CSS：设计一个网站登录页面学起来很简单
hello,大家好,我是wangzirui32,今天我们来学习如何设计一个网站登录页面. 开始学习吧! 1. 项目架构 demo/login.html 网页文件backgrond.png 登录背景图片 ...
用myeclipse搭建SSH并做一个简单登录页面
SSH是(Struts,Spring,Hibernate)的简称. Struts进行流程控制,Spring进行业务流转,Hibernate进行数据库操作的封装. ·Struts 采用MVC模式,主要是 ...
案例:京东登录页面css创建
京东登录页面效果图一.整体html代码 <!DOCTYPE html> <html><head><meta charset="utf-8&quo ...
java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
Flask初识，第五篇，做一个用户登录之后查看学员信息的小例子
Flask最强攻略 - 第五篇做一个用户登录之后查看学员信息的小例子需求: 1. 用户名: oldboy 密码: oldboy123 2. 用户登录成功之后跳转到列表页面 3. 失败有消息提示,重 ...
flutter 一个用户登录页面
一个用户登录页面输入校验 import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart';void m ...
CSS 如何做一个比较真实有感觉的阴影效果
CSS 如何做一个比较真实有感觉的阴影效果效果如图: 阴影:你需要了解的: box-shadow 这个样式可以同时添加多个阴影,以 , 间隔即可本例中的阴影有两个,一个向左偏移一个向右偏移 box ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
【新手向】Python做一个简易登录注册GUI界面(无事件绑定)
Python做一个简易登录注册GUI界面一,效果展示 (1)运行结果: (2)点击登录: 注:只有用户名:123 密码123456 会提示登录成功. 登录成功示范: 登录失败示范: (3)点击注册 ...
CSS/SCSS 做一个心跳的动画：keyframe
CSS/SCSS 做一个心跳的动画一.心电图数据化做动画,需要动画曲线,心跳的曲线自然是心电图,网上随便找一个差不多的,选取完整的一部分 1. 横向10等分找到基线,横向10等分. 整个图是一个 ...

HTML+CSS实战：做一个京东登录页面

HTML+CSS实战：做一个京东登录页面相关推荐

最新文章

热门文章