实例
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/reset.css" rel="stylesheet" type="text/css"/> <link href="css/common.css" rel="stylesheet" type="text/css"/> <link href="css/index.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="header"> <div class="tape"> <div class="info"> <p class="left">欢迎光临鲜花订购网</p> <p class="right">登录 注册</p> </div> </div> <div class="info"> <div class="logo"><img src="images/logo1.png"></div> <div class="serach"> <input type="text" name="name" placeholder="关键字"> <button>搜索</button> </div> </div> <div class="menu"> <div class="info"> <ul> <li><a href="">Home</a></li> <li><a href="">Shop Grid</a></li> <li><a href="">Single Product</a></li> <li><a href="">Love & Romance</a></li> <li><a href="">Occasion</a></li> <li><a href="">Flowers</a></li> <li><a href="">Sympathy</a></li> <li><a href="">Blog</a></li> <li><a href="">Specials</a></li> </ul> </div> </div> </div> <div class="banner"> <img src="images/slide1.jpg"> <div class="line"></div> </div> <div class="top"> <div class="info"> <ul> <li><img src="images/top1.png"></li> <li><img src="images/top2.png"></li> <li><img src="images/top3.png"></li> </ul> </div> </div> <div class="top2"> <p class="header">Best Seller</p> <div class="info"> <ul> <li><img src="images/img01.jpg"><div class="money">$155.00</div><a href="#"><div class="add">ADD TO CART</div></a></li> <li><img src="images/img02.jpg"><div class="money">$255.00</div><a href="#"><div class="add">ADD TO CART</div></a></li> <li><img src="images/img03.jpg"><div class="money">$195.00</div><a href="#"><div class="add">ADD TO CART</div></a></li> <li><img src="images/img04.jpg"><div class="money">$305.00</div><a href="#"><div class="add">ADD TO CART</div></a></li> </ul> </div> </div> <div class="top3"> <img src="images/1.png"> </div> <div class="top2"> <p class="header">New Products</p> <div class="info"> <ul> <li><img src="images/img12.jpg"><div class="money">$255.00</div><a href="#"><div class="add">ADD TO CART</div></a></li> <li><img src="images/img13.jpg"><div class="money">$205.00</div><a href="#"><div class="add">ADD TO CART</div></a></li> <li><img src="images/img14.jpg"><div class="money">$155.00</div><a href="#"><div class="add">ADD TO CART</div></a></li> <li><img src="images/img15.jpg"><div class="money">$405.00</div><a href="#"><div class="add">ADD TO CART</div></a></li> </ul> </div> </div> <hr color="#ebebe0"> <div class="top4"> <p class="header">Latest Blog</p> <div class="info"> <ul> <li><img src="images/blog-img1.jpg"><div class="jie"></div></li> <li><img src="images/blog-img2.jpg"><div class="jie"></div></li> <li><img src="images/blog-img3.jpg"><div class="jie"></div></li> </ul> </div> </div> <div class="last"> <div class="dv1"> 您的光临使我们蓬荜生辉，请多提建议！！！ </div> <div class="dv2"> <p>Copyright © 2018.Company name All rights reserved.网页模板</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 reset.css
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 2018/3/29, 上午 09:46:13
Author : Berg_Guo
*/
/*重置一些元素的样式*/
htnl{
overflow-y: auto;
overflow-x: hidden;
}
body, h1, h2, h3, ul, li,p{
margin: 0;
padding: 0;
font-family: "microsoft yehei";
color: #505050;
}
p, li, a{
font-size: 14px;
}
ul, li{
list-style-type: none;
}
a:link, a:visited, a:active{
color: #505050;
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #f00;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 index.css
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 2018/3/29, 上午 10:37:09
Author : Berg_Guo
*/
.banner{
/*border: 1px solid red;*/
}
.banner img{
width: 100%;
height: 400px;
vertical-align: top;
}
.banner .line{
height: 30px;
background-color: #696969;
margin-top: -30px;
opacity: 0.4;
}
.top {
width: 1140px;
height: 230px;
margin: 20px auto;
}
.top .header{
text-align: center;
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
}
.top ul li{
float: left;
margin-right: 20px;
}
.top ul li img{
width: 360px;
height: 222px;
margin-bottom: 20px;
}
.top2 {
width: 1140px;
margin: 20px auto;
}
.top2 .header{
text-align: center;
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
}
.top2 ul li{
float: left;
border: 1px solid #888;
margin: 20px 10px;
text-align: center;
}
.top2 ul li img{
width: 260px;
height: 280px;
}
.top2 ul li .money{
color: #ff3399;
font-size: 1.2em;
margin-bottom: 10px;
}
.top2 ul li .add{
width: 160px;
line-height: 40px;
border: 1px solid black;
font-size: 1.2em;
margin: 15px auto;
}
.top3{
width: 1140px;
height: 150px;
margin: 20px auto;
}
.top3 img{
width: 100%;
}
.top3 .img1{
margin: 30px auto;
}
.top4 {
width: 1140px;
height: 230px;
margin: 40px auto;
overflow: hidden;
}
.top4 .header{
text-align: center;
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
}
.top4 ul li{
float: left;
margin-right: 20px;
}
.top4 ul li img{
width: 360px;
height: 222px;
margin-bottom: 40px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 common.css
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 2018/3/29, 上午 09:53:14
Author : Berg_Guo
*/
.header{
width: 100%;
}
.header .tape{
height: 30px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
background-color: #fbfbfb;
overflow: hidden;
}
.info{
width: 1140px;
margin: auto;
overflow: hidden;
}
.header .tape .info .left{
float: left;
}
.header .tape .info .right{
float: right;
}
.header .info .logo{
margin-top: 20px;
width: 440px;
height: 80px;
float: left;
}
.header .info .serach{
float: right;
height: 80px;
margin-top: 10px;
margin-right: 100px;
}
.header .info .serach input{
border: 2px solid coral;
width: 200px;
height: 20px;
margin: 10px 0;
}
.header .info .serach button{
width: 51px;
height: 26px;
background-color: coral;
border: none;
color: white;
margin-left: -49px;
}
.header .menu{
width: 1140px;
height: 60px;
background-color: #ff3399;
margin: 0 auto;
}
.header .menu ul li{
float: left;
line-height: 60px;
padding: 0 20px;
}
.header .menu ul li a{
font-size: 1.2em;
color: white;
}
.header .menu ul li:hover{
background-color: coral;
cursor: pointer;
}
.last{
width: 100%;
height: 200px;
}
.last .dv1{
line-height: 150px;
text-align: center;
background-color: #004c99;
font-size: 2em;
font-weight: bold;
color: white;
}
.last .dv2{
line-height: 50px;
text-align: center;
background-color: black;
font-size: 1.4em;
font-weight: bold;
color: white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
