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

最新推荐文章于 2022-07-13 19:50:13 发布
最新推荐文章于 2022-07-13 19:50:13 发布
阅读量3k 收藏 37
点赞数 6
分类专栏： HTML+CSS 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47516343/article/details/106985088
版权

内容概览

模拟淘宝首页（静态）

一、项目重难点

  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 小图标）
    <!DOCTYPE html>
<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"

    <!DOCTYPE html>
<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 7、8、9（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、单元格的宽度会自动计算
*/
    例如，实现淘宝商城中的以下效果，可以采用“表格”布局：
    在这里插入图片描述
    /* 淘宝商城_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
    <!DOCTYPE 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>
    <!-- ★ 划分HTML结构的依据：内容、颜色块、间距、边框。★ -->
    
    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix layer">
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span class="iconfont arrow">&#xe649;</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">&#xe649;</span>
            </li>
            <li>
                <span class="iconfont mr5 c4">&#xe60e;</span>
                <a href="#">购物车</a>
                <strong>0</strong>
                <span class="iconfont arrow">&#xe649;</span>
            </li>
            <li>
                <a href="#"><span class="iconfont mr5 store">&#x3432;</span>收藏夹</a>
                <span class="iconfont arrow">&#xe649;</span>
            </li>
            <li>
                <a href="#">商品分类</a>
            </li>
            <li class="line">|</li>
            <li>
                <a href="#">千牛卖家中心</a>
                <span class="iconfont arrow">&#xe649;</span>
            </li>
            <li>
                <a href="#">联系客服</a>
                <span class="iconfont arrow">&#xe649;</span>
            </li>
            <li>
                <span class="iconfont c4 mr5">&#xe62a;</span>
                <a href="#">网站导航</a>
                <span class="iconfont arrow">&#xe649;</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>
                    <a href="#" class="fr"><img src="images/headAd-list-item-01.png" alt=""></a>
                    <h3><a href="#">电视会场</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li> -->
                <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="#">最高降2000</a></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="#">最高降2000</a></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="#">最高降2000</a></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="#">最高降2000</a></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="#">最高降2000</a></p>
                </li>
            </ul>
        </div>
    </div>

    <!-- 头部搜索 -->
    <div id="headSearch">
        <div class="clearfix layer">
            <!-- <h1><a href="#"><img src="images/headSearch-logo.gif" alt="淘宝网"></a></h1> -->
            <h1 class="fl"><a href="#">淘宝网</a></h1>

            <div class="code fr">
                <span class="iconfont close">&#xe70f;</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">&#xe62e;</i>
                                <span>毛衣女冬中长款加厚</span>
                            </div>
                            <span class="iconfont imgSearch">&#xe6ba;</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">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">面料采集</a> / <a href="#">装修</a> / <a href="#">建材</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                    <li>
                        <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span class="iconfont fr">&#xe74b;</span>
                    </li>
                </ul>
            </div>

            <!-- 图片1容器 -->
            <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">&#xe74a;</button>
                    <button class="iconfont rightBtn">&#xe74b;</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>

            <!-- 图片2容器 -->
            <div class="img2Box fl">
                <div class="pic fl">
                    <div class="picTitle">
                        <div class="text clearfix">
                            <span class="fl bg">理想生活上天猫</span>
                            <span class="fr"><i>1</i>/6</span>
                        </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">&#xe74a;</button>
                    <button class="iconfont rightBtn">&#xe74b;</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">&#xe644;</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>

            <!-- APP -->
            <div class="app">
                <div class="title clearfix">
                    <h3 class="fl">阿里APP</h3>
                    <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">&#xe607;</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">&#xe75a;</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">&#xe75a;</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">&#xe75a;</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">&#xe75a;</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">&#xe75a;</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">&#xe75a;</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">&#xe607;</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">&#xe67b;</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">&#xe67b;</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">&#xe67b;</span>
                        <a href="#">你的好友个性卫衣上线，温暖又时髦</a>
                    </p>
                    <a href="#" class="comment">
                        <span><img src="images/shopping_img_03_icon.png" alt=""></span><i>A***U</i>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="images/shopping_img_04.png" alt=""></a>
                    <p class="text">
                        <span class="iconfont">&#xe67b;</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">&#xe67b;</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">&#xe67b;</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">&#xe605;</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零基础入学》
继续努力就好
关注
  • 6
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
淘宝静态页面（HTML + CSS）
08-22
此项目是课余事件练习pc端页面编写能力的，仿淘宝页面，还原度十分逼真，大家可以利用起来里面有很多有用的练习内容大家可以尝试做成活得，省得自己写页面了！！
用Html写淘宝静态页面
mamengna的博客
11-22 6122
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/taobao.css" rel="stylesheet" type="text/css" /> </head> <body> <d...
HTML与CSS实现淘宝静态页面（参考版）
WF帆少的博客
01-15 3万+
本文章内容是利用HTML与CSS实现淘宝静态页面，没有js交互， 需要相关图片素材的请关注微信公众号“兴耀综合平台”获取 效果如下： html代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;淘宝网-淘！我喜欢&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="styles
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
余光的博客
09-20 2万+
作为一个前端开发，基础页面布局和样式是必备，我们拿电商具体（模块、丰富度）都足够 第一版本 这一无论从布局到样式到UI都较老（因为是自己入门时写的） 如果大家感兴趣可以下载下来看看。。。献丑了最近会抽时间改几版 代码下载 github仓库下载 或加我QQ565017805 第二版本（未完待续） 190921最近会抽时间重构一版电商网站的静态布局，布局思路会贴近仅了解HTML+CSS的朋友们...
HTML+CSS实现淘宝首页
热门推荐
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
淘宝商城首页_开发项目（静态）
07-05
该资源包含“淘宝商城首页_开发项目（静态）”的...若想要理解项目中的重难点，请参考我的博客中的《HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）》一文。总结自《渡一教育_2020权威HTML+CSS零基础入学》。
jQuery+css实现夜晚花朵绽放动画.rar
最新发布
10-01
4. 使用jQuery的`.animate()`方法或CSS动画来改变花瓣的CSS属性，如宽度、高度、透明度，模拟绽放效果。 5. 可能会使用CSS3的`@keyframes`规则来定义动画的关键帧，使得动画更加平滑。 标签 "jQuery特效 CSS特效 ...
jQuery+css3天猫双11拆红包抽奖特效.zip
09-22
开发者可以通过学习这个实例，掌握如何用JavaScript和CSS3构建具有吸引力的交互元素，提升自己的前端开发技能。同时，这个特效的可定制性也为开发者提供了二次创新的空间，可以根据自己的需求进行修改和扩展。
jQuery+CSS3仿星球大战3D字幕引导特效.zip
09-22
【jQuery+CSS3仿星球大战3D字幕引导特效】是一个结合了jQuery和CSS3技术的特效示例，主要用于创建类似电影《星球大战》开头的3D滚动字幕效果。这个特效可以为网站添加一种独特且引人入胜的引导体验，使用户在浏览...
css3模拟雷达波向外散发动画效果.zip
09-25
在本压缩包“css3模拟雷达波向外散发动画效果.zip”中，包含了一个使用CSS3实现的雷达波动画特效。这个特效适用于那些希望在网页上添加动态视觉元素的开发者，尤其是那些对交互式设计感兴趣的设计师。以下是关于CSS3...
模拟购物网站
01-18
本项目使用Struts -Hibernate框架建立网上购物系统。在Struts框架中，JSP用于前端展现，Servlet 用于控制，Ajax实现异步刷新，Action 用于处理前端页面JSP发来的请求,请求参数通过ActionForm进行传递,Action 在获得请求后通过调度业务系统进行做处理,最后将处理结果转发到相应的JSP进行展现，显现分页效果。数据持久化层使用Hibernate。
HTML项目淘宝网完整代码
01-08
给以资源以及关键代码参考！ 需要的人，请放心下载！
html+css的淘宝首页
09-11
html+css的淘宝首页，想只看代码的可以去我发表的文章里看，这里有图片素材和代码
仿作淘宝页面 html+css
m0_63706031的博客
07-13 1874
仿作淘宝页面简单版
web第一课模拟淘宝设置静态网页——html+css布局设计
onlySeungRi的博客
04-11 1万+
学会使用webstorm先打开webstorm（注意需要破解)然后注意首次打开之后会出现让你新建一个存放所有文件的目录（如下图所示文件保存在c盘路径为C:\Users\baitianmeng\WebstormProjects\untitled1）     2.保存完成之后file---new----directory-------(新建一个文件夹)如图建立文件夹名为bai3.建好工程名-----n...
模拟登陆淘宝
鲨鱼辣椒灬的博客
07-26 718
https://npm.taobao.org/mirrors/chromedriver 下载和自己版本前3个一样的就行 <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> <version>3.141.59</ver.
淘宝实战-大知识点总结
渴鱼y. . 。.
05-28 245
1、插入图片的方式：img？background-image? a.区别 网页加载时，如果在html中用img标签引入了一个很大的图片，那么在这个图片下载完成之前，之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。(网速本来就不好时，就把图片放在css里，这样的话，即使加载不出来此图片，也不耽误我们查看到网页的内容部分...
html+css淘宝静态网页
BB_andB的博客
09-04 4692
引言 暑假自学了HTML和CSS，找了个淘宝首页来验证自己的学习成果。 项目源码百度网盘链接：https://pan.baidu.com/s/1Lwoddqk6YwfjSa9W-P_f4g 提取码：fnk5 静态网页展示 总结 HTML和CSS总共学习了2个星期多一点，直到一个星期前才开始着手准备着淘宝首页的各种资料（图片，css样式等），整个项目用了4天时间（大学要上课，还要去运动- -） ...
HTML+CSS+JS学习笔记：从结构到行为详解
HTML笔记是一份详尽的前端开发学习资料，它涵盖了HTML、CSS和JavaScript这三个关键领域的基础知识。这份文档首先介绍了HTML，作为Web页面结构的基础语言，它的主要作用是描述页面的布局和内容。HTML的基本结构包括...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值