前端学习（四）

qwertykln

于 2016-04-25 16:03:14 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qwertykln/article/details/51242968

前端专栏收录该内容

6 篇文章

订阅专栏

本文探讨了一个HTML/CSS布局问题，即当浏览器窗口缩小时，页面宽度无法低于400px的情况。通过具体的代码示例，展示了如何创建一个固定大小的背景框，并在其中放置两个黄色圆形元素。

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

这里写图片描述

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task1_4_1</title>
    <style type="text/css">
    .bg{
        height: 200px;
        width: 400px;
        position: absolute;
        left:50%;
        top:50%;
        margin-top: -100px;
        margin-left: -200px;
        background-color: #ccc;
    }
    #lcircle{
        position: relative;
        width: 50px;
        height: 50px;
        border-bottom-right-radius: 50px;
        background-color: yellow;
    }
    #rcircle{
        position: relative;
        width: 50px;
        height: 50px;
        border-top-left-radius: 50px;
        bottom:-100px;
        left:350px;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="bg">
        <div id="lcircle"></div>
        <div id="rcircle"></div>
    </div>
</body>
</html>