front-end-css-knowledge-points
/
5.6淘宝焦点图布局.html


    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div class="tb-promo">
            <img src="./4.5学成在线案例根目录/images/taobao_promo.jpg" alt="">
            <!-- 左侧按钮 -->
            <a href="#" class="prev-btn">&lt;</a>
            <!-- 右侧按钮 -->
            <a href="#" class="next-btn">&gt;</a>
            <!-- 小圆点 -->
            <ul class="promo-nav">
                <li class="selected"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .tb-promo {
            /* 子绝父相 */
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            /* 相对定位可以使用margin进行调整，但是绝对定位和固定定位不能 */
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        .prev-btn {
            /* 因为按钮有高度宽度所以可以转换成行内块，但是又需要压住其他盒子，所以使用定位，定位具有行内块的特性 */
            /* display: inline-block; */
            position: absolute;
            /* 设置了绝对定位之后需要设置位置 */
            /* 使用居中算法 */
            left: 0;
            top: 50%;
            margin-top: -15px;
            /* 加了绝对定位的盒子可以直接设置高度和宽度 */
            /* 同时要注意子绝父相 */
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
            border-radius: 0 15px 15px 0;
        }

        .next-btn {
            /* 因为按钮有高度宽度所以可以转换成行内块，但是又需要压住其他盒子，所以使用定位，定位具有行内块的特性 */
            /* display: inline-block; */
            position: absolute;
            /* 设置了绝对定位之后需要设置位置 */
            /* 使用居中算法 */
            right: 0;
            top: 50%;
            margin-top: -15px;
            /* 加了绝对定位的盒子可以直接设置高度和宽度 */
            /* 同时要注意子绝父相 */
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
            border-radius: 15px 0 0 15px;
        }

        /* 提取公共部分减少代码冗余... */
        .prev-btn,
        .next-btn {
            /* 定位盒子同时具有left和right的话会执行left，同理top和bottom会执行top */
            text-align: center;
        }

        .tb-promo>a:hover {
            color: aqua;
        }

        .promo-nav {
            position: absolute;
            bottom: 15px;
            ;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 7px;
        }

        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }

        .promo-nav .selected {
            background-color: #ff5000;
        }

        /* 3.网页布局总结

        通过盒子模型，洁楚知道大部分htm标签是一个盒子.
        通过CSS浮动、定位可以让每个盒子排列成为网页.
        一个完整的网页，是标准流、浮动、定位起完成布月的，每个都有自己的专门用法
        1.标准流
            可以让盒子上下排列或者左右排列，垂直的块级盘子显示就用标准流布局。
        2.浮动
            可以让多个块级元素一行显示者左右对对齐盒子，多个块级盒子水平显示就用浮动布局。
        3.定位
            定位最大的特点是有层要的概念，就是可以让多个盒子前后叠压来显示。如限元素自由在某个盘子内移动就
            用定位布局。 */


        /* 元素的显示与隐藏 */
        /* display 显示隐藏
            display网性用于设亚一个元素应如何显示，
            display:none:隐藏对象  -----并且隐藏之后不再保留原来的位置
            display:block;除了转换为块级元系之外，同时还有园示元奈的密思 */


        /* visibility 显示隐藏 */
        /* visibility属性用于绝定个元素应可见还是隐藏， */
        /* 类以网站广告，当我们点击关闭就不见了，但是我们压新刷新页面，会玉新出现！
                本质：让一个元亲在页面中隐藏或者显示出来。
                visibility:hidden;元素隐藏  ------继续占有原来的位置
            visibility:visible:元茶可视 */


        /* overflow 溢出部分的显示隐藏 只针对溢出部分作用 */
        /* overflow: hidden; 隐藏溢出区域外的部分 */
        /* overflow: visible; 显示*/
        /* overflow: scroll; 溢出部分显示滚动条*/
        /* overflow: auto; 在有超出部分的时候，在有需要的情况下才显示滚动条*/

        /* 5.7 土豆网显示隐藏案例.html */


        /* 精灵图 */
        /* 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图修过多时，服务器就会频繁地接收和发送
        请求图片，造成服务器法求压力过大，这将大大降低页面的决庶
        因此，为了有效地减少服务器接收和发送请求的次数，高页面的加载速度，出现了CS5精灵技术（也称CS5 Sprites、CSs雪碧)。 */

        /* 核心原理：将网页中的一些小背贤图像整合到一张大图中，这样服务器只需要一次请求就可以了。 */
        /* 实现原理  针对一张大的图片使用background-position的方式将大图中的每个位置对应显示，其余部分使用overflow:hidden的方式隐藏。
        精灵图的图标缺点就是比较大，并且图片本身放大缩小会导致失真，并且图片制作完成后想要更换会变得很复杂
        此时，有一种技术的出现很好的解决了以上问邀，就是字体标iconfont。.
        字体恩标可以为前揣工程师提供一种方便高威的图标使用方式，展示的是图标，本质属于字体。*/


        /* 5.8 精灵图案例.html */

        /* 字体图标
        轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上始染出来，减少了服务器情求
        灵活性：本质其实是文字，可以很随意的改变额色、产生阴影、送明效果、旋转等
        兼容性：几乎支持所有的浏览器，请放心使用
        注意：字体图标不能替代精灵技术，只是对工作中图标纷技术的提升和优化
        简单的使用字体图标，复杂的使用精灵图
         */

         /* 从https://icomoon.io/ 当中下载字体图标然后解压缩
         并且把font文件夹放到项目根目录当中去，然后再字体解压目录中的style.css文件中复制前一部分的字体声明css复制到代码，然后才能使用
         可以从下载下来的字体包中的demo.html中查看字体相关的css代码
         复制demo里的小方框，然后在页面中使用，然后再css代码当中写font-family: 'icomoon'; 来实现字体图标的样式，字体图标实际上仍然是汉字，所以可以是定义大小，颜色，位置等等
          */

        /* 5.9 字体图标案例.html */
        /* 字体图标的追加：把压缩包甲面的selection.json从新上传，然后选中自己想要新的图标，从新下我缩包，并替换原来的文件即可。

        */


        /* CSS三角制作，例如悬浮于某个按钮会有弹出界面并且链接处是一个三角形

        */

        /* 5.10 CSS三角制作案例.html */


    </style>

    </html>