前端油画商城案例 (html+css+javascript)
模块一:页眉
html
<!--先制作页眉-->
<div class="header">
<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>
css
*{
padding: 0px;
margin: 0px; /*先设置为0,再设置自己的位置*/
}
.header{
margin: 25px auto 0 50px; /* top right bottom left */
}
.header .menu ul{
display: none;
list-style: none;
}
.header .logo{
float: left;
position: relative;
}
.header .menu{
float: left;
position: relative;
margin-top: 12px;
margin-left: 16px;
}
/* 用css来实现隐藏浮现 */
/* .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;
}
.header .auth{
float: right;
position: relative;
}
.header .auth ul li{
float: right;
margin-right: 70px;
margin-top: 12px;
list-style: none;
}
javascript
```javscript
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(){
// alert("ttttt");
var menu1=document.getElementById("menu1");
menu1.style.display="none";
flag=true;
}
模块二:商品展示区
例子 主页面:
html
<!-- content -->
<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>wumingnvlang</h3>
<p>picture description</p>
<div class="img-btn">
<div class="price">$5800</div>
<a href="#" class="cart">
<div class="btn">
<img src="image/cart.svg">
</div>
</a>
</div>
</div>
</li>
<li>
<img src="image/wumingnvlang.jpg" class="img-li">
<div class="info">
<h3>wumingnvlang</h3>
<p>picture description</p>
<div class="img-btn">
<div class="price">$5800</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>wumingnvlang</h3>
<p>picture description</p>
<div class="img-btn">
<div class="price">$5800</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>wumingnvlang</h3>
<p>picture description</p>
<div class="img-btn">
<div class="price">$5800</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>wumingnvlang</h3>
<p>picture description</p>
<div class="img-btn">
<div class="price">$5800</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>wumingnvlang</h3>
<p>picture description</p>
<div class="img-btn">
<div class="price">$5800</div>
<div class="btn">
<a href="#" class="cart">
<img src="image/cart.svg">
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
css
.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;
float: left;
margin: 0 60px 60px 0;
list-style: none;
/* 设置边框等格式 */
margin-top: 20px;
height: 500px;
box-shadow: 0 0 3px 3px #ccc;
/* 阴影位置水平,垂直,渐变,阴影的尺寸 阴影的颜色 */
-webkit-box-shadow:0 0 3px 3px #ccc;
/* 谷歌浏览器 */
-moz-box-shadow:0 0 3px 3px #ccc;
/* 火狐 */
background-color: #FFFFFF;
}
/* 设置标题 */
.img-content .info h3{
font-size: 25px;
color: red;
margin-top: 20px;
margin-bottom: 20px;
}
/* 段落的行间距 */
.img-content>ul>li .info p{
line-height: 25px;
margin-bottom: 20px;
}
.info{
margin-left: 30px;
margin-right: 30px;
}
/* 设置价格 */
.img-content>ul>li .price{
color: red;
font-size: 20px;
}
.img-content .info .img-btn{
width: 300px;
}
.img-content .info .img-btn .btn{
width: 60px;
height: 30px;
background-color: red;
text-align: center;
border-radius: 5px;
float: right;
}
.img-content .info .img-btn .cart img{
width: 25px;
height: 20px;
margin-top: 5px ;
}
.img-content .info .img-btn .price{
float: left;
}
body{
background-color: #f5f5f5;
}
例子:页数
html
<div class="page-nav">
<ul>
<li><a href="#">main page</a></li>
<li><a href="#">previous page</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="#">next page</a></li>
<li><a href="#">last page</a></li>
</ul>
</div>
css
/* 页数的配置 */
.page-nav ul li{
float: left;
margin-right: 20px;
list-style: none;
}
.page-nav{
width: 100%;
height: 60px;
line-height: 60px;
/* border:1px solid black; */
overflow: hidden;
}
.page-nav ul{
margin: auto;
overflow: hidden;
width: 500px;
}
/* 设置1阴影 */
.first-page{
border-radius: 50%;
background-color: #c5c5c5;
padding: 3px 9px;
}
模块三:页脚
html
<div class="footer">
<p><span>this is footer!!!</span> yayaya</p>
</div>
css
/* 页脚编写 */
.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: chocolate;
}