html+css实例
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文件:
天天生鲜-首页
4.简单的登录页
登录页
