5、商城首页制作实战训练--options模块化布局

Sian

1、完成选项卡效果样式

2、将这个div分为上下两个部分，下面单独一个div
3、上面用ul的两个li来实现，li分别float左右
4、li分为正常状态和选中状态，选中状态高度比正常状态高1个像素；
5、选中状态的背景设置为白色，覆盖下面div的边框，实现图中效果；
6、IE如果有出现不兼容状态可将li设置为绝对布局来修复（这里为简化暂不考虑实现）
7、样式代码如下：

[CSS] 纯文本查看 复制代码

/* style reset */
body,h1,h2,h3,h4,p,ul,ol,form,input,textarea,th,td,select{margin: 0;padding: 0;}
em{font-style: normal;}
li{list-style: none;}
a{text-decoration: none;}
img{border: none;vertical-align: top;}
table{border-collapse: collapse;}
input,textarea{outline: none;}
textarea{resize: none;overflow: auto;}
body{font-size: 12px;}

/* public */
.clear{zoom:1;}
.clear:after{content: '';display: block;clear: both}
.fl{float: left;}
.fr{float: right;}
.gradient{
        background: -webkit-linear-gradient(top,#ffffff,#f8f8f8);
        background: -moz-linear-gradient(top,#ffffff,#f8f8f8);
        background: -ms-linear-gradient(top,#ffffff,#f8f8f8);
        background: linear-gradient(top,#ffffff,#f8f8f8);
        +background:#f9f9f9;
}

/* layout */
#head, #nav, .content { width: 960px;margin: 0 auto;}
#search, #footer, .section, .side_section, .side_ad { border: 1px solid #EEE; border-radius: 6px;}
.section, .options, .side_section, .side_ad, .main_ad { margin-bottom: 10px;}

body { margin-bottom: 30px; }
#header { height: 30px; border-radius: 0 0 6px 6px;}
#nav { height: 100px; background: #FEE; }
#search { width: 958px; height: 114px; margin: 0 auto 10px;}
.content {}
.main { width: 710px; }
.section { width:318px; padding: 0 15px; height: 200px;/*临时*/}

.options { width: 350px; height: 200px;/*临时*/}
.options .nav{ height: 34px;}
.options .nav li{ width: 172px; height: 33px; border: 1px solid #EEE; border-bottom: none; border-radius: 6px 6px 0 0;}
.options .nav .active{ width: 172px; height: 34px; background: #FFF;}
.options .con{ width: 348; border: 1px solid #EEE; border-radius: 0 0 6px 6px; height: 150px;/*临时*/}

.main_ad { border-radius: 6px; overflow: hidden; }
.side { width:240px; }
.side_section { padding: 0 12px; height: 60px;/*临时*/}
.side_ad { overflow: hidden; }
#footer { width: 958px; height: 78px; margin: 0 auto; }

8、源代码下载：

游客，如果您要查看本帖隐藏内容请回复