HTML简易奥运五环

最新推荐文章于 2024-01-13 12:31:39 发布

yyy_131

最新推荐文章于 2024-01-13 12:31:39 发布

阅读量2.6k

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/yyy_131/article/details/121338750

版权

1：效果图展示

2：整体五环进行屏幕居中排列，使用盒子模型首先将整体五环放在外层盒子，其次内部选择其中一个环确定它的固定位置，其余四个环根据它确定相对位置。

3：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: fixed;
            width: 640px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-left: -320px;
            margin-top: -150px;
        }
        .item1,.item2,.item3,.item4,.item5{
            width: 200px;
            height: 200px;
            borde

最低0.47元/天解锁文章

yyy_131

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
HTML简易奥运五环

1：效果图展示2：整体五环进行屏幕居中排列，使用盒子模型首先将整体五环放在外层盒子，其次内部选择其中一个环确定它的固定位置，其余四个环根据它确定相对位置。3：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫