前端静态网页实战项目京东首页

💛作者主页:静Yu
🧡简介:CSDN全栈优质创作者、华为云享专家、前端知识交流社区创建者
💛社区地址:https://bbs.csdn.net/forums/JingYu
🧡私信我获取源码,点赞、关注、评论

效果图

在这里插入图片描述
这是个简单的京东网址首页,是一个静态的网页,供初学者练习使用。

代码介绍

.HTML部分

1.header标签定义文档的页眉,京东首页的页眉就是一张图片广告
在这里插入图片描述

<header>
		<div class="w">
			<a href="#">
				<img src="images/header.jpg" height="80" width="1190" alt="">
			</a>
		</div>
	</header>

2.第二部分是快速导航栏部分,包含登录按钮、注册按钮、我的订单、我的经典也就是个人中心(都是静态的没有实现事件)、还有京东会员等等按钮。
在这里插入图片描述

<div class="shortcut">
		<div class="w">
			<ul class="fl city">
				<li> <i class="f10"></i><a href="#">北京</a></li>
			</ul>
			<ul class="fr">
				<li>
					<a href="#">你好,请登录</a>
					<a href="#" class="f10">免费注册</a>
				</li>
				<li class="space"></li>
				<li>
					<a href="#">我的订单</a>
				</li>
				<li class="space"></li>
				<li>
					<a href="#">我的京东</a>
					<i></i>
				</li>
				<li class="space"></li>
				<li>
					<a href="#">京东会员</a>
				</li>

				<li class="space"></li>
				<li>
					<a href="#">企业采购</a>
				</li>
				<li class="space"></li>
				<li>
					<a href="#">客户服务</a>
					<i></i>
				</li>
				<li class="space"></li>
				<li>
					<a href="#">网站导航</a>
					<i></i>
				</li>
				<li class="space"></li>
				<li>
					<a href="#" class="mobile">手机京东
					 <img src="images/mobile.png" height="60" width="60" alt="">
					</a>
				</li>
			</ul>
		</div>
	</div>

3.在下面就是页面的主体部分,秒杀、优惠券、闪购、
在这里插入图片描述
下面这是真正的京东首页,与本次静态页面的不同是添加了部分照片,大家实战联系的时候可以分出一块区域添加图片
在这里插入图片描述
4.最后都是每个网站的页脚部分,主要是介绍一下自己还有就是合作方,部分代码如下,这些文字都是可以改掉的,这只是个简单的模板
在这里插入图片描述

<div class="w help">
			<div class="fl">
				<dl>
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
				</dl>
				<dl>
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
				</dl>
				<dl>
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
				</dl>
				<dl>
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
				</dl>
				<dl>
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">购物流程</a></dd>
				</dl>
			</div>
.CSS部分
.w {  /* 版心的公共类 */
	width: 1190px;  /* 京东的版心是 1190 */  
	margin: 0 auto;  
}
.fl { /*  浮动的公共类 */
	float: left;
}
.fr {
	float: right;
}
 a {
	text-decoration: none;  /* 取消下划线 */
	font-size: 12px;
	color: #999;
}
a:hover {
	color: #c81623;
}
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
	margin: 0;
	padding: 0;
}
input,button {
	border: 0;
	outline: none;  /* 取消轮廓边框 */
}
ul {
	list-style: none;
	
}

body {
	background-color: #f6f6f6;
}
.f10{
	color: #f10215!important;
}

@font-face {  /* 声明字体 */
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?8qhwk5');
  src:  url('../fonts/icomoon.eot?8qhwk5#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?8qhwk5') format('truetype'),
    url('../fonts/icomoon.woff?8qhwk5') format('woff'),
    url('../fonts/icomoon.svg?8qhwk5#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* header部分 */
header {
	height: 80px;
	background-color: #020000;
}
/* 快速导航栏begin */
.shortcut {
	height: 30px;
	line-height: 30px;
	background-color: #e3e4e5;
	border-bottom: 1px solid #ddd;
	
}
.city {
	margin-left: 200px;
}
.shortcut li {
	float: left;
}
.shortcut i {
	font-family: "icomoon";
	font-style: normal;  /* 让倾斜的不倾斜 */
	color: #ccc;
}
.space {  /* 小竖线 */
	width: 1px;
	height: 10px;
	background-color: #ccc;
	margin: 10px  12px 0;  /* 上 10  左右是 12  下是 0 */
}
.mobile {
	position: relative;
}
.mobile img {
	position: absolute;
	left: -3px;
	top: 24px;
	border: 1px solid #ccc;
	padding: 3px;
}
静态网页得图片

将本静态网页中用到的照片放在下面,供大家使用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

关注我持续更新更多实战项目。

  • 25
    点赞
  • 71
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

静Yu

感谢您的支持!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值