• position属性练习：画一个爱心送给你。

    刚刚自学到position属性这一章，似乎除了模仿练习导航栏，我还能干一些，别的“坏事”。嘿嘿… …
    目标效果：
    1-1
    八月五号，巧妙的避开了七夕节。早知道，就不偷懒了，早一点学到的话… …

    嗨！现在让我们一起走进–人心。1-2
    纳尼~~~
    在没有加入定位修饰。我们可以得到以上效果。方与圆，圆与方，不管是外圆内方，还是内圆外方。这就是-人心吗？

    补充：画出圆形的三个条件。
    1.宽和高的大小要相等。
    2.使用border的圆角属性，属性值设置为百分之五十。例如：border-radius:50%;
    3.添加边框，可以得到圆形，只添加背景颜色，就可以得到实心圆。
    代码演示：
    还是先看效果
    chrome浏览器-显示效果：
    在这里插入图片描述

    HTML代码：

    <body>
    <div class="box">div>
body>

    • 1
    • 2
    • 3

    CSS代码：

     .box{
            width:100px;
            height:100px;
            border-radius:50%;
            background-color:orange;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    现在我们可以画出实心圆了。也就说，实现第二张图片效果也就不是问题。剩下的就是解决定位这个难关。
    思路：
    1.将两个实心圆并行排列，并相互重叠一部分。
    2.将下面的实心正方形顺时针旋转45度。
    3.把旋转后的正方形，移到两个圆的中间。
    没有具体数据，可以具体情况，具体微调。直到获得自己想要的效果。
    代码演示
    HTML代码：

    <body>
    <div class="box">
        <div class="left">div>
        <div class="right">div>
        <div class="bottom">div>
        <span>何止七夕<br>但愿朝夕。span>
    div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    CSS代码：

     /* 清除所有标签的内外边距 */
        *{
            margin:0;
            padding:0;
        }
         /* 设置body背景颜色为黑色 */
        body{
            background-color:black;
        }
         /* 设置外层盒子样式 */
        .box{
            width:500px;
            height:500px;
            margin:150px auto;
            position:relative; /* 进行相对定位 */
        }
         /* 画出左右两个圆 */
        .left,.right{
            width:200px;
            height:200px;
            background-color:red;
            border-radius:50%;
        }
         /* 调整右边圆的的位置 */
        .right{
            position:absolute; /* 相对于父元素的绝对定位 */
            top:0px;
            left:140px;
        }
         /* 调整下面的正方形*/
        .bottom{
            width:200px;
            height:200px;
            background-color:rgb(255, 0, 0);
            transform:rotate(45deg); /* 顺时针旋转45度 */
            position:absolute;
            top:70px;
            left:70px;
            border-radius:0 0 30px 0; /* 调整正方形最下面角的弧度 */
        }
         /* 通过定位是文字显示在爱心上 */
        span{
            color:white;
            position:absolute;
            top:80px;
            left:100px;
             /* 调整字体样式 */
            font-size:30px;
            font-weight:bold;
            font-family: 宋体;
            line-height:50px;
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    当然了，文字也是通过定位实现的。

  • 相关阅读:
    Semaphore学习
    Python金融领域人工智能教程
    C++ MAC获取所有进程和当前进程的CPU使用率
    内网穿透的应用-不再依赖iCloud！利用群晖生态，自己掌控本地SSD的云存储！
    kubernetesr进阶--污点和容忍之概述
    阿里云服务器ECS共享型和企业级是什么？
    blender Eevee渲染器
    Java值传递和引用传递
    npm、yarn、pnpm 最新国内镜像源设置和常见问题解决
    用springboot改写传智健康项目问题
  • 原文地址：https://blog.csdn.net/qq_40924992/article/details/126186877