1.简单的物品浏览页
(1)reset.css文件(初始化一些样式,例如消除a标签的下划线)
/*将标签默认的间距设为0*/
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,selector,form{
margin: 0;padding: 0;
}
/*让h标签继承body内设置的字体大小*/
h1,h2,h3,h4,h5,h6{
font-size: 100%;
}
/*去掉默认的列表标签*/
ul{
list-style: none;
}
/*设置em文字不倾斜*/
em{
font-style: normal;
}
/*清除下划线*/
a{
text-decoration: none;
}
/*清除图片的边框*/
img{
border: none;
}
/*清楚margin-top塌陷和浮动问题*/
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
/*解决ie清楚浮动的问题*/
.clearfix{
zoom: 1;
}
/*向左浮动*/
.fl{
float: left;
}
/*向右浮动*/
.fr{
float: right;
}
2.页面内详细css样式
body{
font-family: "Microsoft Yahei";
color: #666;
font-size: 12px;
}
/*=======================首页样式==========================*/
/*顶部状态条样式*/
.header_con{
height:29px;
background-color: #f7f7f7;
border-bottom: 1px solid #ddd;
}
.header{
width: 1200px;
height: 29px;
margin: 0 auto;
}
.welcome{
font:12px/29px 'Microsoft Yahei';
color: #666666;
}
.user_login_link,.user_welcome,.user_shopping{
height: 29px;
line-height: 29px;
}
.user_login_link a,.user_shopping a{
color: #666666;
}
.user_login_link a:hover,.user_shopping a:hover{
color: #ff8800;
}
.user_login_link span,.user_shopping span{
margin: 0px 15px;
color: #cecece;
}
.user_welcome{
display: none;
}
.user_welcome em{
color: #ff8800;
}
/*logo 搜索 购物车样式*/
.logo_bar{
width: 1200px;
height: 115px;
margin: 0 auto;
}
.logo{
width: 151px;
height: 59px;
margin: 29px 0 0 17px;
}
.search{
width: 616px;
height: 38px;
border:1px solid #37ab40;
margin: 34px 0 0 123px;
background: url("../image_day/icons.png") 8px -337px no-repeat;
}
.search .input_text{
width: 470px;
height: 38px;
border: 0px;
outline: none;
margin-left: 37px;
}
.search .input_btn{
width: 100px;
height: 38px;
background-color: #37ab40;
border: 0px;
font: 14px/38px 'Microsoft Yahei';
color: #ffffff;
cursor: pointer;
}
.chart{
width: 200px;
height: 40px;
margin-top: 34px;
}
.chart a{
width: 158px;
height: 38px;
border: 1px solid #ddd;
font: 14px/38px 'Microsoft Yahei';
color: #37ab40;
text-indent: 56px;
background: url("../image_day/icons.png") 15px -301px no-repeat #f7f7f7;
}
.chart span{
width: 40px;
height: 40px;
background-color: #f80;
font: bold 18px/40px 'Microsoft Yahei';
color: white;
text-align: center;
}
.sub_menu_con{
height: 40px;
border-bottom: 2px solid #37ab40;
}
.sub_menu{
width: 1200px;
height: 40px;
margin: 0 auto;
}
.sub_menu h1{
width: 200px;
height: 40px;
background-color: #37ab40;
font: 14px/40px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
.sub_menu ul{
overflow: hidden;
}
.sub_menu li{
float: left;
height: 14px;
padding: 0 25px;
border-left: 1px solid #666;
margin-left: -1px;
margin-top: 13px;
}
.sub_menu li a{
font: 14px/14px 'Microsoft Yahei';
color: #666;
}
.sub_menu li a:hover{
color: #f80;
}
/*左侧菜单样式*/
.center_con{
width: 1200px;
height: 270px;
margin: 0 auto;
}
.center_con .main_menu{
width: 200px;
height: 270px;
overflow: hidden;
}
.center_con .main_menu li{
width: 198px;
height: 44px;
border: 1px solid #eee;
margin-top: -1px;
background: url("../image_day/icons.png") 175px -259px no-repeat;
}
.center_con .main_menu li a{
display: block;
width: 198px;
height: 44px;
font: 14px/44px 'Microsoft Yahei';
color: #333333;
text-indent: 71px;
background: url("../image_day/icons.png") 16px 0px no-repeat;
}
.center_con .main_menu li .fruit{
background-position: 16px 0px;
}
.center_con .main_menu li .seafood{
background-position: 16px -44px;
}
.center_con .main_menu li .meat{
background-position: 16px -88px;
}
.center_con .main_menu li .egg{
background-position: 16px -134px;
}
.center_con .main_menu li .vegetables{
background-position: 16px -176px;
}
.center_con .main_menu li .ice{
background-position: 16px -221px;
}
/*轮播图*/
.slide_con{
width: 760px;
height: 270px;
position: relative;
}
.prev{
width: 15px;
height: 23px;
position: absolute;
left: 11px;
top: 122px;
cursor: pointer;
background: url("../image_day/icons.png") 40px -387px;
}
.next{
width: 15px;
height: 23px;
position: absolute;
right: 11px;
top: 122px;
cursor: pointer;
background: url("../image_day/icons.png") 40px -427px;
}
.points{
position: absolute;
width: 100%;
height: 11px;
left: 0px;
bottom: 9px;
text-align: center;
font-size: 0px;
}
.points li{
width: 11px;
height: 11px;
display: inline-block;
background-color: #9f9f9f;
margin: 0 5px;
border-radius: 50%;
}
.points .active{
background-color: #cecece;
}
.adv{
width: 240px;
height: 270px;
}
.adv a{
float: left;
width: 240px;
height: 135px;
}
/*解决图片下方出现的3像素的空白*/
.adv a img{
display: block;
}
/*商品列表*/
.common_model{
width: 1200px;
height: 340px;
margin: 18px auto 0;
}
.common_model .common_title{
height: 38px;
border-bottom: 2px solid #42ad46;
}
.common_model .common_title h3{
font: bold 16px/38px 'Microsoft Yahei';
color: #37ab40;
}
.common_model .common_title ul{
height: 12px;
margin: 13px 0 0 20px;
}
.common_model .common_title li{
float: left;
margin: 0 10px;
}
.common_model .common_title li a{
color: #666;
font-size: 12px;
line-height: 10px;
}
.common_model .common_title li a:hover,.common_model .common_title .more:hover{
color: #f80;
}
.common_model .common_title .more{
height: 38px;
line-height: 38px;
color: #666;
}
.common_model .common_goods_list{
width: 1200px;
height: 300px;
}
.common_model .goods_banner{
width: 200px;
height: 300px;
}
.common_model .common_goods_list .goods_list{
width: 1000px;
height: 300px;
}
.common_model .common_goods_list .goods_list li{
width: 249px;
height: 299px;
border-right:1px solid #ededed;
border-bottom: 1px solid #ededed;
float: left;
}
.common_model .common_goods_list .goods_list li h4{
height: 52px;
font: 14px/52px 'Microsoft Yahei';
color: #666666;
text-align: center;
}
.common_model .common_goods_list .goods_list li a{
display: block;
width: 180px;
height: 180px;
margin: 0 auto;
}
.common_model .common_goods_list .goods_list li p{
height: 52px;
font: bold 20px/52px 'Microsoft Yahei';
color: #c40000;
text-align: center;
}
.common_model .common_goods_list .goods_list li:hover{
width: 248px;
height: 298px;
border: 1px solid gold;
}
.footer{
height: 145px;
border-top: 2px solid #4ab14e;
margin-top: 30px;
}
.footer .links{
text-align: center;
margin-top: 40px;
}
.footer .links a{
color: #4e4e4e;
}
.footer .links a:hover{
color: #f80;
}
.footer .links span{
color: #4e4e4e;
margin: 0 10px;
}
.footer p{
text-align: center;
line-height: 27px;
color: #4e4e4e;
margin-top: 10px;
}
/*=======================首页样式==========================*/
/*=======================登录页样式==========================*/
.login_header{
width: 953px;
height: 133px;
margin: 0 auto;
}
.login_header a{
display: block;
width: 193px;
height: 76px;
margin-top: 28px;
}
.login_form_con{
border-top: 1px solid #79a652;
height: 480px;
background-color: #518e17;
}
.login_form{
width: 953px;
height: 482px;
margin: 0 auto;
}
.login_form .login_banner{
margin: 92px 0 0 15px;
}
.login_form .slogan{
color: #ffffff;
font-size: 30px;
width: 30px;
height: 293px;
text-align: center;
line-height: 36px;
margin-top: 83px;
margin-left: 114px;
}
.login_form .form_input_con{
width: 368px;
height: 379px;
background-color: white;
border: 1px solid #c6c6c5;
margin-top: 50px;
}
.login_footer{
border-top: 0px;
margin-top: 0px;
}
.form_title{
width: 308px;
height: 70px;
border-bottom: 1px solid #e0e0e0;
margin: 0 auto;
}
.form_title h1{
float: left;
height: 70px;
font: bold 24px/70px 'Microsoft Yahei';
color: #a8a8a8;
margin-left: 44px;
}
.form_title a{
width: 100px;
height: 16px;
font: 16px/16px 'Microsoft Yahei';
color: #5fb42a;
text-indent: 25px;
float: left;
background: url("../image_day/icons02.png") 0px 0px no-repeat;
margin: 27px 0 0 33px;
}
.form_input_con form{
width: 308px;
height: 221px;
margin: 20px auto 0;
}
.form_input_con form .form_group{
width: 308px;
height: 68px;
}
.form_group .input_txt,.form_group .input_pwd{
width: 306px;
height: 38px;
border: 1px solid #e0e0e0;
outline: none;
text-indent: 10px;
background: url("../image_day/icons02.png") 274px -43px no-repeat #f8f8f8;
}
.form_group .input_pwd{
background-position: 274px -93px;
}
.form_group .error{
font: 12px/28px 'Microsoft Yahei';
color: #ff5400;
display: none;
}
.form_group .input_check{
margin: 2px 10px 0 0;
}
.find_pass{
color: #4b4b4b;
}
.find_pass:hover{
color: #f80;
}
.input_sub{
width: 308px;
height: 40px;
background-color: #47aa34;
border: 0;
font: 24px/40px 'Microsoft Yahei';
color: white;
cursor: pointer;
}
3.html文件:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>天天生鲜-首页</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="header_con">
<div class="header">
<div class="welcome fl">欢迎来到天天生鲜</div>
<div class="user_info fr">
<!--登录注册块-->
<div class="user_login_link fl" style="display: none">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
</div>
<!--用户欢迎页-->
<div class="user_welcome fl" style="display: block">
欢迎您:<em>胖哥哥</em>
</div>
<div class="user_shopping fl">
<span>|</span>
<a href="#">我的购物车</a>
<span>|</span>
<a href="#">我的订单</a>
</div>
</div>
</div>
</div>
<div class="logo_bar">
<div class="logo fl">
<a href="#"><img src="image_day/logo.png" alt="logo"/></a>
</div>
<div class="search fl">
<form action="#">
<input type="text" name="" placeholder="搜索" class="input_text fl" >
<input type="button" name="" value="搜索" class="input_btn fr">
</form>
</div>
<div class="chart fr">
<a href="#" class="fl">我的购物车</a>
<span class="fr">0</span>
</div>
</div>
<div class="sub_menu_con">
<div class="sub_menu">
<h1 class="fl">全部商品分类</h1>
<ul>
<li><a href="">首页</a></li>
<li><a href="">手机生鲜</a></li>
<li><a href="">抽奖</a></li>
</ul>
</div>
</div>
<div class="center_con">
<ul class="main_menu fl">
<li><a href="" class="fruit">新鲜水果</a></li>
<li><a href="" class="seafood">海鲜水产</a></li>
<li><a href="" class="meat">猪牛羊肉</a></li>
<li><a href="" class="egg">禽类蛋品</a></li>
<li><a href="" class="vegetables">新鲜蔬菜</a></li>
<li><a href="" class="ice">速冻食品</a></li>
</ul>
<div class="slide_con fl">
<ul class="slide">
<li><a href=""><img src="image_day/slide.jpg" alt="轮播图"></a></li>
</ul>
<div class="prev"></div>
<div class="next"></div>
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="adv fl">
<a href=""><img src="image_day/adv01.jpg" alt="广告1"></a>
<a href=""><img src="image_day/adv02.jpg" alt="广告2"></a>
</div>
</div>
<div class="common_model">
<div class="common_title">
<h3 class="fl">新鲜水果</h3>
<ul class="fl">
<li><span>|</span></li>
<li><a href="#">鲜芒</a></li>
<li><a href="#">加州提子</a></li>
<li><a href="#">亚马逊牛油果</a></li>
</ul>
<a href="" class="more fr">查看更多></a>
</div>
<div class="common_goods_list">
<div class="goods_banner fl"><img src="image_day/banner01.jpg" alt="banner"/></div>
<ul class="goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
</ul>
</div>
</div>
<div class="common_model">
<div class="common_title">
<h3 class="fl">海鲜水产</h3>
<ul class="fl">
<li><span>|</span></li>
<li><a href="#">鲜芒</a></li>
<li><a href="#">加州提子</a></li>
<li><a href="#">亚马逊牛油果</a></li>
</ul>
<a href="" class="more fr">查看更多></a>
</div>
<div class="common_goods_list">
<div class="goods_banner fl"><img src="image_day/banner02.jpg" alt="banner"/></div>
<ul class="goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
</ul>
</div>
</div>
<div class="common_model">
<div class="common_title">
<h3 class="fl">猪牛羊肉</h3>
<ul class="fl">
<li><span>|</span></li>
<li><a href="#">鲜芒</a></li>
<li><a href="#">加州提子</a></li>
<li><a href="#">亚马逊牛油果</a></li>
</ul>
<a href="" class="more fr">查看更多></a>
</div>
<div class="common_goods_list">
<div class="goods_banner fl"><img src="image_day/banner03.jpg" alt="banner"/></div>
<ul class="goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
</ul>
</div>
</div>
<div class="common_model">
<div class="common_title">
<h3 class="fl">原地出产</h3>
<ul class="fl">
<li><span>|</span></li>
<li><a href="#">鲜芒</a></li>
<li><a href="#">加州提子</a></li>
<li><a href="#">亚马逊牛油果</a></li>
</ul>
<a href="" class="more fr">查看更多></a>
</div>
<div class="common_goods_list">
<div class="goods_banner fl"><img src="image_day/banner04.jpg" alt="banner"/></div>
<ul class="goods_list fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="image_day/goods.jpg" alt="商品图"/></a>
<p>¥ 38.00</p>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="links">
<a href="">关于我们</a>
<span>|</span>
<a href="">联系我们</a>
<span>|</span>
<a href="">招聘人才</a>
<span>|</span>
<a href="">友情链接</a>
</div>
<p>
CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br/>
电话:010-****888 京ICP备*******8号
</p>
</div>
</body>
</html>
4.简单的登录页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="login_header clearfix">
<a href=""><img src="image_day/logo02.png" alt="logo"></a>
</div>
<div class="login_form_con clearfix">
<div class="login_form">
<img src="image_day/login_banner.png" class="login_banner fl">
<p class="slogan fl">日夜兼程 . 急速送达</p>
<div class="form_input_con fr">
<div class="form_title">
<h1>会员登录</h1>
<a href="#">立即注册</a>
</div>
<form>
<div class="form_group">
<input type="text" name="username" class="input_txt" placeholder="请输入用户名">
<span class="error">文字提示</span>
</div>
<div class="form_group">
<input type="password" name="pwd" class="input_pwd" placeholder="请输入密码">
<span class="error">文字提示</span>
</div>
<div class="form_group">
<input type="checkbox" name="remember" id="remember" class="input_check fl">
<label class="fl" for="remember">记住用户名</label>
<a href="#" class="find_pass fr">忘记密码</a>
</div>
<input class="input_sub" type="submit" name="" value="登 录">
</form>
</div>
</div>
</div>
<div class="footer login_footer">
<div class="links">
<a href="">关于我们</a>
<span>|</span>
<a href="">联系我们</a>
<span>|</span>
<a href="">招聘人才</a>
<span>|</span>
<a href="">友情链接</a>
</div>
<p>
CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br/>
电话:010-****888 京ICP备*******8号
</p>
</div>
</body>
</html>