仿京东页面

随时准备跑路的程序员

已于 2023-10-14 14:30:48 修改

阅读量328

点赞数 2

CC 4.0 BY-SA版权

文章标签： html

于 2021-02-03 20:05:09 首次发布

本文链接：https://blog.csdn.net/weixin_53636376/article/details/113618351

（有点low = = …）

css样式代码

	<head>
		<meta charset="utf-8">
		<title>仿京东页面</title>
		
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.div2{
				width: 100%;
				height: 40px;
				background-color: #ececec;
				position: relative;
				margin-top:-5px ;
			}
			.div3-left{
				position: absolute;
				margin-top:-30px ;
				margin-left:200px ;
			}
			.div3-rigth ul{
				position: relative;
				float: left;
				margin-top: -36px;
				margin-left: 300px;
			}
			.div3-left li{
				float: left;
				margin: 15px;
				/* 去掉li前面的圆点 */
				list-style-type:none;
				text-decoration: none;
			}
			.d1{
				width:200px;
				height:200px;
				border-color: #FF0000;
				border-style: solid;
				border-width: 4px;
				margin: 5px;
			}	
			.div5{
				margin-left: 300px;
				margin-top: -200px;
			}
			.i1{
				position: relative;
				margin-bottom:-17.9px ;
				margin-left: -5px;
				height: 46px;
			}
			.div5 li{
				float: left;
				margin: 10px;
				list-style-type: none;
				color: #000000;
			}
			a{
				color: #000000;
				text-decoration: none;
			}
			#ms{
				color: #FF0000;
			}
			.i2{
				position: relative;
				margin-left: -150px;
				margin-bottom: -5px;
			}
			.i3{
				width: 130px;
				height: 130px;
				position: relative;
				margin-left: 280px;
				margin-top: -60px;
			}
			.div6 a{
				font-size: 25px;
				margin: 20px;
				color: #303030;
			}
			.div6 li{
				float: left;
			}
			.div6 ul{
				margin-left:230px;
				margin-top: 40px;
				list-style-type: none;
			}
			.i4{
				position: relative;
				margin-left: 60px;
			}
			.div7{
				width: 200px;
				height: 700px;
				border:#7c7c7c solid 3px;
				position: relative;
				margin-left: 10px;
				margin-bottom: 10px;
				background-color: #87CEEB;
				border-color: #87CEEB;
			}
			.i5{
				position: relative;
				margin-left: -3px;
				margin-top: 20px;
				width: 202px;
				height: 30px;
				background-color: #ffe2f7;
				border-color: #ffe2f7;
			}
			.div8{
				position: absolute;
				margin-left: 280px;
				margin-top:-700px;
			}
			.div9{
				
			}
			.div10{
				position: relative;
				margin-left: 450px;
				margin-top: -154px;
			}
			.div11{
				position: absolute;
				margin-left: 280px;
				margin-top: -100px;
			}
			.div01{
				width: 110px;
				height: 100px;
				border: solid lightcoral 5px;
				background-color: lightcoral;
				position: absolute;
				margin-left: 930px;
				margin-top: -500px;
			}
			.div02{
				width: 170px;
				height: 100px;
				border: solid orange 5px;
				background-color: orange;
				position: absolute;
				margin-left: 1050px;
				margin-top: -500px;
			}
			.div03{
				width: 170px;
				height: 100px;
				border: solid yellow 5px;
				background-color: yellow;
				position: absolute;
				margin-left: 930px;
				margin-top: -390px;
			}
			.div04{
				width: 110px;
				height: 100px;
				border: solid greenyellow 5px;
				background-color: greenyellow;
				position: absolute;
				margin-left: 1110px;
				margin-top: -390px;
			}
			.div05{
				width: 140px;
				height: 100px;
				border: solid lightskyblue 5px;
				background-color: lightskyblue;
				position: absolute;
				margin-left: 930px;
				margin-top: -280px;
			}
			.div06{
				width: 140px;
				height: 100px;
				border: solid purple 5px;
				background-color: purple;
				position: absolute;
				margin-left: 1080px;
				margin-top: -280px;
			}
			.div07{
				width: 290px;
				height: 200px;
				border: solid deeppink 5px;
				background-color: deeppink;
				position: absolute;
				margin-left: 930px;
				margin-top: -170px;
				
			}
			
		</style>
		
	</head>

前端页面代码

	<div class="div1">
		<img src="ad.jpg" style="width: 100%;"/>
	</div>
	
	<div class="div2"></div>
	
	<div class="div3-left">
		<img src="add.png" />北京
		<div class="div3-rigth">
		<ul>
		<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>
		<li><a href="#">网站导航</a></li>
		<li><a href="#">手机京东</a></li>
		</ul>
	</div>
	</div>
	
	<div class="div4">
		<img class="d1"  src="logo.png"/>
	</div>
	
	<div class="div5">
		<input type="text"  value="请输入商品名字" style="width: 800px;height: 40px; border-width: 3px;"/>
		
			<img class="i1"  src="search.png" />
			
		<input type="text"  style="width: 150px;height: 30px;"/>
		<img  class="i2" src="car.png" />
		<ul>
		<li ><a id="ms" href="#" >五折秒杀</a></li>
		<li><a href="#">300减180</a></li>
		<li><a href="#">19.9限时秒</a></li>
		<li><a href="#">跨店199减50</a></li>
		<li><a href="#">五折秒杀</a></li>
		<li><a href="#">羊毛衫</a></li>
		<li><a href="#">棉鞋男</a></li>
		<li><a href="#">每199减100</a></li>
		<li><a href="#">制氧机</a></li>					
		</ul>
		<img class="i3" src="erweima.png" />
	</div>
	
	<div class="div6">
		<ul>
		<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>
		<li><a href="#">全球购</a></li>
		<li><a href="#">京东金融</a></li>
		</ul>
		<img class="i4" src="ad2.png" />
		<div class="div7">
			<input class="i5" type="text" value="生活用品" />
		</div>
		
	</div>
	<div class="div8">
		<img src="marquee.jpg" style="width: 900px;" />
		<div class="div9">
			<img src="mar_right.jpg" style="width: 450px;" />
		</div>
		<div class="div10">
			<img src="mar_left.jpg" style="width: 450px"; />
		</div>
		<div class="div01"></div>
		<div class="div02"></div>
		<div class="div03"></div>
		<div class="div04"></div>
		<div class="div05"></div>
		<div class="div06"></div>
		<div class="div07"></div>
	</div>
	<div class="div11">
		<img src="2033550.jpg" style="500px" height="500px" />
	</div>
</body>

主页图片

在这里插入图片描述