京东首页界面

最新推荐文章于 2023-04-04 18:58:50 发布
最新推荐文章于 2023-04-04 18:58:50 发布
阅读量919 收藏 5
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WAP4445/article/details/110194732
版权 
建议使用定位排版，速度很快而且效果还不错
<!doctype html>
<html>
	<head>
		<style>
			#yihao{
				color:#ffffff;
				border-width:1px;
				style: outset;
				border-style: solid;

			 }
			#xiaoyi{
				position:absolute;
				left:800px;
				top:1px
				margin:center:
				
			}/*<span><input>贵州</input></span>
							<span><input>四川</input></span>
							<span><input>重庆</input></span>
							<span><input>云南</input></span>*/
			#erhao{
				color:#ffffff;
				border-width:1px;				
				border-style: solid;
				margin:center:
			 }
			 #xxer{
				position:absolute;
				left:800px;
				top:60px
			 }
			#xiaoer{
				position:absolute;
				left:700px;
				top:100px
			}
			#sanaho{
				color:#ffffcc;
				border-width:1px;
				style: outset;
				border-style: solid;

			 }
			#xiaosna{
				margin-left:40%;
				
				color: blue rgb(25%,35%,45%) #909090 red;
			}
			#sihao{
				color:#ffffff;
				border-width:1px;
				style: outset;
				border-style: solid;

			 }
			#xiaosi{
				position:absolute;
				left:500px;
				top:50px
			}
			#xiaowu{
				position:absolute;
				left:1100px;
				top:45px
				}
			.liuhao{
				color:#ffffff;
				border-width:1px;
				style: outset;
				border-style: solid;
				margin-left:40%;			
				color: blue rgb(25%,35%,45%) #909090 red;
			 }
			#xiaoliu{
				position:absolute;
				left:600px;
				top:120px
			}
			#xiaoliu{
				position:absolute;
				left:650px;
				top:150px
			}
			#xiaoqi{
				position:absolute;
				left:1300px;
				top:45px
				}
		</style>
		<title>
				京东首页制作
		</title>
	</head>
			<body>	
				<div id="yihao">
						<div id="xiaoyi">
							
							<span>
							
							<a href="https://www.jd.com/">
							您好，请登录 免费注册|
							</a>
							<a href="https://www.jd.com/">
								我的订单|
							</a>
							<a href="https://www.jd.com/">
								我的京东|
							</a>
							<a href="https://www.jd.com/">
								 京东会员|
							</a>
							<a href="https://www.jd.com/">
								企业采购|
							</a>
							<a href="https://www.jd.com/">
								客户服务|
							</a>
							<a href="https://www.jd.com/">
								网络导航|
							</a>
							<a href="https://www.jd.com/">
								手机京东
							</a>
							
							</span>
						</div>						
					<div id="erhao">
						<div id="xxer">
							<span>
									<input>
										
									</input>

								<a href="https://www.jd.com/">
									搜索
								</a>							
							</span>
						</div>
						<div>
						<span id="xiaoer">
							<a href="https://www.jd.com/">
								限量抢电视
							</a>
							<a href="https://www.jd.com/">
								黑五狂欢
							</a>
							<a href="https://www.jd.com/">
								感恩巨献
							</a>
							<a href="https://www.jd.com/">
								鲜花园艺
							</a>
							<a href="https://www.jd.com/">
								教育电视
							</a>
							<a href="https://www.jd.com/">
								299减100
							</a>
							<a href="https://www.jd.com/">
								鞋靴
							</a>
							<a href="https://www.jd.com/">
								小家电
							</a>
							</span>
						</div>
					</div>
					<div id="sanhao">
						<span>

						</span>
					</div>
					<div id="sihao">
						<div id="xiaosi">
							<span>
								<a href="https://www.jd.com/">
									<img src="..\img\京东.png"/>
								</a>
								
							</span>
						</div>
					</div>
					<div id="wuhao">
						<div id="xiaowu">
							<span>
								<a href="https://www.jd.com/">
									<img src="..\img\京东2.png"/>
								</a>
								
							</span>
					</div>
					<div id="liuhao">
						<div id="xiaoliu">
							<span>
								<a href="https://www.jd.com/">
									秒杀
								</a>
								<a href="https://www.jd.com/">
									优惠券
								</a>
								<a href="https://www.jd.com/">
									PLUS会员
								</a>
								<a href="https://www.jd.com/">
									品牌
								</a>
								<a href="https://www.jd.com/">
									拍卖
								</a>
								<a href="https://www.jd.com/">
									京东家电
								</a>
								<a href="https://www.jd.com/">
									京东超市
								</a>
								
								<a href="https://www.jd.com/">
									京东生鲜
								</a>
								<a href="https://www.jd.com/">
									京东国际
								</a>
								<a href="https://www.jd.com/">
									京东金融
								</a>
								<hr>
							</span>
						</div>
					</div>
					<div id="qihao">
						<div id="xiaoqi">
							<span>
								<a href="https://www.jd.com/">
									<img src="..\img\京东3.png"/>
								</a>
							</span>
						</div>
					</div>
				</div>		
			</body>
</html>
无忧小酒
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
几行代码解决京东购物界面
流楚丶格念的博客
07-10 9153
文章目录完整项目界面展示GIF界面代码index.htmlindex.css（中间主要部分）base.css（头部，尾部）normal.css图片资源 完整项目 https://download.csdn.net/download/weixin_45525272/12596801 界面展示 GIF 界面代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
JS实现京东首页之页面顶部、Logo和搜索框功能
11-28
昨天我们主要讲了京东首页的基本布局，今天我们主要来逐步实现京东首页的页面顶部、Logo&搜索框。首先我们来看下我们今天将要实现的效果： 下面页面布局详细分析： 1、页面头部分三个部分依次实现：五角星图、收藏京东、右边文字部分（用列表实现）； 其中当鼠标停放在手机京东上，手机背景图发生变化，变成红色带jd的图案；当鼠标悬停在客服服务上，出现下拉列表。 2、Logo&搜索框分四个部分实现：左边京东Logo、中间搜索框（上部：快速搜索；下部：热门搜索）、右部我的京东&去购物车（步骤类似我的京东，省略） 分析图： 具体实现代码如下： jd_index.html <!doctype html> <
京东首页制作html+css+js
weixin_57152189的博客
04-04 6377
index.css代码。
流式布局之京东首页案例
zxdznyy的博客
08-29 1087
流式布局是移动端中很重要的布局之一。流式布局的核心是：通过盒子宽度设置百分比来根据屏幕的宽度进行伸缩，不受固定像素限制，内容向两侧填充，流式布局也是web开发中比较常见的布局而本节内容将通过京东的移动端官网首页来讲解移动端常见布局之流动布局。资源可从网址m.jd.com中获取。 内容属性： name=“viewport” 指理想视口。即宽度等于理想宽度，而非默认的980px content=“内容属性” 内容属性中包括： width=device-width;设备宽度 user-scalable=no;不允
京东官网首页js+css+html基础
qq_45387575的博客
04-23 1438
1、让盒子宽度撑满整个页面 width: 100%; 2、加了绝对定位（已经脱离了标准流）的盒子不能使用margin:auto 来使盒子居中 解决办法： .box { position: absolute; /* 调整水平居中，先左移50%的宽度，在用外边框调整至自身盒子一半的距离，实现居中 */ left: 50%; margin-left: -100px; /* 垂...
原生js实现移动端京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
Henry的博客
09-08 1459
原生js实现京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
牛逼！“京东热”框架JD-hotkey开源了...
emprere的博客
12-02 1万+
JD-hotkey 是京东 APP 后台热数据探测框架，历经多次高压压测和 2020 年京东 618 大促考验。在上线运行的这段时间内，每天探测的key数量数十亿计，精准捕获了大量爬虫、...
Android实现京东秒杀界面
01-05
本文实例为大家分享了Android实现京东秒杀界面展示的具体代码，供大家参考，具体内容如下 效果图： 京东秒杀是两个小时一个场次，判断本机的时间进行场次定时，然后在这两个小时里面进行倒计时。 MainActivity ...
京东主页html模板
01-17
【京东主页HTML模板】是前端开发中的一个重要组成部分，主要用于构建类似于京东官方网站的用户界面。HTML（HyperText Markup Language）是一种标记语言，它定义了网页的结构，并与CSS（Cascading Style Sheets）和...
仿照京东html界面
10-22
在构建一个仿照京东的HTML界面时，我们需要关注多个关键知识点，这涉及到前端开发的核心技术和交互设计。以下是一些详细的技术点和实现方法： 1. **HTML结构**：首先，HTML是网页的基础，用于定义页面内容和结构。...
防京东界面
03-10
【防京东界面】是一款专为Android平台设计的开源项目，其目标是模仿京东商城的用户界面，为开发者提供了一个学习和参考的实例。这个源码虽然在功能上可能不完全完备，但其核心在于展示了如何在Android环境中实现类似...
仿京东商城H5主页面源代码，html、css、js 下载
02-05
仿京东商城H5主页面源代码，html、css、js 仿京东商城H5主页面源代码，html、css、js 仿京东商城H5主页面源代码，html、css、js 仿京东商城H5主页面源代码，html、css、js
京东首页之页面分析
Andone_hsx的博客
01-11 1万+
京东首页效果图： 当面对一张设计师给出的网页效果时，我们切不可急忙着手去敲代码实现相应的效果。这样做可能在后续工作中会让我们因当初的考虑不周而事倍功半。所以为了防止这样的情况出现，我觉得应该按照以下步骤去执行，可能效率会更高。 1、根据效果图，先分析页面的基本布局； 2、从上到下，由左至右，详细分析； 3、分块实现 此页面分析如下：本京东首页页面由上到下共分为7个部分；分别是：页
京东首页
05-03 417
HomePageFragmentpackage com.example.jd_test.fragment; import android.content.Intent; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; i...
基于HTML+CSS编写京东的静态主页（代码+笔记）
热门推荐
cindy647的博客
06-25 1万+
源码资源链接： https://download.csdn.net/download/cindy647/10535906 步骤： 1.截图，要一个效果图 2.搭建项目环境，结构样式行为分离 3.引入图片和图标，存储 4.划分结构布局 笔记： 模拟鼠标 cursor:pointer; 鼠标变成小手 cursor:move; 鼠...
京东页面一
不想写代码的一天
04-30 717
这个页面分为四大块，头部，搜索栏，选项卡部分和主体推荐部分今天先只做了头部。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="icon" href="//www.jd.com/favicon.ico" type="image/x-...
做京东商城主页面的体会
泪光无悔
10-24 1734
这个星期是项目周，今天我做了京东商城的主页面，是在vs里写的，发现好多在DreamWeaver里可以运行的，在vs里就不管用了，这个特别纠结，不过经过我们小组的努力，还是没有难住我们，最终把这些问题解决了，但由于有些用的是相对定位，在其他位置，一插入div，那个位置就四处乱跑，这个问题还没有解决，不过在网页里运行是没问题。明天继续.......
matlab下载.pdf
最新发布
07-14
matlab下载下载方式及注意事项
京东注册界面html
07-28
京东注册界面的HTML代码包含了表单和尾部区域的制作。在表单区域中，使用了ul>li的结构，每一行文字都被一个li标签包含。每个li标签中包含一个label标签，用来放置字段名称，比如"手机号："、"短信验证码："、"登录...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值