1.效果图如下
2.CSS代码如下(style.css)
body,ul,li
{
margin:0;
padding:0;
}
body
{
height:2500px;
}
ul
{
list-style:none;
}
/*解决高度塌陷*/
.container::before,.container::after,.clearfix::before,.clearfix::after
{
content:"";
display:table;
}
.container::after,.clearfix::after
{
clear:both;
}
/*顶部CSS样式*/
.topbar
{
background-color:#333;
height:40px;
}
.container
{
margin:0 auto;
width:1226px;
}
.topbar-nav
{
float:left;
height:40px;
line-height:40px;
font-size:0;
}
.topbar-info,.topbar-cart
{
float:right;
height:40px;
line-height:40px;
font-size:0;
}
.topbar span
{
font-size:12px;
color:#666;
font-family:sans-serif;
margin:0.5em;
}
a
{
text-decoration:none;
}
.topbar a
{
color:#999;
font-size:12px;
}
.topbar a:hover
{
color:#FFF;
}
.topbar-cart a:hover
{
background-color:#FFF;
color:#ff6700
}
.topbar-info
{
margin-right:25px;
}
/*头部导航栏CSS样式*/
.header
{
height:100px;
}
.header-logo
{
float:left;
width:62px;
margin-top:22px;
}
.header-logo img
{
height:55px;
width:55px;
}
.header-nav
{
float:left;
width:820px;
height:100px;
}
.header-nav .nav-list
{
width:820px;
height:88px;
font-size:16px;
padding:12px 0 0 30px;
}
.header-nav .nav-list .nav-category
{
float:left;
width:127px;
padding:0 15px 0 0;
}
.header-nav .nav-list .nav-category a
{
display:block;
text-align:right;
padding:26px 0 38px;
color:#333;
}
.header-nav .nav-list .nav-item
{
float:left;
}
.header-nav .nav-list .nav-item a
{
display:block;
padding:26px 10px 38px;
color:#333;
}
.header-nav .nav-list .nav-item a:hover
{
color:#ff6700;
}
.header-search
{
float:right;
width:296px;
height:50px;
margin-top:25px;
}
/*最右边的搜索框样式*/
.header-search .search-form
{
display:block;
width:296px;
height:50px;
position:relative;
}
.header-search .search-form .search-text
{
display:block;
position:absolute;
top:0;
right:51px;
width:245px;
height:50px;
line-height:50px;
border:1px solid #e0e0e0;
outline:0;
}
.header-search .search-form .search-button
{
display:block;
position:absolute;
top:0;
right:0;
width:52px;
height:50px;
border:1px solid #e0e0e0;
font-size:24px;
line-height:24px;
background:#fff;
color:#616161;
outline:0;
}
.header-search .search-form .search-button:hover
{
background-color:#ff6700;
color:#fff;
}
/*主体设计样式*/
.seckill
{
background-color:#f5f5f5;
}
.seckill-header
{
background:url(../img/mm.jpg) no-repeat 50% 0;
height:170px;
margin-top:19px;
}
.seckill-nav
{
margin:-68px 0 22px;
}
.seckill-navfixed
{
position:fixed;
top:60px;
}
.seckill-nav em
{
display:inline-block;
font-style:normal;
font-size:18px;
line-height:1;/*和字体一样大*/
vertical-align:middle;
margin-left:30px;
}
.seckill-nav span
{
display:inline-block;
margin-left:15px;
text-align:left;
line-height:1;
vertical-align:middle;
font-size:14px;
}
.seckill-nav ul
{
height:68px;
background:#414141;
}
.seckill-nav ul li span em
{
display:inline-block;
font-size:14px;
margin-left:0;
font-style:normal;
text-align:left;
line-height:20px;
}
.seckill-nav li
{
display:block;
color:#fff;
width:20%;
text-align:center;
float:left;
height:68px;
line-height:68px;
cursor:pointer;/*鼠标形状*/
}
.seckill-nav .active
{
background-color:#F00;
}
.seckill-goods ul
{
margin-right:-13px;
display:none;/*隐藏多余商品*/
}