HTML+CSS零基础学习笔记(五)— 模拟淘宝首页(静态)

内容概览

  • 模拟淘宝首页(静态)
    • 一、项目重难点
    • 二、效果图及源码

模拟淘宝首页(静态)

一、项目重难点

  1. 样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应HTML页面的样式重置。
  2. line-height属性的不同值的区别
    body {
           
    	font-size: 16px
    
        line-height: normal;	/* 默认。设置合理的行间距。其子级元素继承的是:同下所示 */
        line-height: 15px;		/* 行高为:15px ; 其子级元素继承的是:同下所示 */
        line-height: 100%;		/* 行高为:16*200%=32px ; 其子级元素继承的是:同下所示 */
        line-height: 5em;		/* 行高为:16*5=80px ; 其子级元素继承的是:该父级元素计算后的值,即如果其子元素的字体大小变为了10px,那么该子元素的行高还是为:其父级设置的80px */
    
        line-height: 1.5;		/* 行高为:16*1.5=24px ; 其子级元素继承的是:line-height的值,即如果其子元素的字体大小变为了10px,那么该子元素的行高为:10*1.5=15px */
    }
    
  3. CSS @规则
    /* 
        @规则
        @charset    设置样式表的编码
        @import     引入其他样式文件
        @media      媒体查询
        @font-face  自定义字体
    */
    
  4. favicon(设置HTML文档标题前面的 logo 小图标)
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>淘宝网 - 淘!我喜欢title>
        <link rel="stylesheet" href="./css/index.css">
        <link rel="icon" href="favicon.ico">	//★★★模拟淘宝商城官网“HTML文档标题”前面的logo小图标。详见下图 !!!
    head>
    <body>
    
    body>
    html>
    
    在这里插入图片描述
  5. base标签
    // base标签(一个页面只能出现一个base标签)
        href="www.baidu.com/123/"
        target="_blank"
    
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>淘宝网 - 淘!我喜欢title>
        <link rel="stylesheet" href="./css/index.css">
        <link rel="icon" href="favicon.ico">
        <base href="www.baidu.com/123/" target="_blank">  //★★★base标签在HTML页面结构中所处的位置
    head>
    <body>
    	<a href="demo.jpg">a>		//★★★实际href中资源的地址为:www.baidu.com/123/demo.jpg
    body>
    html>
    
  6. 自定义图标
    // 自定义图标,即一种文字(@font-face)———— 常用:阿里妈妈-iconfont
    
  7. 在写HTML结构时,能少嵌套的就少嵌套
  8. h标签的应用场景
    // h标签的作用(有利于SEO)
        h1: 用于网页中的大标题,或者logo。(一个HTML页面中,h1标签只能用一次)
        h2:用于副标题,或者根据实际情况应用
        h3:用于某个版块的标题(可以有多个)
        h4:用于某个版块的内部出现的标题
        h5、h6:用于某个版块内部嵌套的另一个版块的标题等
    
  9. 【注意】a标签与a标签以及块级标签嵌套的场景
  10. 盒模型的分类
    盒模型:
    1)标准盒模型
        总宽度 = border(左右) + width + padding(左右)
        总高度 = border(上下) + height + padding(上下)
    2)IE混杂模型(怪异盒模型  -->  box-sizing: border-box)
        总宽度 = width
        总高度 = height
    
  11. 【注意】以图换字的两类方法
  12. 渐变背景色
    /* 渐变背景色
        1)谷歌浏览器、... 、IE 10+
        background-image: linear-gradient(to right, #ff9000, #ff5000);
                                方向(可省略,默认:to bottom), 起始颜色, 结束颜色
        2)IE 789(IE滤镜)
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
                                                                     起始颜色               结束颜色(rgba)      渐变方向(1:从左往右;2:从上往下)  
    */
    
    /* CSS 3.0 中的 过渡效果
    	transition: background-color 0.3s;
    */
    
  13. calc() 函数
    /*  1) width: 1000px;
    
        2) width: calc(100% - 190px); -->  适用于:IE 9+
                    父级的宽 - 190px ==> 1000px
    */
    
  14. 【注意】"浮动"在对HTML页面布局时的灵活运用
  15. rgba()函数
    /*  background-color: rgba(0, 0, 0, 0.5);   适用于:IE 9  IE 9+
    
        background-color:#000\9;   适用于:IE 9 以下的浏览器认识(此处的"\9"可触发:CSS HACK)
        filter: alpha(opacity=30);  透明效果
    */
    
  16. 【注意】子级有浮动,父级一定要清浮动(“三件套”)
  17. 图片的居中对齐
    /*  图片居中对齐的两种实现方式:
    
        1)模拟单元格(表格中单元格内的内容都是垂直居中对齐的)
        display: table-cell;
        vertical: middle;
        
        2)弹性盒模型(适用于:IE 10  IE 10+
        display: flex;
        justify-content: space-around;  弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。
        align-items: center;    均分垂直方向的间距
    
    */
    
  18. CSS Sprites
    /* 雪碧图(CSS精灵)
        1、缩小图标文件的大小
        2、减少图片的http请求,减轻服务器的压力,节省带宽
    
        利用:background-position 属性,如下:
        background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
        注意:设置“位置”的原理
    */
    
  19. 【注意】"相对定位"的应用(相对于自己原来的位置进行定位)
  20. 使 ul 列表中的所有 li 元素居中对齐
    /*  当ul列表中的所有li元素需要在父级盒子内部居中显示时,不能用 float: left; 
    
    	直接在ul中设置"text-align: center;", 再将li元素的display设置为inline-block,就可以实现居中显示。
    */
    
  21. 表格布局
    /* 表格布局(table)
        1、边框设置简便
        2、单元格内容垂直居中
        3、单元格的宽度会自动计算
    */
    
    例如,实现淘宝商城中的以下效果,可以采用“表格”布局:
    HTML+CSS零基础学习笔记(五)— 模拟淘宝首页(静态)_第1张图片
    /* 淘宝商城_CSS代码节选示例 */
    
    table {
           
        border-collapse: collapse;  /* 边框模式---合并的模式:即两个单元格之间的的边框只需要显示一个就行 */
    }
    th,td {
           
        padding: 0;
    }
    /* 表头为th;普通单元格为td;行为tr */
    
    
    /* 图标区域 */
    .firstRight .icon {
           
        width: 100%;
        height: 229px;
        background-color: #fff;
        table-layout: fixed;  /* 定义列宽的算法---fixed的计算方式为根据表格宽度自动计算列宽,每列的宽度为均分整个表格的宽度。 */
    }
    .firstRight .icon td {
           
        border: 1px solid #f4f4f4;
        text-align: center;
    }
    .firstRight .icon td span {
           
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto;
        background: url(../images/ico.png) no-repeat;
    }
    .firstRight .icon td i {
           
        line-height: 34px;
        color: #333;
    }
    
    .firstRight .icon .item1 span {
           
        background-position: 0 0;
    }
    .firstRight .icon .item2 span {
           
        background-position: 0 -87px;
    }
    .firstRight .icon .item3 span {
           
        background-position: 0 -44px;
    }
    .firstRight .icon .item4 span {
           
        background-position: 0 -132px;
    }
    .firstRight .icon .item5 span {
           
        background-position: 0 -176px;
    }
    .firstRight .icon .item6 span {
           
        background-position: 0 -220px;
    }
    .firstRight .icon .item7 span {
           
        background-position: 0 -264px;
    }
    .firstRight .icon .item8 span {
           
        background-position: 0 -308px;
    }
    .firstRight .icon .item9 span {
           
        background-position: 0 -352px;
    }
    .firstRight .icon .item10 span {
           
        background-position: 0 -396px;
    }
    .firstRight .icon .item11 span {
           
        background-position: 0 -440px;
    }
    .firstRight .icon .item12 span {
           
        background-position: 0 -484px;
    }
    
  22. .webp(图片格式)
    /*  .webp 是谷歌开发的一种图片格式,只能用于在网站中显示,其体积相较于普通的图片格式小得多,且图片的清晰度不变
        
        IE不支持、火狐在65以上的版本支持,谷歌支持。
    
        可以通过JS判断用户所用浏览器的版本,以选择相应的图片格式。
    */
    
  23. 实现“词”换行
    /* word-break: keep-all; 在空格的地方强制换行 */
    
  24. 使用“伪元素”的注意事项
    /* ::after  :after 区别
        1) :  表示伪类
        2):: 表示伪元素(是 CSS 3.0 中的标准,IE_8不认识两个冒号,因此为了兼容IE_8,可以直接将伪元素写为 :before  :after 
    */
    

二、效果图及源码

  1. 效果图如下:
  2. 源码如下:(获取详细源码及所用素材文件等—请戳我!!!)
    1> index.html
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>淘宝网 - 淘!我喜欢title>
        <link rel="stylesheet" href="css/index.css">
        <link rel="icon" href="favicon.ico">
        <base target="_blank"> 
    head>
    <body>
        
        
        
        <div id="headMessage" class="clearfix layer">
            <ul class="fl">
                <li>
                    <span>中国大陆span>
                    <span class="iconfont arrow">span>
                li>
                <li class="mr7">
                    <a href="#" class="login mr7">亲,请登录a>
                    <a href="#">免费注册a>
                li>
                <li>
                    <a href="#">手机逛淘宝a>
                li>
            ul>
    
            <ul class="fr">
                <li>
                    <a href="#">我的淘宝a>
                    <span class="iconfont arrow">span>
                li>
                <li>
                    <span class="iconfont mr5 c4">span>
                    <a href="#">购物车a>
                    <strong>0strong>
                    <span class="iconfont arrow">span>
                li>
                <li>
                    <a href="#"><span class="iconfont mr5 store">span>收藏夹a>
                    <span class="iconfont arrow">span>
                li>
                <li>
                    <a href="#">商品分类a>
                li>
                <li class="line">|li>
                <li>
                    <a href="#">千牛卖家中心a>
                    <span class="iconfont arrow">span>
                li>
                <li>
                    <a href="#">联系客服a>
                    <span class="iconfont arrow">span>
                li>
                <li>
                    <span class="iconfont c4 mr5">span>
                    <a href="#">网站导航a>
                    <span class="iconfont arrow">span>
                li>
            ul>
        div>
    
        
        <div id="headAd">
            <div class="layer clearfix">
                <a href="#" class="fl go"><img src="images/headAd-logo.png" alt="">a>
                <ul class="fr">
                    
                    <li class="item1">
                        <a href="#" class="fr">
                            <img src="images/headAd-list-item-01.png" alt="">
                        a>
                        <h3><a href="#">电视会场a>h3>
                        <p><a href="#">最高降2000a>p>
                    li>
                    <li class="item2">
                        <a href="#" class="fr">
                            <img src="images/headAd-list-item-02.png" alt="">
                        a>
                        <h3><a href="#">电视会场a>h3>
                        <p><a href="#">最高降2000a>p>
                    li>
                    <li class="item3">
                        <a href="#" class="fr">
                            <img src="images/headAd-list-item-03.png" alt="">
                        a>
                        <h3><a href="#">电视会场a>h3>
                        <p><a href="#">最高降2000a>p>
                    li>
                    <li class="item4">
                        <a href="#" class="fr">
                            <img src="images/headAd-list-item-04.png" alt="">
                        a>
                        <h3><a href="#">电视会场a>h3>
                        <p><a href="#">最高降2000a>p>
                    li>
                    <li class="item5">
                        <a href="#" class="fr">
                            <img src="images/headAd-list-item-05.png" alt="">
                        a>
                        <h3><a href="#">电视会场a>h3>
                        <p><a href="#">最高降2000a>p>
                    li>
                ul>
            div>
        div>
    
        
        <div id="headSearch">
            <div class="clearfix layer">
                
                <h1 class="fl"><a href="#">淘宝网a>h1>
    
                <div class="code fr">
                    <span class="iconfont close">span>
                    <span class="c5">手机淘宝span>
                    <img src="images/headSearch-code.png" alt="">
                div>
    
                <div class="search">
                    <ul class="searchTab clearfix">
                        <li class="active">宝贝li>
                        <li>天猫li>
                        <li>店铺li>
                    ul>
    
                    <div class="searchContent clearfix">
                        <form action="">
                            <div class="searchBox fl">
                                <input type="text">
                                <div class="placeholder">
                                    <i class="iconfont">i>
                                    <span>毛衣女冬中长款加厚span>
                                div>
                                <span class="iconfont imgSearch">span>
                            div>
                            <div class="btn fl">
                                <button type="submit">搜索button>
                            div>
                        form>
                    div>
    
                    <div class="hotKey">
                        <a href="#">连衣裙a>
                        <a href="#">四件套a>
                        <a href="#" class="c5">潮流T恤a>
                        <a href="#">时尚女鞋a>
                        <a href="#">短裤a>
                        <a href="#">半身裙a>
                        <a href="#">男士外套a>
                        <a href="#">墙纸a>
                        <a href="#">行车记录仪a>
                        <a href="#">新款男鞋a>
                        <a href="#">耳机a>
                        <a href="#">时尚女包a>
                        <a href="#">沙发a>
                    div>
                div>
            div>
        div>
    
        
        <div id="nav" class="layer clearfix">
            <h2 class="fl">主题市场h2>
            <ul>
                <li class="size"><a href="#">天猫a>li>
                <li class="size"><a href="#">聚划算a>li>
                <li class="size"><a href="#">天猫超市a>li>
                <li class="line">|li>
                <li><a href="#">淘抢购a>li>
                <li><a href="#">电器城a>li>
                <li><a href="#">司法拍卖a>li>
                <li><a href="#">淘宝心选a>li>
                <li><a href="#">兴农脱贫a>li>
                <li class="line">|li>
                <li><a href="#">飞猪旅行a>li>
                <li><a href="#">智能生活a>li>
                <li><a href="#">苏宁易购a>li>
            ul>
        div>
    
        
        <div id="firstScreen" class="layer clearfix">
            
            <div class="firstLeft fl">
                
                <div class="sideNav fl">
                    <ul>
                        <li>
                            <a href="#">女装a> / <a href="#">男装a> / <a href="#">内衣a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">鞋靴a> / <a href="#">箱包a> / <a href="#">配件a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">童装玩具a> / <a href="#">孕产a> / <a href="#">用品a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">家电a> / <a href="#">数码a> / <a href="#">手机a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">美妆a> / <a href="#">洗护a> / <a href="#">保健品a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">珠宝a> / <a href="#">眼镜a> / <a href="#">手表a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">运动a> / <a href="#">户外a> / <a href="#">乐器a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">游戏a> / <a href="#">动漫a> / <a href="#">影视a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">美食a> / <a href="#">生鲜a> / <a href="#">零食a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">鲜花a> / <a href="#">宠物a> / <a href="#">农资a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">面料采集a> / <a href="#">装修a> / <a href="#">建材a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">家具a> / <a href="#">家饰a> / <a href="#">家纺a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">汽车a> / <a href="#">二手车a> / <a href="#">用品a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">办公a> / <a href="#">DIYa> / <a href="#">五金电子a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">百货a> / <a href="#">餐厨a> / <a href="#">家庭保健a><span class="iconfont fr">span>
                        li>
                        <li>
                            <a href="#">学习a> / <a href="#">卡券a> / <a href="#">本地服务a><span class="iconfont fr">span>
                        li>
                    ul>
                div>
    
                
                <div class="img1Box fl">
                    <div class="pic fl">
                        <div class="img">
                            <a href="#"><img src="images/img1Box-pic-04.jpg" alt="">a>
                        div>
    
                        <button class="iconfont leftBtn">button>
                        <button class="iconfont rightBtn">button>
                        
                        <div class="circle">
                            <span class="active">span><span>span><span>span><span>span><span>span>
                        div>
                    div>
                    <div class="ad fr">
                        <a href="#"><img src="images/img1Box-ad-01.jpg" alt="">a>
                    div>
                div>
    
                
                <div class="img2Box fl">
                    <div class="pic fl">
                        <div class="picTitle">
                            <div class="text clearfix">
                                <span class="fl bg">理想生活上天猫span>
                                <span class="fr"><i>1i>/6span>
                            div>
                            <div class="line">
                                <span>span>
                            div>
                        div>
                        <div class="img">
                            <a href="#"><img src="images/img2Box-pic-03.jpg" alt="">a>
                            <a href="#"><img src="images/img2Box-pic-04.jpg" alt="">a>
                        div>
    
                        <button class="iconfont leftBtn">button>
                        <button class="iconfont rightBtn">button>
                    div>
                    <div class="ad fr">
                        <p class="title">今日特卖p>
                        <a href="#"><img src="images/img2Box-ad-01.jpg" alt="">a>
                    div>
                div>
    
                
                <div class="news fl">
                    <div class="hd fl">
                        <h3>淘宝论坛h3>
                        <p>让你的生活更有趣p>
                    div>
                    <div class="newList fr">
                        <div class="item">
                            <a href="#" class="fl img"><img src="images/news-img-01.jpg" alt="">a>
                            
                            <h4><a href="https://headline.bbs.taobao.com/detail.html?postId=8739614">淘宝头条“新品”内容招稿&内容规范【新增钉钉群】a>h4>
                            <p><a href="https://headline.bbs.taobao.com/detail.html?postId=8739614">各位达人小伙伴:现向各位广泛征集各领域新品内容,优质稿件头条公域将给予曝光扶持!a>p>
                            
                            <a href="https://index.bbs.taobao.com/home.html" class="more">更多>a>
                        div>
                    div>
                div>
            div>
    
            
            <div class="firstRight fr">
                
                <div class="user">
                    <a href="#" class="avatar"><img src="images/firstRight-userBox-icon.jpg" alt="">a>
                    <p class="username">Hi! 你好p>
                    <p class="members">
                        <a href="#" class="gold">领淘金币抵钱a>
                        <a href="#" class="club">会员俱乐部a>
                    p>
                    <div class="btn">
                        <button class="login">登录button>
                        <button class="register">注册button>
                        <button class="shop">登录button>
                    div>
                div>
    
                
                <a href="#" class="tipOff">
                    <span>网上有害信息举报专区span><i class="iconfont">i>
                a>
    
                
                <div class="notice">
                    <ul class="title">
                        <li class="active"><a href="#">公告a>li>
                        <li><a href="#">规则a>li>
                        <li><a href="#">论坛a>li>
                        <li><a href="#">安全a>li>
                        <li><a href="#">公益a>li>
                    ul>
                    <ul class="content clearfix">
                        <li class="item1"><a href="#">95公益周阿里、腾讯等六家公司同台联合做公益a>li>
                        <li><a href="#">淘宝造物节之城市秘密a>li>
                        <li><a href="#">聚划算88红包省钱卡a>li>
                    ul>
                div>
    
                
                <table class="icon">
                    <tr>
                        <td class="item1">
                            <a href="#">
                                <span>span>
                                <i>充话费i>
                            a>
                        td>
                        <td class="item2">
                            <a href="#">
                                <span>span>
                                <i>旅行i>
                            a>
                        td>
                        <td class="item3">
                            <a href="#">
                                <span>span>
                                <i>车险i>
                            a>
                        td>
                        <td class="item4">
                            <a href="#">
                                <span>span>
                                <i>游戏i>
                            a>
                        td>
                    tr>
                    <tr>
                        <td class="item5">
                            <a href="#">
                                <span>span>
                                <i>彩票i>
                            a>
                        td>
                        <td class="item6">
                            <a href="#">
                                <span>span>
                                <i>电影i>
                            a>
                        td>
                        <td class="item7">
                            <a href="#">
                                <span>span>
                                <i>酒店i>
                            a>
                        td>
                        <td class="item8">
                            <a href="#">
                                <span>span>
                                <i>理财i>
                            a>
                        td>
                    tr>
                    <tr>
                        <td class="item9">
                            <a href="#">
                                <span>span>
                                <i>找服务i>
                            a>
                        td>
                        <td class="item10">
                            <a href="#">
                                <span>span>
                                <i>演出i>
                            a>
                        td>
                        <td class="item11">
                            <a href="#">
                                <span>span>
                                <i>水电煤i>
                            a>
                        td>
                        <td class="item12">
                            <a href="#">
                                <span>span>
                                <i>火车票i>
                            a>
                        td>
                    tr>
                table>
    
                
                <div class="app">
                    <div class="title clearfix">
                        <h3 class="fl">阿里APPh3>
                        <a href="#" class="fr">更多>a>
                    div>
                    <ul class="appIcon">
                        <li><a href="#"><img src="images/app_01.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_02.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_03.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_04.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_05.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_06.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_07.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_08.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_09.png" alt="">a>li>
                        <li><a href="#"><img src="images/app_10.png" alt="">a>li>
                    ul>
                div>
            div>
        div>
    
        
        <div id="iGoodsShopping" class="layer clearfix mt10">
            
            <div class="goods fl">
                <div class="head clearfix">
                    <h3 class="fl">
                        <img src="images/goods.png" alt="有好货">
                        <span class="iconfont">span>
                        <i>与品质生活不期而遇i>
                    h3>
                    <a href="#" class="fr change">换一换a>
                div>
                <ul class="list">
                    <li>
                        <a href="#"><img src="images/goods_img_01.png" alt="">a>
                        <h4><a href="#">老铁,这是电吸门,请轻点关门a>h4>
                        <p class="text"><a href="#">电吸门可以避免车门未关紧闭带来的安全隐患,这款电吸门,拥有外观、新型专利保障,确保使用安全性,无需改装原车装饰,无需电脑编程及复杂的布线,就能让你毫不费力的关闭车门,体验前所未有的触感,而且门锁闭过程会让你感觉舒适,声音特别轻,告别传统沉闷的巨响。a>p>
                        <a href="#" class="comment">
                            <span class="iconfont">span><i>1675 人说好i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/goods_img_02.png" alt="">a>
                        <h4><a href="#">窗台整理架,利用家中每一寸空间a>h4>
                        <p class="text"><a href="#">简单易操作的设计,就算是女孩子一个人也完全没有问题。多种尺寸的选择,能满足不同空间与人群的使用需求。可伸缩的同时,移动起来也非常的方便,反复利用更环保。贴心人性化的围栏设计搭配优质耐用的选材,承重力杠杠滴且物品不易滑落,美观又实用。a>p>
                        <a href="#" class="comment">
                            <span class="iconfont">span><i>338 人说好i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/goods_img_03.png" alt="">a>
                        <h4><a href="#">“中国造”车睡神器,自驾游更轻松a>h4>
                        <p class="text"><a href="#">一般的我们去旅行,自驾的时候酒店都爆满,带上车载折叠床,随时随地将后排升级为车载大床房。如果去前不着村后不着地的地方,更需要车载折叠床来休息了。安装简单,扎实牢固,安全贴心而且可以睡下不止一个人哦,不愧是车睡神器,有了它自驾游更轻松了。a>p>
                        <a href="#" class="comment">
                            <span class="iconfont">span><i>21 人说好i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/goods_img_04.png" alt="">a>
                        <h4><a href="#">SUSISU 幻境流沙眼影盘a>h4>
                        <p class="text"><a href="#">幻境流沙,超级美腻外包装。a>p>
                        <a href="#" class="comment">
                            <span class="iconfont">span><i>287 人说好i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/goods_img_05.png" alt="">a>
                        <h4><a href="#">可折叠加厚双面使用榻榻米床垫a>h4>
                        <p class="text"><a href="#">可以折叠的榻榻米床垫,收纳不占空间,正反两面都可以使用,同时纯棉材质舒适亲肤,透气性好,保持贴身换将干爽 不粘腻。a>p>
                        <a href="#" class="comment">
                            <span class="iconfont">span><i>106 人说好i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/goods_img_06.png" alt="">a>
                        <h4><a href="#">YSL限量眼影银盘a>h4>
                        <p class="text"><a href="#">金属边框闪亮眼影盒,彰显低调的奢华之美。a>p>
                        <a href="#" class="comment">
                            <span class="iconfont">span><i>30 人说好i>
                        a>
                    li>
                ul>
            div>
    
            
            <div class="goods fr shopping">
                <div class="head clearfix">
                    <h3 class="fl">
                        <img src="images/shopping.png" alt="爱逛街">
                        <span class="iconfont">span>
                        <i>献给聪明可爱的你i>
                    h3>
                    <a href="#" class="fr change">更多>a>
                div>
                <ul class="list">
                    <li>
                        <a href="#"><img src="images/shopping_img_01.png" alt="">a>
                        <p class="text">
                            <span class="iconfont">span>
                            <a href="#">绑带英伦雪地靴a>
                        p>
                        <a href="#" class="comment">
                            <span><img src="images/shopping_img_01_icon.png" alt="">span><i>淘***娘i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/shopping_img_02.png" alt="">a>
                        <p class="text">
                            <span class="iconfont">span>
                            <a href="#">极简风的电脑桌收纳也是杠杠的a>
                        p>
                        <a href="#" class="comment">
                            <span><img src="images/shopping_img_02_icon.png" alt="">span><i>小***范i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/shopping_img_03.png" alt="">a>
                        <p class="text">
                            <span class="iconfont">span>
                            <a href="#">你的好友个性卫衣上线,温暖又时髦a>
                        p>
                        <a href="#" class="comment">
                            <span><img src="images/shopping_img_03_icon.png" alt="">span><i>A***Ui>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/shopping_img_04.png" alt="">a>
                        <p class="text">
                            <span class="iconfont">span>
                            <a href="#">仿真兔毛大翻领皮草大衣a>
                        p>
                        <a href="#" class="comment">
                            <span><img src="images/shopping_img_04_icon.png" alt="">span><i>一***牌i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/shopping_img_05.png" alt="">a>
                        <p class="text">
                            <span class="iconfont">span>
                            <a href="#">百褶小立领a>
                        p>
                        <a href="#" class="comment">
                            <span><img src="images/shopping_img_05_icon.png" alt="">span><i>日***装i>
                        a>
                    li>
                    <li>
                        <a href="#"><img src="images/shopping_img_06.png" alt="">a>
                        <p class="text">
                            <span class="iconfont">span>
                            <a href="#">复古娃娃领格子衬衫a>
                        p>
                        <a href="#" class="comment">
                            <span><img src="images/shopping_img_06_icon.png" alt="">span><i>日***装i>
                        a>
                    li>
            div>
        div>
    
        
        <div id="tool">
            <span class="iconfont">span>
            <div class="btn">
                <a href="#iGoodsShopping" target="_self" class="c4 active">爱逛 好货a>
                <a href="#" class="c5">好店 直播a>
                <a href="#" class="c6">品质 特色a>
                <a href="#" class="c7">实惠 热卖a>
                <a href="#" class="c4">猜你 喜欢a>
                <a href="#" class="item6">反馈a>
                <a href="#" class="">暴恐 举报a>
            div>
        div>
    
    
    
        
        <br>
        <br>
        <br>
    
    body>
    html>
    
    2> index.css
    /* 
        @规则
            @charset    设置样式表的编码
            @import     导入其他样式文件 ---(样式模块化)
            @media      媒体查询 --- (eg:移动端适配、...)
            @font-face  自定义字体
    */
    
    @import 'reset.css';
    
    @font-face {
           
        font-family: 'iconfont';
        src: url('../font/iconfont.eot');
        src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('../font/iconfont.woff2') format('woff2'),
            url('../font/iconfont.woff') format('woff'),
            url('../font/iconfont.ttf') format('truetype'),
            url('../font/iconfont.svg#iconfont') format('svg');
    }
    .iconfont {
           
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* 头部信息 */
    #headMessage {
           
        height: 35px;
    }
    #headMessage li {
           
        float: left;
        height: 35px;
        line-height: 35px;
        padding: 0 6px;
        font-size: 0;
    }
    #headMessage a {
           
        color: #6c6c6c;
        font-size: 12px;
    }
    #headMessage a:hover {
           
        color: #f40;
    }
    #headMessage a:hover span.store {
           
        color: #f40;
    }
    #headMessage a.login {
           
        color: #f22e00;
    }
    #headMessage span {
           
        font-size: 12px;
    }
    #headMessage span.arrow {
           
        margin-left: 7px;
    }
    #headMessage li strong {
           
        font-size: 12px;
        color: #f22e00;
    }
    #headMessage li span.store {
           
        color: #9c9c9c;
    }
    #headMessage li.line {
           
        font-size: 12px;
        color: #ddd;
    }
    
    
    /* 头部广告 */
    #headAd {
           
        background-color: #ff4600;
    }
    #headAd .go {
           
        display: block;
        padding: 10px 10px 10px 15px;
    }
    #headAd .go img {
           
        width: 80px;
        height: 80px;
    }
    #headAd ul {
           
        padding-top: 13px;
    }
    #headAd li {
           
        float: left;
        width: 209px;
        height: 75px;
        margin-right: 10px;
    
        padding: 12px 15px 0 15px;
    
        box-sizing: border-box;
        /* 
            盒模型:
                1、标准盒模型
                    总宽度=border(左右)+width+padding(左右)
                    总高度=border(上下)+width+padding(上下)
                2、IE盒模型(怪异盒模型)
                    总宽度=width
                    总高度=height
        */
    }
    #headAd li h3 {
           
        font-size: 20px;
        line-height: 28px;
    }
    #headAd li a {
           
        color: #fff;
        display: block;
    }
    #headAd li p {
           
        font-size: 14px;
        line-height: 20px;
    }
    #headAd li a img {
           
        width: 52px;
        height: 52px;
        border-radius: 5px;
    }
    
    #headAd li.item1 {
           
        background: url(../images/headAd-list-01.png) no-repeat;
    }
    #headAd li.item2 {
           
        background: url(../images/headAd-list-02.png) no-repeat;
    }
    #headAd li.item3 {
           
        background: url(../images/headAd-list-03.png) no-repeat;
    }
    #headAd li.item4 {
           
        background: url(../images/headAd-list-04.png) no-repeat;
    }
    #headAd li.item5 {
           
        background: url(../images/headAd-list-05.png) no-repeat;
        margin-right: 0;
    }
    
    
    /* 头部搜索 */
    #headSearch {
           
        background-color: #fff;
        padding: 24px 0 10px 0;
    }
    #headSearch h1 a {
           
        display: block;
        width: 190px;
        height: 58px;
        background: url(../images/headSearch-logo-v1.png) center no-repeat;
        text-indent: -9999px;
        overflow: hidden;
        margin-top: 8px;
    }
    #headSearch .code {
           
        position: relative;
        width: 72px;
        height: 86px;
        border: 1px solid #eee;
        text-align: center;
        margin-right: 110px;
    }
    #headSearch .code img {
           
        width: 62px;
        height: 62px;
    }
    #headSearch .close {
           
        position: absolute;
        left: -16px;
        top: -1px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: #ddd;
        border: 1px solid #eee;
        cursor: pointer;
    }
    
    #headSearch .search {
           
        width: 630px;
        margin: 0 auto;
    }
    #headSearch .searchTab {
           
        height: 22px;
        padding-left: 17px;
    }
    #headSearch .search li {
           
        float: left;
        width: 36px;
        line-height: 22px;
        margin-right: 4px;
        text-align: center;
        color: #f40;
        cursor: pointer;
    }
    #headSearch .search li:hover {
           
        background-color: #ffeee5;
    }
    #headSearch .search li.active {
           
        color: #fff;
        font-weight: bold;
    
        /* 渐变背景---CSS3属性---ie10以上 */
        /* 以下是:线性渐变(参数依次为:渐变方向、起始颜色、结束颜色) */
        background-image: linear-gradient(to right, #ff9000, #ff5000);
    
        /* IE滤镜(能够向下兼容到ie6)---以下是:线性渐变 */
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
    
        border-radius: 5px 5px 0 0;
    }
    #headSearch .searchContent {
           
        height: 40px;
    }
    #headSearch .searchBox {
           
        position: relative;
        width: 554px;
        height: 40px;
        box-sizing: border-box;
        border: 2px solid #ff5000;
        border-right: none;
        border-radius: 20px 0 0 20px;
        overflow: hidden;
    }
    #headSearch .searchBox input {
           
        width: 490px;
        height: 36px;
        line-height: 36px;
        outline: none;
        border: none;
        text-indent: 10px;
        
        position: absolute;
        z-index: 2;
        /* 此处的背景颜色设置为:透明 --- 以便能够看到后面的文字 */
        background-color: transparent;
    }
    #headSearch .searchBox .placeholder {
           
        position: absolute;
        top: 6px;
        left: 14px;
    }
    #headSearch .searchBox .placeholder span {
           
        color: #9c9c9c;
        vertical-align: 1px;
    }
    #headSearch .searchBox .imgSearch {
           
        position: absolute;
        right: 20px;
        top: -2px;
        font-size: 28px;
        color: #9c9c9c;
        cursor: pointer;
    }
    #headSearch .searchContent button {
           
        width: 74px;
        height: 40px;
        text-align: center;
        font-size: 18px;
        line-height: 40px;
        color: #fff;
        border: none;
        /* 设置渐变 */
        background-image: linear-gradient(to right, #ff9000, #ff5000);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
    
        border-radius: 0 20px 20px 0;
    } 
    #headSearch .hotKey {
           
        height: 25px;
        line-height: 25px;
    }
    #headSearch .hotKey a:hover {
           
        color: #f50;
    }
    
    
    /* 导航 */
    #nav h2 {
           
        width: 190px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        background-color: #f50;
    }
    #nav ul {
           
        margin-left: 190px;
        height: 30px;
    
        /* width: 1000px;
        width: calc(100% - 190px); */   /* calc(); 支持情况:IE9+ */
    
    
        /* 设置渐变 */
        background-image: linear-gradient(to right, #ff9000, #ff5000);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
    }
    #nav ul li {
           
        float: left;
        line-height: 30px;
        margin: 0 7px;
        font-size: 14px;
        color: #fff;
        padding: 0 5px;
    
        position: relative;
    }
    #nav ul li.size {
           
        font-size: 16px;
    }
    #nav ul li a {
           
        color: #fff;
        font-weight: bold;
    }
    #nav ul li.line {
           
        margin: 0;
        padding: 0;
    }
    #nav ul li.line::before {
           
        display: none;
    }
    #nav ul li:hover::before {
           
        content: '';
        position: absolute;
        width: 23px;
        height: 13px;
        background-image: url(../images/icon_01.png);
        background-position: center;
        background-size: contain;
    
        top: -13px;
        left: 50%;
        margin-left: -12px;
    }
    
    
    /* 首屏内容 */
    
    /* 左边的内容 */
    .firstLeft {
           
        width: 890px;
    }
    /* 侧边导航 */
    .firstLeft .sideNav {
           
        width: 190px;
        height: 522px;
        background: #fff;
        border: 1px solid #ff5000;
        box-sizing: border-box;
        border-top: none;
        padding-top: 5px;
        padding-bottom: 3px;
    }
    .firstLeft .sideNav li {
           
        height: 32px;
        line-height: 32px;
        padding-left: 25px;
        padding-right: 7px;
        font-size: 14px;
        color: #999;
        
        transition: background-color 0.3s;
    }
    .firstLeft .sideNav li a {
           
        font-size: 14px;
        color: #666;
    }
    .firstLeft .sideNav li span {
           
        font-size: 12px;
    }
    .firstLeft .sideNav li:hover {
           
        background-color: #ffe4dc;
        color: #f50;
    }
    .firstLeft .sideNav li:hover a {
           
        color: #f50;
    }
    .firstLeft .sideNav li:hover a:hover {
           
        text-decoration: underline;
    }
    /* 图片1容器 */
    .firstLeft .img1Box {
           
        width: 690px;
        height: 282px;
        margin-top: 10px;
    }
    .firstLeft .pic {
           
        width: 520px;
        position: relative;
    }
    .firstLeft .pic button {
           
        width: 20px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        cursor: pointer;
        border: none;
        background-color: rgba(0, 0, 0, .3);    /* 支持情况:ie9+ */
    
        background-color: #000\9;   /* 只有ie9以下的ie浏览器认识(CSS-hack) */
        filter: alpha(opacity=30);  /* 透明 */
    
        position: absolute;
        top: 50%;
        margin-top: -15px;
    
        display: none;
    }
    .firstLeft .pic button.leftBtn {
           
        left: 0;
        border-radius: 0 15px 15px 0;
    }
    .firstLeft .pic button.rightBtn {
           
        right: 0;
        border-radius: 15px 0 0 15px;
    }
    .firstLeft .pic:hover button {
           
        display: block;
    }
    .firstLeft .pic .circle {
           
        position: absolute;
        bottom: 15px;
        left: 50%;
        margin-left: -35px;
        border-radius: 10px;
        padding: 3px 0;
        font-size: 0;
    
        background-color: rgba(255, 255, 255, .3);    /* ie8不支持 */
    }
    .firstLeft .pic .circle span {
           
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 3px;
        cursor: pointer;
    }
    .firstLeft .pic .circle span.active {
           
        background-color: #ff5000;
    }
    .firstLeft .ad {
           
        width: 160px;
    }
    .firstLeft .ad img {
           
        width: 160px;
    }
    /* 图片2容器 */
    .firstLeft .img2Box {
           
        width: 690px;
        height: 220px;
        margin-top: 10px;
    }
    .firstLeft .img2Box .picTitle {
           
        height: 20px;
    }
    .firstLeft .img2Box .picTitle .text {
           
        height: 17px;
        line-height: 17px;
    }
    .firstLeft .img2Box .picTitle .text .bg {
           
        background: url(../images/img2Box-picTitle-tianmao.png) no-repeat left;
        padding-left: 136px;
        color: #666;
    }
    .firstLeft .img2Box .picTitle .text i {
           
        color: #ff1648;
    }
    .firstLeft .img2Box .picTitle .line {
           
        height: 3px;
        background-color: #ff1648;
        position: relative;
    }
    .firstLeft .img2Box .picTitle .line span {
           
        width: 87px;
        height: 3px;
        background-color: #000;
        position: absolute;
        left: 0;
    }
    .firstLeft .img2Box .img {
           
        width: 520px;
        height: 200px;
        background-color: #fff;
        position: relative;
    
        display: table-cell;    /* 对应单元格td 所有内容都能垂直居中显示 */
        vertical-align: middle;
    
        /* 弹性盒模型---兼容性: ie10+ */
        /* display: flex;
        justify-content: space-around;
        align-items: center; */
    }
    .firstLeft .img2Box .img img {
           
        margin: 0 9px;
    }
    .firstLeft .img2Box .ad .title {
           
        height: 20px;
        line-height: 20px;
    }
    /* 淘宝论坛 */
    .firstLeft .news {
           
        width: 890px;
        height: 100px;
        background: #fff;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 13px 13px 13px 20px;
    }
    .firstLeft .news .hd {
           
        margin-top: 15px;
    }
    .firstLeft .news .hd h3 {
           
        width: 129px;
        height: 26px;
        background: url(../images/taobaoluntan.png) no-repeat;
        background-size: contain;
        text-indent: -9999px;
        overflow: hidden;
    }
    .firstLeft .news .hd p {
           
        color: #999;
        line-height: 24px;
    }
    .firstLeft .news .newList {
           
        width: 680px;
        position: relative;
    }
    .firstLeft .news .newList .img {
           
        margin-right: 15px;
    }
    .firstLeft .news .newList .img img {
           
        width: 130px;
        height: 73px;
    }
    .firstLeft .news .newList h4 {
           
        line-height: 28px;
        font-size: 16px;
        font-weight: normal;
    }
    .firstLeft .news .newList h4 a {
           
        color: #333;
    }
    .firstLeft .news .newList h4 a:hover,
    .firstLeft .news .newList .more:hover {
           
        color: #ff5000;
    }
    .firstLeft .news .newList p {
           
        line-height: 18px;
        font-size: 14px;
    }
    .firstLeft .news .newList p a {
           
        color: #999;
    }
    .firstLeft .news .newList .more {
           
        position: absolute;
        top: 0;
        right: 0;
        color: #999;
    }
    
    
    /* 右边的内容 */
    .firstRight {
           
        width: 290px;
        margin-top: 10px;
    }
    /* 用户 */
    .firstRight .user {
           
        height: 140px;
        padding: 5px;
        background: url(../images/firstRight-userBox-bg.png) no-repeat;
        background-size: cover;
    }
    .firstRight .user .avatar {
           
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
    }
    .firstRight .user .avatar img {
           
        width: 50px;
        height: 50px;
    }
    .firstRight .user .username {
           
        text-align: center;
        line-height: 16px;
    }
    .firstRight .user .members {
           
        text-align: center;
        font-size: 0;
    }
    .firstRight .user .members a {
           
        display: inline-block;
        font-size: 12px;
        border-radius: 9px;
        padding: 0 10px 0 20px;
        margin: 0 2px;
        
        /* background-color: #ffe4dc; */
    }
    .firstRight .user .members a.gold {
           
        background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
    }
    .firstRight .user .members a.club {
           
        background: #ffe4dc url(../images/ico.png) 0 -528px no-repeat;
    }
    .firstRight .user .btn {
           
        text-align: center;
    }
    .firstRight .user .btn button {
           
        width: 75px;
        height: 25px;
        line-height: 25px;
        margin: 12px 2px 0 2px;
        color: #fff;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
    
        /* 设置渐变 */
        background-image: linear-gradient(to right, #ff9000, #ff5000);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
    }
    .firstRight .user .btn button.login {
           
        width: 92px;
    }
    /* 举报 */
    .firstRight .tipOff {
           
        display: block;
        height: 26px;
        line-height: 26px;
        color: #f40;
        background: #ffe4dc;
        text-align: center;
    }
    .firstRight .tipOff i {
           
        font-size: 12px;
        vertical-align: 1px;
    
        position: relative; /* 相对于原来的位置进行定位,不影响前面文本的居中显示 */
        left: 30px;
    }
    
    /* 公告区 */
    .firstRight .notice {
           
        height: 108px;
        background-color: #fff;
    }
    .firstRight .notice .title {
           
        text-align: center;
        font-size: 0;
        padding-top: 10px;
    }
    .firstRight .notice .title li {
           
        display: inline-block;
        font-size: 12px;
        line-height: 20px;
        padding: 0 4px;
        margin: 0 10px;
    }
    .firstRight .notice .title li.active {
           
        font-weight: bold;
        border-bottom: 2px solid #f40;
    }
    .firstRight .notice .title li a:hover {
           
        color: #f40;
    }
    .firstRight .notice .content {
           
        margin: 0 12px;
        padding-top: 10px;
    }
    .firstRight .notice .content li {
           
        height: 25px;
        line-height: 25px;
        overflow: hidden;
        float: left;
        width: 130px;
    }
    .firstRight .notice .content li a:hover,
    .firstRight .notice .content li.item1 a{
           
        color: #ff5000;
    }
    .firstRight .notice .content li.item1 {
           
        width: 100%;
    }
    
    /* 图标区域 */
    .firstRight .icon {
           
        width: 100%;
        height: 229px;
        background-color: #fff;
        table-layout: fixed;  /* 定义列宽的算法---fixed的计算方式为根据表格宽度自动计算列宽,每列的宽度为均分整个表格的宽度。 */
    }
    .firstRight .icon td {
           
        border: 1px solid #f4f4f4;
        text-align: center;
    }
    .firstRight .icon td span {
           
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto;
        background: url(../images/ico.png) no-repeat;
    }
    .firstRight .icon td i {
           
        line-height: 34px;
        color: #333;
    }
    
    .firstRight .icon .item1 span {
           
        background-position: 0 0;
    }
    .firstRight .icon .item2 span {
           
        background-position: 0 -87px;
    }
    .firstRight .icon .item3 span {
           
        background-position: 0 -44px;
    }
    .firstRight .icon .item4 span {
           
        background-position: 0 -132px;
    }
    .firstRight .icon .item5 span {
           
        background-position: 0 -176px;
    }
    .firstRight .icon .item6 span {
           
        background-position: 0 -220px;
    }
    .firstRight .icon .item7 span {
           
        background-position: 0 -264px;
    }
    .firstRight .icon .item8 span {
           
        background-position: 0 -308px;
    }
    .firstRight .icon .item9 span {
           
        background-position: 0 -352px;
    }
    .firstRight .icon .item10 span {
           
        background-position: 0 -396px;
    }
    .firstRight .icon .item11 span {
           
        background-position: 0 -440px;
    }
    .firstRight .icon .item12 span {
           
        background-position: 0 -484px;
    }
    
    /* APP */
    .firstRight .app {
           
        height: 111px;
        background: #fff;
    }
    .firstRight .app .title {
           
        height: 30px;
        line-height: 30px;
    }
    .firstRight .app .title h3 {
           
        font-size: 14px;
        padding-left: 14px;
    }
    .firstRight .app .title a {
           
        margin-right: 10px;
    }
    .firstRight .app .title a:hover {
           
        color: #f40;
    }
    .firstRight .app .appIcon {
           
        text-align: center;
        font-size: 0;
    }
    .firstRight .app .appIcon li {
           
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 10px 8px 10px;
    }
    .firstRight .app .appIcon li img {
           
        width: 32px;
        height: 32px;
    }
    
    /* 有好货与爱逛街 */
    #iGoodsShopping .goods {
           
        width: 590px;
        height: 658px;
        background-color: #fff;
    
        overflow: hidden;   /*每一个li标签都有一个margin-bottom,但最后一行li标签其实不需要设置margin-bottom,所以此处做此设置。已隐藏margin多挤出来的的部分*/
    
    }
    #iGoodsShopping .goods .head {
           
        height: 24px;
        line-height: 24px;
        margin: 20px 0; 
        padding: 0 20px;
    }
    #iGoodsShopping .goods .head h3 {
           
        font-size: 0;
        font-weight: normal;
    }
    #iGoodsShopping .goods .head h3 img {
           
        height: 24px;
    }
    #iGoodsShopping .goods .head h3 span {
           
        vertical-align: middle;
        color: #ccc;
        font-size: 20px;
        margin: 0 5px;
    }
    #iGoodsShopping .goods .head h3 i {
           
        font-size: 12px;
        vertical-align: middle;
        color: #999;
    }
    #iGoodsShopping .goods .head .change {
           
        color: #999;
    }
    #iGoodsShopping .goods .list {
           
        font-size: 0;
        text-align: center;
    }
    #iGoodsShopping .goods .list li {
           
        display: inline-block;
        width: 180px;
        margin: 0 2px 35px 2px;
    }
    #iGoodsShopping .goods .list li img {
           
        width: 180px;
        height: 180px;
    }
    #iGoodsShopping .goods .list li h4 {
           
        font-size: 16px;
        height: 28px;
        line-height: 28px;
        font-weight: normal;
        text-align: left;
        overflow: hidden;
    }
    #iGoodsShopping .goods .list li h4 a:hover {
           
        color: #f40;
    }
    #iGoodsShopping .goods .list li .text {
           
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        overflow: hidden;
    }
    #iGoodsShopping .goods .list li .text a {
           
        color: #999;
    }
    #iGoodsShopping .goods .list li .comment {
           
        display: block;
        height: 22px;
        line-height: 22px;
        font-size: 12px;
        color: #35b1ff;
        margin-top: 12px;
        text-align: left;
    }
    #iGoodsShopping .goods .list li .comment span {
           
        font-size: 14px;
        margin-right: 4px;
    }
    
    /* 爱逛街 */
    #iGoodsShopping .shopping .list li .text {
           
        height: 44px;
        line-height: 22px;
        font-size: 14px;
        overflow: hidden;
        margin-top: 11px;
    }
    #iGoodsShopping .shopping .list li .text span {
           
        font-size: 14px;
        color: #ebebeb;
        position: relative;
        top: -5px;
    }
    #iGoodsShopping .shopping .list li .text a:hover {
           
        color: #f40;
    }
    #iGoodsShopping .shopping .list li .comment {
           
        color: #999;
    }
    #iGoodsShopping .shopping .list li .comment img {
           
        width: 22px;
        height: 22px;
        border-radius: 50%;
    }
    
    
    /* 右侧固定定位导航 */
    #tool {
           
        width: 50px;
        height: 350px;
        
        position: fixed;
        top: 280px;
        right: 7%;
    }
    #tool span {
           
        font-size: 32px;
        color: #ff7f13;
        width: 50px;
        height: 36px;
        line-height: 36px;
        text-align: center;
    
        position: absolute;
        top: -28px;
    }
    #tool div {
           
        height: 350px;
        border-radius: 8px;
        overflow: hidden;
    }
    #tool a {
           
        display: block;
        width: 50px;
        height: 50px;
        text-align: center;
        background-color: #fff;
        word-break: keep-all;  /*在空格的地方使其强制换行*/
    
        padding-top: 6px;
        box-sizing: border-box;
        position: relative;
    }
    #tool a::after {
               /*ie8不兼容“::”,故要想兼容ie8,则此处的伪元素前面应该为“:” */
        content: '';
        border-bottom: 1px solid #efefef;
        width: 34px;
        position: absolute;
        left: 8px;
        bottom: 0;
    }
    #tool a.item6 {
           
        line-height: 40px;
    }
    #tool a:hover,
    #tool a.active {
           
        color: #fff;
        font-weight: bold;
    
        /* 设置渐变 */
        background-image: linear-gradient(135deg, #ff9000, #ff5000);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
    }
    #tool a:hover::after,
    #tool a.active::after {
           
        display: none;
    }
    
    3> reset.css
    body,p,h1,h2,h3,h4 {
           
        margin: 0;
    }
    ul {
           
        margin: 0;
        padding: 0;
        list-style: none;
    }
    img {
           
        border: none;   
        vertical-align: middle;
    }
    a {
           
        text-decoration: none;
        color: #3c3c3c;
    }
    i {
           
        font-style: normal;
    }
    input,button {
           
        margin: 0;
        padding: 0;
    }
    button {
           
        outline: none;
        border: none;
    }
    table {
           
        border-collapse: collapse;  /* 边框模式---合并的模式:即两个单元格之间的的边框只需要显示一个就行 */
    }
    th,td {
           
        padding: 0;
    }
    
    body {
           
        font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
        /* 字体大小/行高 字体 */
        color: #3c3c3c;
        background-color: #f4f4f4;
    }
    
    /* 预定义class */
    .clearfix::after {
           
        content: '';
        display: block;
        clear: both;
    }
    .fl {
           
        float: left;
    }
    .fr {
           
        float: right;
    }
    
    .layer {
           
        width: 1190px;
        margin: 0 auto;
    }
    
    .c4 {
           
        color: #f40;
    }
    .c5 {
           
        color: #f50;
    }
    .c6 {
           
        color: #8d7afb;
    }
    .c7 {
           
        color: #a8c001;
    }
    .mr5 {
           
        margin-right: 5px;
    }
    .mr7 {
           
        margin-right: 7px;
    }
    .mr10 {
           
        margin-right: 10px;
    }
    .mt10 {
           
        margin-top: 10px;
    }
    

总结自《渡一教育_2020权威HTML+CSS零基础入学》

你可能感兴趣的:(HTML+CSS,html,css,前端)