w:不得不说,这次的代码量很多。
y:哦?就这?
w:……
w:先看一下预览截图吧。
y:哦?就这?
w:还没完呢!
这一部分,还涉及了另外三个html。
y:所以呢?就这?
w(我还能忍):先上一个共用的css:
@charset "utf-8";
*{
font-size:9pt;
border:0;
margin:0;
padding:0;
}
body{
font-family:'微软雅黑';
margin:0 auto;
}
ul,li{
display:block;
margin:0;
padding:0;
list-style:none;
}
img{
border:0;
}
.date_text{
font-size:12px;
float:right;
line-height:45px;
padding-right:20px;
}
dl,dt,dd{
margin:0;
padding:0;
display:block;
}
a,a:focus{
text-decoration:none;
color:#000;
outline:none;
}
a:hover{
color:#00a4ac;
text-decoration:none;
}
table{
border-collapse:collapse;
border-spacing: 0;
}
cite{
font-style:normal;
}
h2{
font-weight:normal;
}
.floatl{
float:left;
}
.floatr{
float:right;
}
input{
font-family:Tahoma,'微软雅黑','宋体';
}
.orange14{
font-size:14px;
font-weight:bold;
color:orange;
}
textarea{
border:1px solid #a7b5bc;
width:500px;
height:60px;
}
然后第一个top.html:
top.html
上方导航栏
top.css:
@charset "utf-8";
.header{
height:88px;
}
.topleft{
height:88px;
background:url(../images/topleft.jpg) no-repeat;
float:left;
width:300px;
}
.topleft img{
margin-top:12px;
margin-left:10px;
}
.topright{
height:88px;
background:url(../images/topright.jpg) no-repeat right;
float:right;
}
.nav{
float:left;
}
.nav li{
float:left;
width:87px;
height:88px;
text-align:center;
}
.nav li a{
display:block;
width:87px;
height:88px;
-moz-transition: none;
transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-webkit-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
}
.nav li a.selected{
background:url(../images/navbg.png) no-repeat;
}
.nav li a:hover{
display:block;
background:#000;
color:#fff;
background: none repeat scroll 0% 0% rgb(43, 127, 181);
}
.nav li img{
margin-top:10px;
}
.nav li a{
display:block;
}
.nav a h2{
font-size:14px;color:#d6e8f1;
}
.nav a:hover h2{
color:#fff;
}
.topright ul{
padding-top:15px;
float:right;
padding-right:12px;
}
.topright ul li{
float:left;
padding-left:9px;
padding-right:9px;
background:url(../images/line.gif) no-repeat right;
}
.topright ul li:last-child{
background:none;
}
.topright ul li a{
font-size:13px;
color:#e9f2f7;
}
.topright ul li a:hover{
color:#fff;
}
.topright ul li span{
margin-top:2px;
float:left;
padding-right:3px;
}
.user{
height:30px;
background:url(../images/ub1.png) repeat-x;
clear:both;margin-top:10px;float:right;
margin-right:12px;border-radius:30px;
white-space:nowrap;position:relative;
}
.user span{
display:inline-block;
padding-right:10px;
background:url(../images/user.png) no-repeat 15px 10px;
line-height:30px; font-size:14px;
color:#b8ceda; padding-left:20px;
padding-left:35px;
}
.user b{
display:inline-block;
width:20px;
height:18px;
background:url(../images/msg.png);
text-align:center;
font-weight:normal;
color:#fff;font-size:14px;
margin-right:13px;
margin-top:7px;
line-height:18px;
}
.user i{
display:inline-block;
margin-right:5px;
font-style:normal;
line-height:30px;
font-size:14px;
color:#b8ceda;
}
y:你继续?
w:left.html:
左侧导航栏
功能菜单
left.css:
@charset "utf-8";
*{
font-size:9pt;
border:0;
margin:0;
padding:0;
}
body{
font-family:'微软雅黑';
margin:0 auto;
min-width:980px;
}
ul{
display:block;
margin:0;
padding:0;
list-style:none;
}
li{
display:block;
margin:0;
padding:0;
list-style: none;
}
dl,dt,dd{
margin:0;
padding:0;
display:block;
}
a,a:focus{
text-decoration:none;
color:#000;
outline:none;
}
a:hover{
color:#00a4ac;
text-decoration:none;
}
/*left.html*/
.lefttop{
background:url(../images/lefttop.gif) repeat-x;
height:40px;
color:#fff;
font-size:14px;
line-height:40px;
}
.lefttop span{
margin-left:8px;
margin-top:10px;
margin-right:8px;
background:url(../images/leftico.png) no-repeat;
width:20px;
height:21px;
float:left;
}
.leftmenu{
width:187px;
padding-bottom: 9999px;
margin-bottom: -9999px;
overflow:hidden;
background:url(../images/leftline.gif) repeat-y right;
}
.leftmenu dd{
background:url(../images/leftmenubg.gif) repeat-x;
line-height:35px;
font-weight:bold;
font-size:14px;
border-right:solid 1px #b7d5df;
}
.leftmenu dd span{
float:left;
margin:10px 8px 0 12px;
}
.leftmenu dd .menuson{
display:none;
}
.leftmenu dd:first-child .menuson{
display:block;
}
.menuson {
line-height:30px;
font-weight:normal;
}
.menuson li a{
cursor:pointer;
}
.menuson li.active{
position:relative;
background:url(../images/libg.png) repeat-x;
line-height:30px;
color:#fff;
}
.menuson li cite{
display:block;
float:left;
margin-left:32px;
background:url(../images/list.gif) no-repeat;
width:16px;
height:16px;
margin-top:7px;
}
.menuson li.active cite{
background:url(../images/list1.gif) no-repeat;
}
.menuson li.active i{
display:block;
background:url(../images/sj.png) no-repeat;
width:6px;
height:11px;
position:absolute;
right:0;
z-index:10000;
top:9px;
right:-1px;
}
.menuson li a{
display:block;
*display:inline;
*padding-top:5px;
}
.menuson li.active a{
color:#fff;
}
.title{
cursor:pointer;
}
最后还有shopping_list.html:
shoplist.html:
餐饮列表页面-后台管理
缩略图
商品名称
商品类别
数量(件)
单价(元)
发布时间
是否审核
操作
RAX 头层牛皮户外鞋 男防滑登山鞋减震
运动
334
¥566.00
2015-06-06 15:05
已审核
查看 删除
七匹狼休闲裤 春夏新款 男士时尚无褶休闲裤
男装
455
¥236.00
2015-06-08 14:02
未审核
查看 删除
欧美大牌五分袖收腰显瘦睫毛蕾丝连衣裙 粉色
女装
899
¥136.00
2015-06-07 13:16
未审核
查看 删除
锐步REEBOK热2015新款线上独家复古GL 2620运动生活休闲鞋男鞋
运动
3456
¥346.00
2015-06-06 10:36
已审核
查看 删除
新款中大童荷叶边短袖裙子韩版儿童公主裙女童连衣裙
童装
678
¥316.00
2015-06-05 13:25
已审核
查看 删除
list.css:
@charset "utf-8";
.place{
height:40px;
background:url(../images/righttop.gif) repeat-x;
}
.place span{
line-height:40px;
font-weight:bold;
float:left;
margin-left:12px;
}
.placeul li{
float:left;
line-height:40px;
padding-left:7px;
padding-right:12px;
background:url(../images/rlist.gif) no-repeat right;
}
.placeul li:last-child{
background:none;
}
.rightinfo{
padding:8px;
}
.tools{
clear:both;
height:35px;
margin-bottom:8px;
}
.toolbar{
float:right;
}
.toolbar li{
background:url(../images/toolbg.gif) repeat-x;
line-height:33px; height:33px;
border:solid 1px #d3dbde;
float:left;
padding-right:10px;
margin-right:5px;
border-radius: 3px;
cursor:pointer;
}
.toolbar li span{
float:left;
margin-left:10px;
margin-right:5px;
margin-top:5px;
}
.toolbar1{
float:right;
}
.toolbar1 li{
background:url(../images/toolbg.gif) repeat-x;
line-height:33px; height:33px;
border:solid 1px #d3dbde;
float:left;
padding-right:10px;
margin-left:5px;
border-radius: 3px;
}
.toolbar1 li span{
float:left;
margin-left:10px;
margin-right:5px;
margin-top:5px;
}
.imgtable{
width:100%;
border:solid 1px #cbcbcb;
}
.imgtable th{
background:url(../images/th.gif) repeat-x;
height:34px;
line-height:34px;
border-bottom:solid 1px #b6cad2;
text-indent:21px;
text-align:left;
}
.imgtable td{
line-height:20px;
text-indent:21px;
border-right: dotted 1px #c7c7c7;
}
.imgtable td img{
margin:10px 20px 10px 0;
}
.imgtable td p{
color:#919191;
}
.imgtable td i{
font-style:normal;
color:#ea2020;
}
.imgtd{
text-indent:0;
}
.imgtable tbody tr.odd{
background:#f5f8fa;
}
.imgtable tbody tr:hover{
background:#e5ebee;
}
.intro_width{
width:300px;word-wrap:break-word; overflow:hidden;
}
/*seachform*/
.seachform{
height:42px;
}
.seachform li{
float:left;
margin-right:15px;
}
.seachform li label{
padding-right:10px;
float:left;
line-height:32px;
}
.scinput{
width:180px;
height:32px;
line-height:32px;
border-top:solid 1px #a7b5bc;
border-left:solid 1px #a7b5bc;
border-right:solid 1px #ced9df;
border-bottom:solid 1px #ced9df;
background:url(../images/inputbg.gif) repeat-x;
text-indent:10px; color:#999;
}
.scbtn{
width:85px;
height:35px;
background:url(../images/btnbg.png) no-repeat center;
font-size:14px;
font-weight:bold;
color:#fff;
cursor:pointer;
border-radius:3px;
}
select{
background:url(../images/inputbg.gif) repeat-x;
_background:none;
_border:none;height:32px;
border-top:solid 1px #a7b5bc;
border-left:solid 1px #a7b5bc;
border-right:solid 1px #ced9df;
border-bottom:solid 1px #ced9df;
padding:5px;
}
.tablelist{
border:solid 1px #cbcbcb;
width:100%;
clear:both;
}
.tablelist th{
background:url(../images/th.gif) repeat-x;
height:34px;
line-height:34px;
border-bottom:solid 1px #b6cad2;
text-indent:11px;
text-align:left;
}
.tablelist td{
line-height:35px;
text-indent:11px;
border-right: dotted 1px #c7c7c7;
}
.tablelink{
color:#056dae;
}
.tablelist tbody tr.odd{
background:#f5f8fa;
}
.tablelist tbody tr:hover{
background:#e5ebee;
}
/*page分页*/
.pagin{
position:relative;
margin-top:10px;
padding:0 12px;
}
.pagin .blue{
color:#056dae;
font-style:normal;
}
.pagin .paginList{
position:absolute;
right:12px;
top:0;
}
.pagin .paginList .paginItem{
float:left;
}
.pagin .paginList .paginItem a{
float:left;
width:31px;
height:28px;
border:1px solid #DDD;
text-align:center;
line-height:30px;
border-left:none;
color:#3399d5;
}
.pagin .paginList .paginItem:first-child a{
border-left:1px solid #DDD;
}
.pagin .paginList .paginItem:first-child a{
border-bottom-left-radius:5px;
border-top-left-radius:5px;
}
.pagin .paginList .paginItem:last-child a{
border-bottom-right-radius:5px;
border-top-right-radius:5px;
}
.pagin .paginList .paginItem.current,.pagin .paginList .paginItem.current a{
background:#f5f5f5;
cursor:default;
color:#737373;
}
.pagin .paginList .paginItem:hover{
background:#f5f5f5;
}
.pagin .paginList .paginItem.more,.pagin .paginList .paginItem.more a:hover{
cursor:default;
}
.pagin .paginList .paginItem.more:hover{
background:#FFF;
}
.pagin .paginList .paginItem.more a{
color:#737373;
}
.pagepre{
background:url(../images/pre.gif) no-repeat center center;
width:31px;
height:28px;
}
.pagenxt{
background:url(../images/next.gif) no-repeat center center;
width:31px;
height:28px;
}
y:我受够了,ok?
w:no ok!
y:??????
w:
这里,shop_search.html:
shop_search.html:
商品检索
-
商品类别
女装
男装
童装
运动
-
-
w:ok!
y:ok?就这?溜了溜了……