實驗二倒計時頁面的實現淘寶秒殺頁面

原創

2020-05-26 05:25

商品.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>