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>
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;
}
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
}
