京东首页界面

建议使用定位排版,速度很快而且效果还不错
<!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/">
								299100
							</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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值