html+css+js實現一個簡單的電商商城首頁

置頂明天不吃魚 2019-06-15 16:43:14

20679

分類專欄：學習愛我我愛學習文章標簽： html css js 前端 web

最后發布:2019-06-15 16:43:14首次發布:2019-06-15 16:43:14

本文鏈接：http://www.gifted-edu.com/wankcn/article/details/92105068

版權

文章目錄

2020.11.24更新
聲明：慕課網學習時的web大作業，題目慕課網老師給出，總算是成功實現。
1. 靜態網頁源碼
2. 打包地址
- 2.1 GitHub源碼（添加了2020.11.24更新包）
- 2.2 CDSN站內下載（早起更新的資源，只有靜態頁面部分）
2019.7.18 更新實現效果圖

2020.11.24更新

首先，對看到這篇文檔的學弟學妹，大佬前輩們表示真誠的感謝！

這是我大二學習web時的小Demo，沒想到在這里得到了很多人的支持。首先，表示真誠的感謝！這也是對我學習的肯定，非常感謝。

近期來，越來越多的學弟學門們評論和私信我有沒有數據庫和登陸注冊頁面的代碼。哈哈，我想你們一定是為了學期末的大作業。我這次把相應的????????????????????????????????????????????????????????????????????????????????????????????????登陸注冊和數據庫?????????????????????????????????????????????????????????????????????????????????????????????相關的頁面和代碼在原有Demo工程不變的情況下新增文件夾到GitHub。文件夾為????????????????????????????????????????????????????????????????????????????????????????????????2020.11.24更新包?????????????????????????????????????????????????????????????????????????????????????????????。等到后續有時間的時候，我一定會仔細的重構這個Demo，將它完善，并附上詳細的文檔和腦圖提供給愛學習的學弟學妹們參考學習～ (因為目前已經在游戲研發相關的實習，并且在準備春招，所以無法投入精力在web上，抱歉抱歉)

最后，希望這篇文章對學弟學妹有所幫助。再次表示感謝！

聲明：慕課網學習時的web大作業，題目慕課網老師給出，總算是成功實現。

1. 靜態網頁源碼

1.1 index.html：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>商城</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<!-- --------------------頁眉板塊-------------------- -->
	<div class="header">
		<!-- 設置logo -->
		<div class="logo">
			<img src="image/logo.png">
		</div>
		<!-- 設置菜單 -->
		<div class="menu" onmouseleave="show_menu1()">  
			<div class="menu_title" onclick="show_menu()">
				<a href="#">內容分類</a></div>
			<ul id="menu1" >
				<li>現實主義</li>
				<li>抽象主義</li>
			</ul>
		</div>
		<!-- 設置用戶登錄 -->
		<div class="auth">
			<ul>
				<li><a href="#">注冊</a></li>
				<li><a href="#">登錄</a></li>
			</ul>
		</div>
	</div>

	<!-- --------------------正文板塊-------------------- -->
	<div class="content">
		<!-- 設置廣告欄 -->
		<div class="banner">
			<img src="image/welcome.png" class="banner_img">
		</div>
		<div class="img_content">
			<ul>
				<li>
					<img src="image/wumingnvlang.jpg" class="img_li">
					<div class="info">
						<h3>無名女郎</h3>
						<p>
							圖片描述可以分為多種，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊
						</p>
						<div class="img_btn"> 
							<!-- 價格，購買logo -->
							<div class="price">￥ 2300</div>
							<!-- 購物車按鈕 -->
							<div class="btn">
								<a href="#" class="cart">
									<img src="image/cart.svg">
								</a>
							</div>
						</div>
					</div>
				</li>

				<li>
					<img src="image/wumingnvlang.jpg" class="img_li">
					<div class="info">
						<h3>無名女郎</h3>
						<p>
							圖片描述可以分為多種，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊
						</p>
						<div class="img_btn"> 
							<!-- 價格，購買logo -->
							<div class="price">￥ 2300</div>
							<!-- 購物車按鈕 -->
							<div class="btn">
								<a href="#" class="cart">
									<img src="image/cart.svg">
								</a>
							</div>
						</div>
					</div>
				</li>

				<li>
					<img src="image/wumingnvlang.jpg" class="img_li">
					<div class="info">
						<h3>無名女郎</h3>
						<p>
							圖片描述可以分為多種，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊
						</p>
						<div class="img_btn"> 
							<!-- 價格，購買logo -->
							<div class="price">￥ 2300</div>
							<!-- 購物車按鈕 -->
							<div class="btn">
								<a href="#" class="cart">
									<img src="image/cart.svg">
								</a>
							</div>
						</div>
					</div>
				</li>

				<li>
					<img src="image/wumingnvlang.jpg" class="img_li">
					<div class="info">
						<h3>無名女郎</h3>
						<p>
							圖片描述可以分為多種，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊
						</p>
						<div class="img_btn"> 
							<!-- 價格，購買logo -->
							<div class="price">￥ 2300</div>
							<!-- 購物車按鈕 -->
							<div class="btn">
								<a href="#" class="cart">
									<img src="image/cart.svg">
								</a>
							</div>
						</div>
					</div>
				</li>

				<li>
					<img src="image/wumingnvlang.jpg" class="img_li">
					<div class="info">
						<h3>無名女郎</h3>
						<p>
							圖片描述可以分為多種，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊
						</p>
						<div class="img_btn"> 
							<!-- 價格，購買logo -->
							<div class="price">￥ 2300</div>
							<!-- 購物車按鈕 -->
							<div class="btn">
								<a href="#" class="cart">
									<img src="image/cart.svg">
								</a>
							</div>
						</div>
					</div>
				</li>

				<li>
					<img src="image/wumingnvlang.jpg" class="img_li">
					<div class="info">
						<h3>無名女郎</h3>
						<p>
							圖片描述可以分為多種，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊，這里是一個關于展示的板塊
						</p>
						<div class="img_btn"> 
							<!-- 價格，購買logo -->
							<div class="price">￥ 2300</div>
							<!-- 購物車按鈕 -->
							<div class="btn">
								<a href="#" class="cart">
									<img src="image/cart.svg">
								</a>
							</div>
						</div>
					</div>
				</li>
			</ul>
			
		</div>
		<!-- 分頁 -->
		<div class="page_nav">
			<ul>
				<li><a href="#">首頁</a></li>
				<li><a href="#">上一頁</a></li>

				<li><span class="first_page">1</span></li>

				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">...</a></li>
				<li><a href="#">98</a></li>
				<li><a href="#">99</a></li>

				<li><a href="#">下一頁</a></li>
				<li><a href="#">尾頁</a></li>
			</ul>
		</div>
		
	</div>
	<!-- --------------------頁腳板塊-------------------- -->
	<div class="footer">
		<p class="p2">造燭求明，讀書求理? 2019 POWERED BY <span>WanKcn</span></p>
	</div>
</body>
</html>

1.2 index.css

/*將所有的距離，間距都設置為0*/
*{
	padding: 0px;
	margin: 0px;
}
body{
	background-color: #F5F5F5 /*白煙色*/
}
/*--------------------logo,menu,login區域設計--------------------*/
/*設置頁眉的位置*/
.header{
	width: 1200px;
	margin: 25px auto; /*注意空格分開而不是逗號*/
}

/*子菜單不顯示*/
.header .menu ul{
	display: none; 
	list-style: none; /*去點*/
	/*關聯banner布局*/
	position: absolute;
	width: 80px;  
	opacity: 0.5; /*透明效果*/
	background-color: white;
}

/*設置菜單和logo位置*/
.header .logo{
	float: left;
	position: relative;
}
/*菜單位置*/
.header .menu{
	float: left;
	position: relative;
	margin-top: 12px;
	margin-left: 16px; 
}
/*menu浮動事件 菜單折疊*/
/*.header .menu:hover ul{
	display: block;
}*/
/*---------------菜單樣式設置---------------*/
/*菜單間距*/
.header .menu ul li{
	margin-top: 20px; 
	text-align: center; /*和菜單標題同時居中*/
}
/*菜單邊框*/
.header .menu .menu_title{
	border-bottom: 1px solid black;
	padding-bottom: 20px;
	width: 80px;
	text-align: center;
}
/*超級鏈接去下劃線*/
a{
	text-decoration: none;
}
/*---------------login樣式設置---------------*/
.header .auth{
	float: right;
}
.header .auth ul li{
	float: left;
	margin-right: 70px;
	margin-top: 12px;    /*上邊距*/
	list-style: none;
}

/*--------------------正文區域設計--------------------*/
/*---------------banner樣式---------------*/
.content{
	/*響應式布局始終居中*/
	width: 1200px;
	margin: 25px auto;
}
/*圖片距離*/
.content .banner .banner_img{
	margin-top: 20px;
}
/*---------------正文圖片樣式---------------*/
/*整體圖片橫向布局*/
.content .img_content ul{
	width: 1280px;
}
.content .img_content ul li{
	width: 360px;  /*360*3+120*/
	float: left;
	margin: 0 60px 60px 0; 
	list-style: none;
	background-color: #FFFFFF;
	/*處理邊框*/
	margin-top: 30px;
	height: 500px; /*列表邊框*/
	/*陰影位置， 垂直陰影位置，漸變距離，陰影尺寸，陰影顏色*/
	/*box-shadow: 0 0 5px 3px #ccc */
	/*瀏覽器兼容*/
	-webkit-box-shadow: 0 0 5px 3px #ccc; /*谷歌瀏覽器*/
	-moz-box-shadow: 0 0 5px 3px #ccc; /*火狐瀏覽器*/
}
/*標題設置*/
.content .img_content .info h3{
	font-size: 25px;
	color: red;
	margin-top: 20px;
	margin-bottom: 20px;
}
/*圖片的段落信息設置*/
.content .img_content .info p{
	line-height: 25px;
	/*加一個下邊距和價格隔開*/
	margin-bottom: 10px;
}
.content .img_content .info{
	margin-left: 30px;
	margin-right: 30px;
}
/*價格樣式*/
.content .img_content .info .img_btn .price{
	color: red;
	font-size: 20px;
}

/*購物車設置*/
.content .img_content .info .img_btn{
	width: 300px;
}
.content .img_content .info .img_btn .btn{
	width: 60px;
	height: 30px;
	background-color: red;
	text-align: center;
	border-radius: 5px; /*圓角矩形*/
	float: right;
}
.content .img_content .info .img_btn .btn .cart img{
	width: 60px;
	height: 20px;
	margin-top: 5px;

}
.content .img_content .info .img_btn .price{
	float: left;
}
/*頁碼導航欄*/
.content .page_nav{
	width: 100%; /*大小不超出content*/
	height: 60px;
	line-height: 60px;
	/*border: 1px solid black;*/
	/*溢出處理*/
	overflow:hidden;
}
.content .page_nav ul li{
	float: left;
	margin-right: 20px;
	list-style: none; 
}
.content .page_nav ul{
	width: 500px;
	margin: auto;
	overflow:hidden;
}
/*第一頁設置背景圓*/
.content .page_nav .first_page{
	border-radius: 50%;
	background-color: #c5c5c5;
	padding: 3px 9px; /*圓心內部邊距把圓撐起來*/ 
}

/*-------------------------頁腳區域設計-------------------------*/
.footer{
	width: 1200px;
	height: 100px;
	margin: 60px auto;
	/*加一條上邊框分割線*/
	border-top:1px solid #ccc;
	overflow: hidden; 
}
.footer p{
	text-align: center;
	line-height: 80px;
}	
.footer p span{
	color: #ff1490;
}

1.3 index.js

// js實現菜單折疊
var flag=true; //開關按鈕
function show_menu(){
	var menu1 = document.getElementById("menu1");
	if(flag){
		menu1.style.display="block";
		flag = false;
	}else{
		menu1.style.display="none";
		flag = true;
	}	
}

function show_menu1(){
	var menu1 = document.getElementById("menu1");
	menu1.style.display="none";
	flag = true; //鼠標離開時將flag默認回true
}