css中定位标签的使用

最新推荐文章于 2024-04-03 04:38:30 发布

夏都不等只等你

最新推荐文章于 2024-04-03 04:38:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_40914529/article/details/88044667

css 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了CSS样式中的定位问题，包括绝对定位和相对定位的使用困惑，以及在实现设计图中特定元素（如黑色和白色原点）时遇到的挑战，同时提出了在尺寸设计上与原图存在差距的疑问，寻求解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学了css样式中的定位标签，但是听的不是太懂。找了一幅图做了个对比图。欢迎各位大佬指点！！
这是原图
在这里插入图片描述
这是我自己做的效果图

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{padding: 0px;margin: 0px;}
            body{background: #000;}
            .box{width: 974px;height: 360px;background: url(img/04.png);margin: auto;border: 5px #fff solid;position: relative;}
            .box1{width: 24px;height: 48px;background: #000;position: absolute;top:155px;left: 4px;color: #fff;font-size: 24px;text-align: center;line-height: 48px;font-family: "微软雅黑"; }
            .box2{width: 24px;height: 48px;background: #000;position: absolute;top:155px;right:0px;float:right;color: #fff;font-size: 24px;text-align: center;line-height: 48px;font-family: "微软雅黑";}
            .box3{width: 320px;height: 160px;position: absolute;left: 80px;top: 95px;}
            h3{color: #000;font-family: "幼圆";font-size: 36px;font-weight:bolder;}
            p{color: #000;font-size: 18px;font-family: "幼圆";margin-top: 10px;font-weight:bolder;}
            .box4{ color: #fff;;width:121px;height: 41px;text-align: center;line-height: 41px;position: absolute;background: #000000;left: 80px;bottom: 100px;}
            .box5{width: 48px;height: 18px;position: absolute;left: 80px;background: #000;bottom: 18px;color: #fff;text-align: center;line-height: 18px;font-size: 12px;border: 1px #8c8c8c solid;}
            .box6{width: 48px;height: 18px;position: absolute;left: 132px;background: #fff;bottom: 18px;color: #000;text-align: center;line-height: 18px;font-size: 12px;border: 1px #000 solid;}
            .box7{ width: 6px;height: 6px;border-radius: 6px;position: absolute;right: 479px;bottom: 26px;background: #000;}
            .box8{ width: 6px;height: 6px;border-radius: 6px;position: absolute;right: 468px;bottom: 26px;background: #fff;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"><</div>
            <div class="box2">></div>
            <div class="box3"><h3>365 天的可能性</h3><p>借助 Office 365 充分发挥新设备的潜力</p></div>
            <div class="box4">立即购买 ></div>
            <div class="box6">▶</div>
            <div class="box5">||</div>
            <div class="box7"></div>
            <div class="box8"></div>
        </div>
    </body>
</html>

在这段代码中遇到了几个问题：
1.关于绝对定位和相对定位的使用
在这段代码中我把大背景使用了背景图，但是在盒子定位时对absolute和relative使用的位置不清楚，不知道什么时候该用什么。
2.图片中下部黑色原点和白色的原点的设计
黑色原点还是有设计思路可以做出来，但是效果图中的白色中空圆点试了多次都没有做出来，望大佬给给建议。
3.关于设计中尺寸
使用ps量取效果图尺寸再设计，总感觉差那么一点，这是因为什么？