front-end-css-knowledge-points
/
3知识点及案例.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>
        <!-- 页面布局有三大核心：盒子模型，浮动和定位，盒子模型可以很好的帮助页面布局 -->
        <!-- 先准备好相关的网页元素，网页元素基本都是盒子box -->
        <!-- 利用好CSS设置好盒子的样式，然后摆放到响应的位置 -->
        <!-- 然后往盒子里面装内容 -->
        <!-- 盒子的组成：
        box model
        boder 边框
        content 内容
        padding 内边距
        margin 外边距
        ./box model.png
            border：有三部分组成， border-width， border-style， border-color
            border-width：边框的宽度，可以是数字，也可以是百分比，如10px，10%，也可以是thin，medium，thick
            border-style：边框的样式，可以是solid，dashed，dotted，double，groove，ridge，inset，outset，solid 实现边框
            border-color：边框的颜色，可以是颜色名，也可以是rgb，rgba，hsl，hsla，可以是透明度，也可以是渐变，可以是多个颜色，用逗号隔开
    -->
        <div class="border1">contentcontentcontentcontentcontentcontentcontentcontent</div>
        <style>
            .border1 {
                width: 300px;
                height: 200px;
                /* 边框的粗细，一般情况下用px来写 */
                border-width: 5px;
                /* 边框样式，solid 实线边框 */
                /* border-style: solid; */
                /* 虚线边框 */
                /* border-style: dashed; */
                /* 点线边框 */
                border-style: dotted;
                /* 边框颜色 */
                border-color: pink;
                /* 边框简写，没有顺序，可以用一个或多个属性来实现边框，如：border: 5px solid pink; */
                /* 可以单独设置边框的某一个边，如：border-top: 5px solid pink; */
                border-top: 5px solid yellow;
                border-bottom: 8px dashed red;
                /* 当相邻边框挨着的时候会导致边框叠加变粗，用该属性可以防止边框叠加 */
                border-collapse: collapse;
                padding-top: 100px;
                padding-left: 100px;
            }
        </style><br>
        <hr>
        <!-- 新浪导航盒子案例 -->
        <div class="navvv">
            <a href="#">新浪导航</a>
            <a href="#">手机新浪网</a>
            <a href="#">微博客户端</a>
            <a href="#">微博</a>
            <a href="#">三个字</a>
        </div>
        <style>
            .navvv {
                height: 41px;
                border-top: 3px solid #ff8500;
                border-bottom: 1px solid #edeef0;
                background-color: #fcfcfc;
                line-height: 41px;
            }

            .navvv a {
                display: inline-block;
                height: 41px;
                font-size: 12px;
                color: #4c4c4c;
                text-decoration: none;
                padding: 0 20px;
            }

            .navvv a:hover {
                background-color: #eee;
            }

            /* padding 会影响盒子的大小 */
            /* 如果子元素不添加宽度和高度就不会影响父元素的宽度 */
            /* margin是外边距，同时也可以想padding一样单独设置某一遍的元素 */
            /* 子元素设置margin会导致父元素塌陷，塌陷距离会取决于大的那一个值 */
            /* 解决塌陷问题：可以为父元素设置边框或者设置内边距，但是这两者都会撑大盒子，所以可以写overflow: hidden; */
        </style><br>
        <hr>

        <!-- 商品盒子案例 -->
        <div class="shopbox">
            <img src="./banner02.jpg" alt="">
            <p class="review">此商品此商品此商品此商品此商品此商品</p>
            <div class="appraise">来自xxx的评价</div>
            <div class="info">
                <h4><a href="#">某某某蓝牙耳机某某某蓝...</a></h4>
                <em>|</em>
                <span>99元</span>
            </div>
        </div>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }

            body {
                background-color: #f5f5f5;
            }

            .shopbox {
                width: 298px;
                height: 415px;
                background-color: #fff;
                /* 让块级盒子水平居中对齐 */
                margin: 0 auto;
            }

            .shopbox img {
                /* 图片元素保持和父元素一样宽 */
                width: 100%;
                height: 200px;
            }

            .review {
                /* 设置p标签高度，方便固定距离显示更多的文字和整体格局 */
                /* padding值和height二选一，但是height会撑开盒子的高度 */
                height: 70px;
                font-size: 14px;
                margin-top: 30px;
                font-family: Arial, Helvetica, sans-serif;
                /* 因为这个段落没有width属性所以不会撑开盒子的宽度 */
                padding: 0 28px;
            }

            .appraise {
                font-size: 12px;
                color: #b0b0b0;
                margin-top: 20px;
                padding: 0 28px;
            }

            .info h4 {
                /* 转换为行内块元素使他和加钱保持在同一行 */
                display: inline-block;
                font-weight: 400;

            }

            .info {
                font-size: 14px;
                margin-top: 28px;
                padding: 0 28px;
            }

            .info span {
                color: orange;
            }

            .info em {
                /* 将倾斜的em标签转为正常的 */
                font-style: normal;
                color: gray;
                /* margin-left: 2px;
                margin-right: 7px; */
                margin: 0 7px 0 15px;
            }

            .info h4 a {
                text-decoration: none;
                color: #333;
            }
        </style><br>
        <hr>

        <!-- 快报模块| -->
        <div class="kuaibao">
            <h3>品品品快报</h3>
            <ul>
                <li><a href="#">文字文字1</a></li>
                <li><a href="#">文字文字2</a></li>
                <li><a href="#">文字文字3</a></li>
                <li><a href="#">文字文字4</a></li>
                <li><a href="#">文字文字5</a></li>
            </ul>
        </div>
        <style>
            .kuaibao {
                width: 248px;
                height: 163px;
                border: 1px solid #ccc;
                margin: 100px auto;
                background-color: white;
                border-radius: 20px;
                /* 阴影 */
                /* box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3); */


            }

            .kuaibao:hover {
                box-shadow: 10px 10px 10px -4px rgba(187, 255, 255, 0.3);

            }

            .kuaibao h3 {
                height: 32px;
                border-bottom: 1px dotted #ccc;
                font-size: 14px;
                font-weight: 400;
                line-height: 32px;
                padding-left: 15px;
                background-color: rgba(187, 255, 255, 0.3);
                /* 可以写px也可以写百分比，百分比是按照宽度为参考的 */
                /* 可以写四个值，分别是顺时针的四个角 */
                /* 写两个值的话就是对角线 */
                /* border-start-start-radius: 20px; */
                /* border-top-left-radius: 20px; */
                /* border-start-end-radius: 20px; */
                border-radius: 20px 20px 0 0;
                text-shadow: 10px 10px -4px rgba(25, 25, 112, 0.3);
            }

            .kuaibao ul li a {
                font-size: 12px;
                color: #666;
                text-decoration: none;
            }

            .kuaibao ul li {
                /* 去掉li元素前面的小圆点 */
                list-style: none;
                line-height: 23px;
                padding-left: 23px;
            }

            .kuaibao ul {
                margin-top: 7px;
            }

            .kuaibao ul li a:hover {
                text-decoration: underline;
            }

            /* 圆角边框 */
            /* border-radius: 5px; */
            /* 盒子阴影 */
            /* box-shadow:
                h-shadow 必写 水平阴影的位置
                v-shadow 必写 垂直阴影的位置
                blur 可选 模糊距离
                spread 可选 扩散距离，阴影的尺寸
                color 可选 阴影的颜色
                inset 可选 内阴影，阴影会从盒子的边线内部延伸出来，将外部阴影（outset）改为内部阴影
                写法： box-shadow: h-shadow v-shadow blur spread color inset;
            */

            /* 新需求：盒子本身没有阴影，当鼠标经过盒子本身的时候出现阴影效果,使用div：hover */
            /* 文字阴影：
            text-shadow: h-shadow v-shadow blur spread color;
                h-shadow 必写 水平阴影的位置
                v-shadow 必写 垂直阴影的位置
                blur 可选 模糊距离
                spread 可选 扩散距离，阴影的尺寸
                color 可选 阴影的颜色
            */
        </style>
    </body>

    </html>