JavaScript实现京东购物车页基础面效果

最新推荐文章于 2025-04-16 08:00:00 发布

遅咲きの向日葵

最新推荐文章于 2025-04-16 08:00:00 发布

阅读量981

点赞数 2

分类专栏：网页你好，我是小白；文章标签： css html javascript html5 css3

本文链接：https://blog.youkuaiyun.com/yhh924snoopy/article/details/110676131

版权

该博客介绍了如何使用JavaScript来实现京东购物车页面的基础功能。内容包括HTML、JavaScript和CSS文件的设置，特别提到了Jd.css和Reset.css两个CSS文件在样式设计中的应用。虽然无法展示GIF格式的效果图，但文章详细描述了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript实现京东购物车页基础面效果

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="css/jd.css"/>
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
		
		<script type="text/javascript" src="js/jd.js"></script>
	</head>
	<body >
		<!--导航栏开始-->
		<div class="nav">
			
			<div class="fir">
				<ul class="nav_ul1">
					<li>
						<i class="iconfont">&#xe644;</i>
						<a href="https://global.jd.com/">京东首页</a>
					</li>
					<li>
						<i class="iconfont">&#xe62a;</i>
						<select>
							
							<option>海外</option>
							<option>港澳</option>
							<option>大陆</option>
						</select>
					</li>
				</ul>
				
				
				<ul class="nav_ul2">
					<li>
						<a href="https://order.jd.com/center/list.action">我的订单</a>
						
					</li>
					<li>
						<span>|</span>
						<a href="https://home.jd.com/">我的京东</a>
						
					</li>
					<li>
						<span>|</span>
						<a href="https://vip.jd.com/">京东会员</a>
						
					</li>
					<li>
						<span>|</span>
						<a href="https://b.jd.com/">企业采购</a>
						
					</li>
					<li>
						<span>|</span>
						<select>
							<option>客户服务</option>
							<option>客户</option>
							<option>商户</option>
							
						</select>
						
					</li>
					<li>
						<span>|</span>
						<select>
							<option>网站导航</option>
							<option>特殊主题</option>
							<option>行业频道</option>
							<option>生活服务</option>
							<option>更多精彩</option>
						</select>
						
					</li>
					<li>
						<span>|</span>
						<a href="https://app.jd.com/">手机京东</a></li>
					
				</ul>
				
			</div>
			
			
		</div>
		<!--导航栏结束-->
		<!--搜索框开始-->
		<div class="search">
			<div class="fir">
				
				<img src="img/jdlogo-201708-@1x.png"/>
				
				<div class="search_div">
				
				<input type="text" class="search_text"/>
				<button class="search_bt">搜索</button>
			</div>

最低0.47元/天解锁文章