1. 程式人生 > >淘寶網的簡單版html+css

淘寶網的簡單版html+css

話不多說,直接上程式碼

<!--
	作者:李主龍
	時間:2018-06-25
	描述:淘寶網布局
	聯絡方式:[email protected]
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/taobao.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="tb">
			<div class="top_left"><span style="color: orange;">親,請登入  </span>免費註冊      手機逛淘寶</div>
			<div class="top_right">
				<ul>
					<li>我的淘寶</li>
					<li>購物車</li>
					<li>收藏夾</li>
					<li>商品分類</li>
					<li>賣家中心</li>
					<li>網站導航</li>
				</ul>
			</div>
		</div>
		<!--
			以上是淘寶網頂部佈局
			下面部分將介紹第二部分佈局:淘寶logo、搜尋欄、手機淘寶二維碼
        -->
	<div>
		<div class="tblogo"><img src="img/u1.bmp" width="280px" height="180px"/></div>
		<!--
        	淘寶logo
        -->
		<div class="serch">
			<div style="padding:0px;margin: 0px;">
				<ul>
					<li style="background-color: red;color: azure;">寶貝</li>
					<li>天貓</li>
					<li>店鋪</li>
				</ul>
			</div>
			<div style="border:1px solid azure;width: 10px;height: 10px;"></div>
			<div style="margin-top:0px;">
				<input type="text" style="border: 2px solid red;width: 380px;height: 30px;"/><span><button type="button" style="border:1px solid red;width: 60px;height: 30px;text-align: center;font-size:14px;background: red;color: azure;">搜尋</button></span>
			</div>
			<div>
				<ul>
					<li>耳機</li>
					<li>短褲</li>
					<li>滑鼠</li>
					<li>體恤</li>
					<li>電腦</li>
					<li>玩具</li>
					<li>大米</li>
					<li>水果</li>
					<li>男鞋</li>
				</ul>
			</div>
		</div>
		<!--
        	搜尋欄
        -->
		<div class="descode">
			<div>手機淘寶</div>
			<div><img src="img/d160.png" width="80px" height="80px"/></div>
		</div>
	</div>
	<!--
    	下面是淘寶網第三部分的佈局,分割條spliter
    -->
    <div>
    	<div class="spliter"><span style="width: 180px;height: 20px;line-height: 20px;padding: 5px;text-align: center;background-color: red;margin-left: 20px;">主題市場</span><span style="padding:5px;padding-left: 20px;height: 20px;line-height: 20px;">天貓    聚划算    天貓超市    |    淘搶購    電器城    司法拍賣    中國質造    興農扶貧</span></div>
    </div>
    <!--
    	下面是淘寶網第四部分的佈局
    -->
    <div>
    	<div class="space"></div>
    	<!--
        	下面是商品列表佈局
        -->
    	<div class="list_shop">
    		<ul>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			<li>男裝 / 女裝 / 內衣       ></li>
    			
    		</ul>
    	</div>
    	<!--
        	下面是商品圖片佈局
        -->
    	<div class="list_img">
    		<div><img src="img/market.jpg" width="440px" height="240px"></div>
    		<div>
    			<img src="img/1.png" width="130px"/><span><img src="img/2.jpg" width="130px"</span><img src="img/3.jpg" /><span><img src="img/4.jpg"></span>
    		</div>
    	</div>
    	<div class="login">
    		<div style="text-align: center;">
    			<div><img src="img/ren.jpg"></div>
    			<div style="font-size:12px;height:20px;line-height:20px;">Hi! 你好</div>
    			<div style="font-size: 14px;color: red;height:20px;line-height:20px;">領淘金幣抵錢   會員俱樂部</div>
    		</div>
    		<!--
                	下面是三個按鈕登入、註冊、開店
            -->
    		 <div style="width:auto;">
    		 	<ul>
    		 		<li><button type="button" style="border:1px solid red;background-color:red;color:azure;width:80px;">登入</button></li>
    		 		<li><button type="button" style="border:1px solid red;background-color:red;color:azure;width:80px;">註冊</button></li>
    		 		<li><button type="button" style="border:1px solid red;background-color:red;color:azure;width:80px;">開店</button></li>
    		 	</ul>
    		 </div>
    		 <!--
             	網路資訊保安矩形條
             -->
    		 <div style="text-align:center;margin-top:16px;border:1px solid azure;background-color:cornsilk;width:254px;height:20px;color:red;line-height:20px;font-size:14px;">網上有害資訊舉報專區</div>
    		 
    		 <!--
             	新聞公告如下
             -->
    		 <div>
    		 	<div id="repoter">
    		 		<ul>
    		 			<li>公告</li>
    		 			<li>規則</li>
    		 			<li>論壇</li>
    		 			<li>安全</li>
    		 			<li>公益</li>
    		 		</ul>
    		 	</div>
    		 	<div style="border:1px solid azure;width:2px;height:2px;"></div>
    		 	<!--
                 	新聞、公告
                 -->
    		 	<div id="message">
    		 		<ul>
    		 			<li>阿里教育脫貧 助寒門學子公平就業 </li>
    		 			<li style="color:black;">盤點世界盃帶火的職業</li>
    		 			
    		 		</ul>
    		 	</div>
    		 </div>
    		 <div style="border:1px solid azure;width:2px;height:2px;"></div>
    		 <!--
             	淘寶應用
             -->
    		 <div style="text-align: center;padding-top:10px;">
    		 	<img src="img/aaaa.png" />
    		 	
    		 </div>
    	</div>
    	
    </div>
	</body>
</html>

還有css程式碼

.tb{
	background-color: bisque;
	padding: 5px 0px 5px 70px;
	height: 20px;
	border:2px solid bisque;
}
.top_left{
	float: left;
	width: auto;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
}
.top_right{
	float: right;
	width: auto;
	height: 20px;
	line-height: 20px;
	margin-right: 20px;
}
*{
	padding: 0px;
	margin: 0px;
}
.top_right ul li{
	text-decoration: none;
	list-style: none;
	width: 80px;
	float:left;
	font-size: 12px;
}
.tblogo{
	float: left;
	width: 300px;
	height: 200px;
	border:1px solid azure;
}
.serch{
	float: left;
	width: 500px;
	height: 200px;
	border:1px solid azure;
	padding: 50px;
	padding-top:70px;
	padding-right:0px;
}
.serch ul li{
	float: left;
	width:40px;
	height:20px;
	text-align: center;
	line-height: 20px;
	list-style:none;
}
.descode{
	float: right;
	width: 190px;
	height: 200px;
	border:1px solid azure;
	padding-top: 50px;
	text-align: center;
}
.spliter{

	background-color: orange;
	color:azure;
	width: auto;
	height: 20px;
}
.space{
	float: left;
	width: 20px;
	height: 200px;
	border:1px solid azure;
}
.list_shop{
	padding-top:20px;
	float: left;
	width: 180px;
	height: 480px;
	border:1px solid red;
	text-align: center;
}
.list_shop ul li{
	list-style:none;
	height:40px;
}
.list_img{
	float: left;
	width: 540px;
	height: 480px;
	border:1px solid azure;

	padding-top:10px;
	text-align: center;
}
.login{
	float: right;
	width: 256px;
	height: 480px;
	border:1px solid azure;
	padding-top:16px;
}
.login div ul li{
	float: left;
	width: 84px;
	height:20px;
	line-height:20px;
	text-align: center;
	list-style:none;
}
#repoter{
	padding:5px;
	
}
#repoter ul li{
	list-style:none;
	float:left;
	width:48px;
}
#message{
	padding:2px;
}
#message ul li{
	list-style:none;
	color:red;
	width:auto;
}
http://19761454ox.iask.in:26746/可以看效果