前端学习（四）

最新推荐文章于 2023-03-30 21:09:09 发布

qwertykln

最新推荐文章于 2023-03-30 21:09:09 发布

阅读量204

点赞数

本文链接：https://blog.csdn.net/qwertykln/article/details/51242968

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写图片描述

我的代码：

<!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>

效果图：
这里写图片描述

问题：无法将浏览器缩小到小于400px

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qwertykln

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习（四）

我的代码：<!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:
复制链接

扫一扫