HTML,CSS篇：真·伪京东购物车

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量220 收藏 2
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46254549/article/details/106540716
版权

HTML,CSS篇：真·伪京东购物车

本文只是个简单的小栗子，适合前端小白去熟悉，HTML，CSS。

HTML部分

<body>
	<div class="first">
		<div class="first_one">
			<ul><li><a href="">京东首页</a></li>
				<li><a href="">安徽 </a></li></ul>
				<ul class="first_two">
					<li><a href="">你好，请登录</a></li>
					<li><a href="">免费注册</a></li>
					<li><a href="">我的订单</a><span id="">|</span></li>
					<li><a href="">我的京东</a><span id="">|</span></li>
					<li><a href="">京东会员</a><span id="">|</span></li>
					<li><a href="">企业采购</a><span id="">|</span></li>
					<li><a href="">客户服务</a><span id="">|</span></li>
					<li><a href="">网站导航</a><span id="">|</span></li>
					<li><a href="">手机京东</a></li>
				</ul>			</div>
		
	</div>
	<!--第二部分-->
	<div class="two"> 
		<img src="http://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png"/>
		<img src="http://misc.360buyimg.com/user/cart/widget/header-2017/i/cart-icon.png"/>
	
	<div class="two_one">
		<input type="text" id="" value="" class="two_text"/>
		<input type="button" id="" value="搜索" class="two_bu" />
		</div>
	</div>
	<div class="three">

		
			
		<div class="three_one">
			<h3>全部商品</h3>
		<div class="three_two">
			
		
			<span id="">
				配送至
			</span>
			<select name="">
				<option selected="selected">凤阳</option>
				<option value="">刘福</option>
				<option value="">五点</option>
				<option value="">大庙</option>
				
			</select>
		</div></div>
    </div>
	
	

	<div class="four">

		<ul>
			<li><input type="checkbox"/>全选</li>
			<li>商品</li>
			<li>单价</li>
			<li>数量</li>
			<li>小计</li>
			<li>操作</li>
		</ul>
	</div>
	<div class="five">
		<ul class="five_one">
			<li><input type="checkbox" id="" value="" /></li>
			
			
			<li><img src="//img10.360buyimg.com/cms/s80x80_jfs/t10747/87/1493932390/227203/ed03d020/59e1d4edNba1da5ec.jpg"/></li>
			<li>蓉城称重电子称台秤30kg/1g公斤计价</li>
			<li>升级2代省电加厚盘</li>
			<li><span>¥118.00
				
			</span></li>
			<li><button class="five_bu">-</button>
				<input type="text" id="" value="1" />
				<button>+</button>
			</li>
			<li><span>¥118.00
				
			</span></li>
			
			<li><a href="">删除</a><br /><a href="">移到我的关注</a></li>
			
		</ul>
		
	</div>
	<div class="six">
		<ul class="six_one">
			<li><input type="checkbox" id="" value="" /></li>
			
			
			<li><img src="//img10.360buyimg.com/cms/s80x80_jfs/t1/84922/14/5256/422945/5deb69e7Eb3b7fa3b/1033b04cf7bae706.jpg"/></li>
			<li>沐美电子秤</li>
			<li>升级USB充电款</li>
			<li><span>¥24.90
				
			</span></li>
			<li><button class="six_bu">-</button>
				<input type="text" id="" value="1" />
				<button>+</button>
			</li>
			<li><span>¥24.90
				
			</span></li>
			
			<li><a href="">删除</a><br /><a href="">移到我的关注</a></li>
			
		</ul>
		
	</div>
	<div class="seven">
		<ul>
			<li><input type="checkbox"/></li>
			<li>全选</li>
			<li>删除选中商品</li>
			<li>移到关注</li>
			<li>清理购物车</li>
			<li class="seven_one">已选择3件商品</li>
			
			<li class="seven_two">总价：</li>
			<li><span id="">¥238.90
				
			</span></li>
			<li class="seven_three">促销：¥0.00</li>
			<div class="eirht">
				<ul>
					<li><input type="button" id="" value="去结算"/></li>
				</ul>
				
			</div>
			
			
			
		</ul>
		
		
	</div>
</body>
有两个CSS文件

1.CSS常规设置

body,div,ul,h3,li{margin: 0px;padding: 0px;}
body{text-align: center;font-size: 10;}
a{text-decoration: none;}
li{list-style: none;}

2.CSS主体部分

.first_one {

width: 1000px;
height: 30px;
background-color: ghostwhite;
margin: 0 auto;

/*border:1px solid green;*/

}
.first_one li{
float: left;

}
.first_one a,.first_two a,.first_two span{
line-height: 30px;
color: grey;
font-size: 12px;
margin-left: 10px;
}
.first{

width: 100%;
height: 30px;
background-color: ghostwhite;

}
.first_two{
float: right;

}
a:hover{color: red;
text-decoration: underline;}

/第二部分/

.two{
height: 60px;
margin-left: 320px;
margin-top: 30px;

}
.two img{
float: left;

}
.two_one{
float: right;
margin-top: 25px;

margin-right: 324px;

}
.two_text{
width: 265px;
height: 21px;
border: 3px solid red;
position: relative;
left: 5px;
top: -1px;
}
.two_bu{
width: 51px;
height: 29px;
background-color: red;
border: 0px;
color: white;
}
/第三段/
.three{
margin-left: 320px;
margin-right: 324px;
height: 30px;
}
.three_one h3{
font-size: 23px;
clear: both;
float: left;
color: red;
}
.three_two{
line-height: 30px;
float: right;
color: gainsboro;
margin-top: 10px;
}
/第四部分/
.four{
background-color: gainsboro;
width: 1000px;
height: 40px;
margin-left: 320px;
float: left;
}
.four li{
float: left;
font-size: 12px;
color: gray;
line-height: 40px;

}
.four li:nth-child(1){width: 90px;border-top: 3px solid red;}
.four li:nth-child(2){margin-left: 80px;}
.four li:nth-child(3){margin-left: 400px;}
.four li:nth-child(4){margin-left: 70px;}
.four li:nth-child(5){margin-left: 110px;}
.four li:nth-child(6){margin-left: 50px;}
/第五部分/
.five{
clear: both;

width: 1000px;
height: 150px;
margin-left: 320px;
margin-top: 80px;
border: 1px solid gray;
background-color: #FFF4E8;	


}

.five_one li{
margin-top: 30px;
float: left;
font-size: 12px;
color: black;
}
.five li:nth-child(1){width: 30px;}
.five li:nth-child(2){margin-left: 20px;}
.five li:nth-child(3){margin-left: 30px;}
.five li:nth-child(4){margin-left: 50px;}
.five li:nth-child(5){margin-left: 80px;}
.five li:nth-child(6){margin-left: 30px;}
.five li:nth-child(7){margin-left: 50px;}
.five li:nth-child(8){margin-left: 30px;}
.five input{width: 30px;position: relative;left:5px;text-align: center;}
.five_bu{position: relative;left:10px;}
.five a{color: black;}

.six{clear: both;

width: 1000px;
height: 150px;
margin-left: 320px;
margin-top: 30px;
border: 1px solid gray;
background-color: #FFF4E8;

}
.six_one li{
margin-top: 30px;
float: left;
font-size: 12px;
color: black;
}
.six li:nth-child(1){width: 30px;}
.six li:nth-child(2){margin-left: 20px;}
.six li:nth-child(3){margin-left: 80px;}
.six li:nth-child(4){margin-left: 140px;}
.six li:nth-child(5){margin-left: 100px;}
.six li:nth-child(6){margin-left: 30px;}
.six li:nth-child(7){margin-left: 50px;}
.six li:nth-child(8){margin-left: 40px;}
.six input{width: 30px;position: relative;left:5px;text-align: center;}
.six_bu{position: relative;left:10px;}
.six a{color: black;}

/第六半径/
.seven{clear: both;

width: 1000px;
height: 60px;
margin-left: 320px;
margin-top: 30px;
border: 1px solid gray;
background-color: white;}

.seven li{
float: left;
margin-top: 20px;
float: left;
font-size: 12px;
color: gray;
}
.seven li:nth-child(1){width: 10px;}
.seven li:nth-child(2){margin-left: 20px;}
.seven li:nth-child(3){margin-left: 20px;}
.seven li:nth-child(4){margin-left: 20px;}
.seven li:nth-child(5){margin-left: 60px;}
.seven li:nth-child(6){margin-left: 320px;position: relative;top:-10px;font-size: 14px;}
.seven li:nth-child(7){margin-left: 20px;position: relative;top:-10px;font-size: 14px;}
.seven li:nth-child(9){margin-left: 50px;position: relative;top:20px;right:140px;font-size: 14px;}
.seven li:nth-child(8){position: relative;top:-10px;font-size: 14px;}
/第八部分/
/*.eirht{

}*/
.eirht input{
width: 114px;
height: 61px;
background-color: red;

position: relative;
top: -20px;
left: 2px;
clear: both;
border: 1px solid red;
float: right;
font-size: 16px;
color:white;
text-align: center;

}
效果图是这样的

关于页面功能的增加请等下次更新。

编辑于 05-17
著作权归作者所有

不爱敲代码的帆哥
关注
专栏目录
仿京东购物车网页页面.html
03-25
简单的网页还原，自己练习自写代码。实现了购物车静态页面的布局，样式等操作步骤。
HTML+CSS+JS实操京东购物车
qq_45841233的博客
12-03 4404
HTML+CSS+JS实操京东购物车
实战：京东购物车静态界面实现，html前端技术开发
2401_84103903的博客
04-06 834
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！olute;right: 0;bottom: 0;
css和html实现简单的图片轮播效果
ZJQ的博客
09-06 1888
目录 滑动轮播图 渐变效果实现 滑动轮播图 效果直接保存本地 html 双击打开可看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> .one { position: absolute; width: 300px; height: 300px; overflow: hidden
京东购物车（html+css+js）
aa67567456的博客
12-05 9968
html+js部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的购物车</title> <link rel="stylesheet" type="text/css" href="css/css.css" /> <link rel="stylesheet" typ...
html+css+js实现京东商城
02-26
在京东商城的项目中，CSS可以用来设计商品的展示样式，比如卡片式的布局、滑动轮播图、悬浮的购物车按钮等。CSS选择器如类选择器（`.class`）、ID选择器（`#id`）、伪类（`:hover`）和媒体查询（`@media`）都是关键...
HTML+CSS仿京东购物车页面静态页面
06-27
HTML和CSS是网页设计的基础，本项目以"HTML+CSS仿京东购物车页面静态页面"为主题，旨在通过实例教学帮助开发者掌握如何利用这两种语言构建一个类似京东购物车的交互式界面。下面将详细讲解其中涉及的关键知识点。 1...
html+css几行代码解决京东购物界面.zip
07-10
在京东购物界面中，HTML可能会包含如头部（header）、导航栏（navbar）、商品列表（product listings）、侧边栏（sidebar）、购物车（cart）以及底部（footer）等各个部分。每个部分可能由不同的HTML元素组成，如`...
【网页设计作业】HTML+CSS实现仿写京东商城页面
12-30
6. **交互元素与伪类**：为了模拟京东商城的交互效果，如悬停效果、按钮点击效果，学生需掌握`:hover`, `:active`, `:focus`等CSS伪类，以及`transition`和`animation`属性。 7. **网页字体和排版**：学生需要学习...
京东电商网站仿写.rar
11-15
- 购物车：用户可以将商品添加到购物车，查看和修改购物车内商品，计算总价。 - 用户登录/注册：提供用户账户管理功能，包括密码找回、个人信息设置等。 - 搜索功能：允许用户输入关键词搜索商品。 - 排行榜/...
购物车html代码
03-19
青软实训《web前端设计与开发》 2-1~3-2贯穿项目代码 html5
京东的静态网页购物车html
09-15
看别人发的静态网页不怎么好看就给大家一份可以做期末作品解压就可以用的，都有备注的，看别人发的静态网页不怎么好看就给大家一份可以做期末作品解压就可以用的，都有备注的，
HTML简单的实现购物车
07-27
HTML简单的实现购物车
HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车
长夜漫漫，无心睡眠
12-31 3517
花了两三天时间将HTML4，HTML5，CSS2,CSS3大致学习了一下，现在来做一个网页实践一下，我是准备专攻后端开发的，所以前端只是浅尝辄止，定有不足，欢迎指正。 待更。。
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1965
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
html+css+javascript 网页设计 从入门到精通_[网页编程] HTML+CSS+JavaScript 购物车搭建实操...
weixin_39672011的博客
11-24 625
之前的实操,是通过HTML+CSS实现了页面的呈现,但是页面仍旧是静态的,不能点击相关的按钮实现相关的效果,学了JavaScript之后,我们就可以对页面进行优化,具体效果如下实现代码CSS:.JavaScript//获得所有的多选框对象 html<!DOCTYPE html> <html> <head> <meta charset="utf-8"&...
Html、Css、javaScript 网页制作之京东购物车
gdd1990shl的博客
04-07 5197
一.Html: 京东购物车.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <!--<link rel="stylesheet" type="text/css" href=
京东购物车html页面,仿京东购物车页面
weixin_39571404的博客
06-03 371
【实例简介】仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面【实例截图】【核心代码】仿京东└── 仿京东├── css│ ├── imitatestyle.css│ ├── juicyslider.css│ └── juicyslider-min.css├── img│ ├── 201511060611068900.jpg│ ├─...
京东购物车网页(静态)搭建
时间静止
03-22 8089
按照报告的形式写一个项目 一、项目名称 完成京东购物车网页搭建 二、项目环境 1、软件环境：Win10+HBuilder+Chrome浏览器 2、项目思路 ： 根据需要实现的效果，自上而下，依次实现导航栏、搜索框、标题栏、商品详情展示框、结算窗口的编写。 三、项目源码 购物车搭建的HTML代码（京东购物车5.html） <!DOCTYPE html> <html> &...
打造京东购物车界面：HTML/CSS/JS全栈开发教程
资源摘要信息:"本项目是一个使用HTML、CSS和JavaScript仿制的京东购物车示例。它不仅包含基本的网页结构设计，还融合了动态交互功能，实现了类似京东购物车的基本操作。通过此项目，可以学习到如何使用HTML构建网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值