年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1308|回复: 0

[电子商务] 5、商城首页制作实战训练--options模块化布局

[复制链接]
  • TA的每日心情
    倒霉
    2021-4-22 22:52
  • 签到天数: 369 天

    [LV.9]以坛为家II

    发表于 2016-2-22 15:44:28 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2016-2-23 15:04 编辑

    1、完成选项卡效果样式
    QQ20160222-0@2x.png
    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、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2021-8-6 04:20 , Processed in 1.156382 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表