实验二 倒计时页面的实现 淘宝秒杀页面

商品.html

在这里插入代码片

		<div id="container">
			<div id="header">
				<div id="nav_left">
					<ul>
						<li><a href="#" style="text-decoration: none;color: black;">今日团购 &nbsp </a>&nbsp >
						<a href="#" style="text-decoration: none;color: black;">&nbsp商品团</a>
	                           &nbsp > <a href="#"style="text-decoration: none;color: black;">&nbsp食品保健</a></li>
					</ul>
				</div>
				<div id="nav_right">
					<div style="left: 1120px; position: absolute; top: 28px;">
					<a href="#" style="text-decoration: none;color: black;">查看更多同类商品</a>
				</div></div>
			</div>
			<div id="main">
				<div id="main_left">
					<img src="img/产品.jpg">
				</div>
				<div id="main_right">
					<h4 class="headerer">
	                   百草味 酸甜芒果干120g×3袋（每个ID限购20件）</h4>
					<br>
				     <ul style=" margin-left: 320px; margin-top:-23px;font-size:14px;font-weight:bold;">
					    <li>包邮  </li>&nbsp &nbsp
					    <li>退货赔运费  </li>&nbsp &nbsp
					    <li>前35000件24.9元</li>
					</ul>
				</div>
				<div id="middle">
					<ul>
						<li>•     限量减3元 400余款零食超值让利，抢爆款第二件9.9元<br>
						    •     拍下立减 同品质价更低，实在让利<br>
						    •     限首件优惠 火速发货，快才痛快</li>
					</ul>
				</div> 
				<br><br><br><br>
				<div>
					<div id="daojishi"style="text-align:center;margin-top:17px; margin-left: 40px;">
						<img src="img/倒计时.jpg"alt="" style="vertical-align:middle">
						    <span>距离结束还有：</span>
						    <span id="t_d"></span> 
						    <span id="t_h">00时</span> 
						    <span id="t_m">00分</span> 
						    <span id="t_s">00秒</span> 
					
					<div id="shengyu" style="">
							   <img src="img/火花.jpg"alt="" style="vertical-align:middle;margin-top:-65px;margin-left:630px;">
							   <span  style="color: red;font-size: 20px; font-weight: bold;position:absolute;margin-top:-30px;  margin-left: -7px;">24275</span>
							   <span style="color:black;font-size: 20px;position:absolute;margin-left:45px;margin-top:-31px;">
								   &nbsp &nbsp件已付款</span>
							   </div>
				</div></div>
			</div>
				<div id="jiage" style="background:red; color:red ; " >
					<form >
						<table style="font-size: 35px;color: white;font-weight: bold;margin-top:-124px; margin-left: 377px;">
							<tr >
								<td  >￥27.90&nbsp &nbsp </td>
								<td id="table2">¥66.80</td>
							</tr>
						</table>
					</form>
					<div>
						<li style="text-align:center;margin-top:-46px; margin-left: 801px;">
	                      <img src="img/马上抢.jpg"></li>
					</div>
				</div>
				<div id="footer">
					<div id="footer_left">
						<ul style="padding-left: 14px;padding-top: -11px;
	float: left;margin-top: 12px;margin-left: 345px;">
	                          
							<li style="height: 25px;font-size: 11px;">
							    <img src="img/购物车.jpg " alt="" style="vertical-align:middle">加入购物车 </li>
							<li style="height: 25px;font-size: 10px;"> 
							    <img src="img/收藏.jpg " alt="" style="vertical-align:middle">加入收藏</li>
							<li style="height: 25px;font-size: 10px;">
								<img src="img/分享.jpg " alt="" style="vertical-align:middle">分享</li>
						</ul>
					</div>
				<div style="margin-top: 16px;margin-left: 705px;">
						<ul>
							<li style="font-size: 11px;"><img src="img/二维码.jpg"
	                             style="width:30px;height: 30px;alt="" style="vertical-align:middle" "></li>
							<li style="font-size: 11px; color: red;">扫码下载手机客户端<br></li>	
							<li style="font-size: 11px; color: black;">享受手机及专属优惠机会</li>	
							
						</ul>
					</div>
		</div>
	</div>
	</body>
	</html>

css.css

在这里插入代码片    li {
float: left;
list-style: none;
	    }
	    #container{
	         width: 960px;
	         height: 600px;
	         margin:0 auto;
}
#header{
	         width: 100%;
	         height: 60px;
	         border:0px dashed grey;
}

#nav_right{margin-right: 10px auto;
	        
}
#main{
			width: 100%;
			height: 360px;
			border:0px;
			border-style: solid;
	border-color: red;
}

.headerer{
			font-size: 18px;
			margin-top: -315px;
			margin-left: 359px; 
		}
		#middle{
			width:530px;
			height: 80px;
			margin-left: 320px;
			margin-top: ——4px;
			border:0px dashed red;
			float: left;
		}
	
		#table1{
			font-size: 36px;
			color: white;
			font-weight: bold;
			text-align:center;
			margin-top:-154px; 
			margin-left: 800px;
		}
		#table2{
			font-size: 15px;
			color: white;
			text-decoration: line-through;
		}
		#footer{
			height: 40px;
			float: left;
		}
		
		#footer_left ul li{
			
		
		.left1{
			
		}
	</style>
</head>

图片

产品.jpg

倒计时.jpg

二维码.jpg

分享.jpg

购物车.jpg

火花.jpg

马上抢.jpg

收藏.jpg