2022年7月29日（盒子模型、CSS浮动）

今天一定要早睡

已于 2022-08-02 17:39:53 修改

阅读量176

点赞数

分类专栏：前端笔记文章标签： html 前端 css

于 2022-07-30 23:14:44 首次发布

本文链接：https://blog.csdn.net/qq_44659171/article/details/126062739

版权

二、盒子模型

2.3 综合案例

（3）案例——快报模块列表

新知识点：去掉ul li前面的项目符号

list-style: none;

代码实现：

<!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>品优购快报模块</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: rgb(222, 215, 215);
        }

        .box {
            /* 最终实际盒子大小要算上边框的宽度 */
            width: 248px;
            height: 163px;
            border: 2px solid #ccc;
            /* 块级盒子 水平页面居中（要有width）  上下随便  左右auto*/
            margin: 100px auto;
        }

        .box h3 {
            /* 整个h3的高度（不包括边框） */
            height: 32px;
            /* 取消标题加粗 */
            font-weight: 400px;
            /* 设置下边框为虚线 */
            border-bottom: 2px dotted #b0b0b0;
            /* 标题字号大小 */
            font-size: 14px;
            /* 文字垂直居中:行高 = 盒子的高度 */
            line-height: 32px;
            /* 设置距离左侧的内边框 */
            /* 如果用margin外边框: 就会出现 h3整个盒子 带着虚线框 右移了 */
            /* 此时的padding不会撑开盒子，因为没有写width属性 */
            padding-left: 15px;
        }

        .box ul li a {
            /* 链接颜色、文字大小 */
            color: #666;
            font-size: 12px;
            /* 取消下划线 */
            text-decoration: none;
        }

        .box ul li a:hover {
            /* 给链接添加 鼠标经过特效 */
            color: palevioletred;
            font-weight: 700;
            text-decoration: underline;
        }

        li {
            /* 新知识点： 去掉li的项目符号（小圆点） */
            list-style: none;
            /* 每一个li的高度  */
        }

        .box ul li {
            /* 行高=盒子高 ：  文字可以垂直居中 */
            height: 23px;
            line-height: 23px;
        }

        /* 此时的ul 和li 的内外边距都是0，可以随便设置哪种边距 */
        .box ul {
            padding-left: 20px;
            /* 上边框的距离设置ul更合适，设置li的话每个边框距离都会改变 而我们只需要最上面的一个边距 */
            padding-top: 6px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <!-- ul>li*5>a tab -->
        <!--  shift alt 鼠标拖住 往下拉 再输入# -->
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好利地址5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000！</a></li>
        </ul>
    </div>
</body>

</html>

效果：

2.4 圆角边框

语法：

border radius: 10px;   
/*  数值越大，弧度越大  */

radius半径（圆的半径）的原理：椭圆与边框的交集形成圆角效果

注 :

练习代码：

<!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>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半  等价于 100px */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            /* 可以跟四个值分别代表（顺时针） 左上角 右上角 右下角 左下角 */
            /* border-radius: 10px 20px 30px 40px; */
            /* 两个数值的，代表对角线的是一对 */
            /* border-radius: 10px 40px; */
            /* 只改一个角： 左上角 */
            border-top-left-radius: 20px;
            background-color: pink;
        }
    </style>
</head>

<body>
    1. 圆形的做法:
    <div class="yuanxing"></div>
    2. 圆角矩形的做法:
    <div class="juxing"></div>
    3. 可以设置不同的圆角:
    <div class="radius"></div>
</body>

</html>

效果图：

2.5 盒子阴影

使用场景：

当鼠标经过时，可以为盒子设置阴影。（所有的盒子都可以用：hover，不止是a）

语法：

练习代码：

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 10px 10px; */
        }

        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }

        /* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果：

2.6 文字阴影

练习代码：

<!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>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>
        你是阴影,我是火影
    </div>
</body>

</html>

效果：