练习(二) 仿京东(上) html+css

最新推荐文章于 2024-03-12 17:47:06 发布
最新推荐文章于 2024-03-12 17:47:06 发布
阅读量445 收藏 7
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyugyug/article/details/102596752
版权

本次是跟着视频仿的京东头部
效果图：
在这里插入图片描述
html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../css/base.css"/>
		<link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="../css/icon.css"/>
		<title>京东</title>
	</head>
	<body>
		<!-- header 部分 start -->
		<header>
			<div class="w">
				<a href="#">
					<img src="../images/header.png">
				</a>
				<div class="hide-header">
					<span class="icon-cross"></span>
				</div>
			</div>
		</header>
		<!-- header 部分 end -->
		<!-- 导航栏部分 start -->
		<div class="shortcut">
			<div class="w">
				<ul class="fl area">
					<li><span class="icon-location red"></span><a href="#"> 广西</a></li>
				</ul>
				<ul class="fr">
					<li>
						<a href="#">你好，请登录</a>
						<a href="#" class="red">免费注册</a>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">我的订单</a>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">我的京东</a>
						<span class="icon-ctrl"></span>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">京东会员</a>
					</li>
					<li class="space"></li>
					<li>
						<a href="#" class="red">企业采购</a>
						<span class="icon-ctrl"></span>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">客户服务</a>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">网站导航</a>
						<span class="icon-ctrl"></span>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">手机京东</a>
					</li>
				</ul>
			</div>
		</div>
	    <!-- 导航栏部分 end -->
		<!-- 中间头部分 start -->
		<div class="middle">
			<div class="w">
				<!-- logo -->
				<div class="logo">
					<h1>    
						<a href="#"></a>
					</h1>
				</div>
				<!-- 搜索 -->
				<div class="form">
					<input type="text" placeholder="电动滑板车">
					<span class="icon-camera"></span>
					<button><span class="icon-search"></span></button>
				</div>
				<!-- 购物车 -->
				<div class="shop-car">
					<span class="icon-cart"></span>
					<span class="car-goods">0</span>
					<a href="#">我的购物车</a>
				</div>
				<!-- 关键词 -->
				<div class="hot-words">
					<a href="#" class="red">沙龙洗发水</a>
					<a href="#">全球美妆</a>
					<a href="#">仙女同款</a>
					<a href="#">大屏电视</a>
					<a href="#">羊肉</a>
					<a href="#">爆款直降</a>
					<a href="#">每100-50</a>
					<a href="#">羽绒焕新</a>
					<a href="#">iphone11</a>
				</div>
				<!-- 小导航部分 -->
				<div class="navitems">
					<ul>
						<li><a href="#">秒杀</a></li>
						<li><a href="#">优惠券</a></li>
						<li><a href="#">PLUS会员</a></li>
						<li><a href="#">品牌闪购</a></li>
						<li><a href="#">拍卖</a></li>
						<li><a href="#">京东时尚</a></li>
						<li><a href="#">京东超市</a></li>
						<li><a href="#">京东生鲜</a></li>
						<li><a href="#">海囤全球</a></li>
						<li><a href="#">京东金融</a></li>
					</ul>
				</div>
				<!-- 推广位 -->
				<div class="treasure">
					<a href="#"></a>
				</div>
			</div>
		</div>
		<!-- 中间头部分 end -->
	</body>
</html>

css代码：

.w {
	width: 1190px;
	margin: 0 auto;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.red {
	color: #f10216;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: #9e9e9e;
}
a:hover {
	color: #f10216;
}
body {
	background-color: #f4f4f4;
}
ul,h1,input,button {
	margin: 0px;
	padding: 0px;
}
input,button {
	border: 0;
	outline: none;
}



/* header 部分 */
header {
	height: 80px;
	background-color: #2f0d1d;
}
header .w {
	position: relative;
}
header img {
	height: 80px;
	width: 1190px;
}
.hide-header {
	height: 20px;
	width: 20px;
	font-size: 14px;
	color: rgba(255,255,255,.3);
	line-height: 20px;
	text-align: center;
	background-color: rgba(0,0,0,.3);
	position: absolute;
	top: 7px;
	right: 7px;	
}

/* 导航栏部分 */
.shortcut {
	height: 30px;
	color: #9e9e9e;
	font-size: 12px;
	line-height: 30px;
	background-color: #e3e4e5;
	border-bottom: 1px solid #dedede;
}
.area {
	margin-left: 10px;
}
.shortcut .fr {
	margin-right: 12px;
}
.shortcut li {
	float: left;
}
.space {
	width: 1px;
	height: 10px;
	background-color: #cacaca;
	margin: 11px ;
}




/* 中间头部分 */
/* logo */
.middle {
	height: 140px;
	background-color: #ffffff;
	border-bottom: 1px solid #e4e4e4;
} 
.middle .w {
	position: relative;
}
.logo a {
	display: block;
	width: 190px;
	height: 140px;
	background: url(../images/logo.png) no-repeat;
	position: absolute;
}

/* 搜索 */
.form {
	width: 550px;
	height: 36px;
	background-color: #F10216;
	position: absolute;
	top: 25px;
	left: 260px;    
}
.form input {
	width: 419px;
	height: 32px;
	padding: 0 17px;
	font-size: 12px;
	color: #444;
	border: 2px solid #e1251b;
	border-right: none;
	float: left;
}
.form .icon-camera {
	display: inline-block;
	width: 35px;
	height: 32px;
	color: #bcbcbc;
	line-height: 32px;
	background-color: #fff;
	border: 2px solid #E1251B;
	border-left: none;
	float: left;
}
.form .icon-camera:hover {
	color: #E1251B;
}
.form button {
	width: 58px;
	height: 36px;
	color: #fff;
	background-color: #E1251B;
	float: left;
}

/* 购物车 */
.shop-car {
	width: 130px;
	height: 34px;
	line-height: 34px;
	font-size: 12px;
	color: #E1251B;
	text-align: center;
	border: 1px solid #f2f2f2;
	position: absolute;
	top: 25px;
	right: 230px;
}
.shop-car .icon-cart {
	font-size: 14px;
	margin-right: 18px;
}
.car-goods {
	width: 18px;
	height: 13px;
	color: #fff;
	line-height: 14px;
	background-color: #E1251B;
	border-radius: 40%;
	position: absolute;
	top: 1px;
	left: 25px;
}
.shop-car a {
	color: #E1251B;
}

/* 关键词*/
.hot-words {
	font-size: 12px;
	position: absolute;
	top: 68px;
	left: 260px;
}
.hot-words a {
	margin-right: 8px;
}

/* 小导航栏 */
.navitems {
	width: 770px;
	height: 40px;
	line-height: 40px;
	position: absolute;
	padding-left: 12px;
	left: 200px;
	top: 100px;
}
.navitems li {
	float: left;
	margin-right: 22px;
}
.navitems li a {
	font-size: 15px;
	color: #474747;
}
.navitems li:nth-child(-n+2) a {
	font-weight: 700;
	color: #E1251B;
}
.navitems li a:hover {
	color: #E1251B;
}

/* 推广位 */
.treasure a{
	display: block;
	width: 190px;
	height: 140px;
	background: url(../images/treasure.png) no-repeat;
	position: absolute;
	right: 0;
}
sgjbcbhsbvrj
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿京东
feigezuishuai的博客
01-18 612
这是购物车的Adapter package com.example.mychewugou.adapter; import android.content.Context; import android.os.Handler; import android.os.Message; import android.view.View; import android.view.View
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
web前端期末大作业 HTML+CSS+JavaScript仿京东
qq_524614081的博客
11-20 264
HTML期末大学生网页设计作业 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7页)html简单网页代码
而风不止
12-19 1274
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
仿京东首页页面部分动态效果的JS实现 1.0
最新发布
lnh23333的博客
03-12 783
介绍了轮播图和倒计时两个效果的简单实现
【HTML】HTML5网页作业----模仿京东，模仿站点
coding加油站
08-18 6901
html作业，html作业，html设计，模仿京东，期末作业
仿照京东导航条html+css
m0_62387059的博客
02-02 1483
源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.
仿京东首页页面
10-26
完整布局，仿照京东首页，运用H5+css3完成页面的实现，可以用来学习如何布局，写得都很详细，可以慢慢学习，哪怕零基础。。。
练习(四) 仿京东(下) html+css
hyugyug的博客
10-18 683
本次是仿京东底部 效果图： html代码： <!-- 底部部分 start --> <footer> <!-- 服务模块 --> <div class="service"> <div class="w"> <ul> <li> <h...
仿京东商城
友人C君的博客
04-17 1109
前后花了快一个星期，虽然只是做的静态页面，但是京东首页设计到的布局还是很有参考价值的，其中很多小的板块布局各有特点，可以通过过一个个小的板块来练习自己的html+css能力。 内容简介： html： 标签语义化，如使用header、footer等 头部meta标签的元信息的TDK书写要利于SEO css文件在头部引入，js文件在body底部引入 元素嵌套不宜过深 不同...
仿京东模版
03-09
　　ecshop仿京东商城模板特色： 1、功能相当强大齐全； 2、布局合理，层次分明； 3、色调风格简约，尽显专业； 4、布局大气，简约时尚，适合综合通用类使用；
html作业 仿京东商城登录界面
07-17
本资源课为html新手作业的参考答案使用，运用html+css实现的页面布局
仿京东页面
12-06
模仿京东界面，并且有轮播图与倒计时等特效，其中包括一些js框架
仿京东.zip
09-06
H5仿京东
仿京东，静态页面
01-25
仿京东，静态页面
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
HTML+CSS网页练习.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html + css二级菜单
05-17
以下是一个简单的 HTML + CSS 二级菜单的示例代码： HTML: ```html <li><a href="#">菜单1</a></li> 菜单2 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值