利用HTML制作奥运五环居中

最新推荐文章于 2021-11-15 22:32:29 发布

info_foo

最新推荐文章于 2021-11-15 22:32:29 发布

阅读量512

点赞数

分类专栏： # HTML CSS JS 小练习

本文链接：https://blog.csdn.net/weixin_45935720/article/details/105582481

版权

HTML CSS JS 小练习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

奥运五环固定垂直居中步骤：

1. 初始化
1. 固定定位与绝对定位
1. 居中点外边距调整

<!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;
            /* border: 2px solid; */
            top: 50%;
            left: 50%;
            /* 清楚上面定位的点是整个框的左上角 */
            margin-left: -320px;
            margin-top: -150px;
        }
        .item1,.item2,.item3,.item4,.item5{
            width: 200px;
            height: 200px;
            border: 10px solid;
            border-radius: 50%;
            position: absolute;
            box-sizing: border-box;
        }
        .item1{
            border-color: red;
        }
        .item2{
            left: 220px;
            border-color: green;
            z-index: 5;
        }
        .item3{
            left: 440px;
            border-color: yellow;
        } 
        .item4{
            left: 110px;
            top: 100px;
            border-color: blue;
        }
        .item5{
            left: 330px;
            top: 100px;
            border-color: purple;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>
        <div class="item5"></div>
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error repellat harum accusamus, itaque quasi architecto suscipit maxime, obcaecati vel consequatur laboriosam ea recusandae voluptatibus? Neque quaerat quasi commodi? Praesentium aspernatur, corporis hic, nihil magni assumenda commodi eaque blanditiis cumque nam quos est totam dolor pariatur eligendi facere modi quia perspiciatis unde necessitatibus illo labore. Pariatur veritatis obcaecati eius, neque ab, repellendus impedit quos dolore quod laudantium soluta voluptatem voluptatum dignissimos aspernatur velit exercitationem voluptas recusandae ad libero adipisci numquam asperiores quasi quia. Accusamus magni molestias eum at neque cum libero porro nihil? Ipsam ab, iusto optio perspiciatis natus autem dolor impedit harum ad ratione totam inventore maxime, eveniet minima. Quae dignissimos libero deserunt culpa quibusdam similique, voluptatibus distinctio sequi. Tempore, deleniti quisquam. Vero odit consequuntur voluptates laborum ipsam necessitatibus, similique vitae iure dolorem itaque perferendis debitis eligendi dolores sint pariatur earum quo qui, odio quas facilis, ipsa assumenda illum magni! Unde saepe placeat, officia expedita soluta distinctio doloremque error eos corporis doloribus? Temporibus aperiam sit earum hic, facilis illo vel numquam explicabo dignissimos! Temporibus, dignissimos accusantium. Explicabo sapiente at architecto corporis suscipit ut modi magnam sint numquam! Autem incidunt ea ipsa voluptatum? Recusandae quidem cumque, consequuntur numquam qui nisi! Consequatur at cupiditate reiciendis ab, possimus odit magnam temporibus nemo velit quia! Saepe facere laborum consequuntur tenetur, esse perferendis consequatur quos laudantium deserunt dicta? Id nemo culpa recusandae libero atque animi aliquam sunt ad obcaecati sint autem repudiandae ab omnis dolorem, est nihil nisi alias tenetur unde eius quis nesciunt! Distinctio saepe et fugit voluptate, maxime molestiae labore est voluptatem, quo possimus aliquid veniam. Dolorum totam esse dolorem fugit id? Ad tenetur nostrum dolor eum obcaecati perferendis totam voluptas dolorum porro nemo? Repellendus eum facilis nisi odio totam similique unde iste aliquid, magnam voluptatibus facere, reprehenderit porro pariatur necessitatibus doloremque architecto delectus blanditiis? Nemo necessitatibus quam dolore eos impedit itaque error animi officiis! Fugiat, cumque in. Similique quod esse minima officia non. Velit repellendus soluta quod minus, doloribus a reiciendis nesciunt mollitia, recusandae provident ad cumque in ipsa hic ex blanditiis praesentium aliquid atque facilis quidem iusto voluptatem. Aperiam iste ipsum veritatis suscipit illo laudantium eum quas possimus sint. Praesentium ab molestias ipsa eveniet saepe et molestiae accusamus dolores. Mollitia ratione architecto itaque alias saepe doloribus officiis impedit vel magni, rem a autem excepturi delectus quod blanditiis qui nam similique suscipit tempore veritatis sint! Reiciendis non architecto ad molestiae, qui repudiandae error, numquam ipsa assumenda cum voluptate temporibus quas labore vitae. Quo, fugiat autem, accusantium magnam nesciunt harum similique vitae consequuntur hic repellat ipsa voluptatibus. Aliquid cupiditate suscipit ipsa facere molestiae, sint explicabo corporis commodi doloremque nesciunt. Consequatur corporis similique distinctio magni quae porro eum, doloribus quibusdam, iusto, ut sequi. Cupiditate, ipsum fugit hic molestiae corrupti nulla consequatur unde fuga? Harum ullam mollitia ducimus facere earum suscipit quas nobis, ut molestiae? Autem sapiente repellendus vel cupiditate similique, alias culpa nihil quasi nam voluptatibus fuga numquam iusto asperiores reiciendis deserunt quo corrupti sit quae veniam iste, ipsam atque? Accusamus quo repellat veritatis ducimus rerum aperiam et molestias ullam corporis, incidunt, sint veniam iusto quisquam nobis hic consectetur inventore officiis delectus animi odio amet in cumque quibusdam numquam! Nostrum aspernatur officiis quam odit velit dolore harum corporis recusandae necessitatibus cupiditate. Neque, nam sequi. Sed illum nisi optio ipsam natus, expedita reprehenderit similique officiis quo quibusdam fugit eaque error sapiente nemo quasi tempore laborum labore quod nihil consequatur voluptatem iure exercitationem odit veniam. Natus vitae ea quod voluptatum voluptas, dolore ullam expedita fugiat veniam eius, doloremque pariatur possimus consectetur autem accusamus reprehenderit atque saepe perspiciatis debitis esse sapiente! Molestiae accusamus, voluptas eaque incidunt recusandae voluptate delectus provident! Molestias modi illum totam iusto eius? Aliquam earum doloremque sequi tempore incidunt voluptas qui nulla a id, aut maxime itaque obcaecati labore architecto soluta at recusandae cum doloribus, odit iusto! Eos, exercitationem itaque laudantium dolore distinctio nam! Provident, quia quod ea id quasi recusandae quos totam, tempora voluptatum error dolore, suscipit corporis perferendis commodi? Repellat cumque, esse suscipit explicabo ipsum amet voluptatum numquam repudiandae voluptatem voluptates a quae incidunt qui quo inventore, quas ut! Doloribus amet non eveniet ipsum suscipit sint, sequi culpa et ab debitis iure nam optio quidem consequatur deleniti autem voluptas laborum laboriosam magnam unde! Consequuntur, molestiae quo autem enim rerum eum corporis, unde nemo ab voluptatem omnis accusantium, dolore quibusdam nulla vero voluptatibus. Commodi accusamus quas sed pariatur. Omnis, esse voluptates harum excepturi ullam, rerum explicabo quasi expedita cum nam sit accusamus quo aut tenetur reprehenderit libero laborum sint hic. Pariatur, accusantium in beatae quae labore accusamus? Esse praesentium dolore placeat vitae accusantium expedita id sunt ad dolorem quibusdam sit sapiente optio iusto, alias qui, distinctio ullam libero eum? Unde eaque similique libero nobis, adipisci laudantium hic corporis ipsum excepturi ipsa fugit omnis aperiam nesciunt dolores quam, magnam odit, qui consequatur praesentium voluptates? Voluptates neque dolore, voluptas velit fugit doloremque et tenetur tempora nulla repellat voluptatibus magni sapiente ab culpa necessitatibus deserunt a laborum sed quaerat consequatur quidem facere molestiae? Adipisci autem praesentium, odit placeat soluta ullam laudantium ipsa qui, temporibus doloremque beatae! Nam similique dicta facilis optio id quam quidem quia laudantium excepturi laboriosam perspiciatis, beatae nesciunt recusandae. Facilis quo a illo sunt nihil hic neque. Magnam nisi natus ullam maxime consequatur, consectetur itaque deleniti quo, ut quibusdam expedita et non. Possimus unde incidunt consequatur nihil debitis voluptate necessitatibus sed magnam ipsa, dolor quaerat laborum labore excepturi nemo repellat esse eaque quam aperiam? Obcaecati nisi deleniti et minus, quaerat omnis quam qui nesciunt? Voluptas itaque in incidunt quidem, ratione labore neque iste maxime non rem, dolor eum? Natus ipsam maxime culpa repellat voluptas adipisci vero aliquam animi consectetur dignissimos, perferendis distinctio ratione alias nemo provident pariatur doloribus mollitia et sit. Voluptatibus necessitatibus voluptatum, amet porro saepe similique incidunt pariatur deleniti eius totam dolor sit odit impedit, neque quod sequi magnam nulla a qui non nemo. Nam praesentium temporibus eaque magni nisi adipisci commodi veniam quod dolor asperiores, in similique vero earum iusto accusamus quia non id cumque! Reprehenderit, consectetur? Iure, provident corrupti.</div>
</body>
</html>

奥运五环当前页面居中

1. 初始化
1. 相对定位与绝对定位
1. 居中点外边距调整

<!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; */
            position: relative;
            width: 640px;
            height: 300px;
            /* border: 2px solid; */
            top: 50%;
            left: 50%;
            /* 清楚上面定位的点是整个框的左下角 */
            /* 可能是浏览器的自适应问题，这里改变上外边距为正 */
            margin-left: -320px;
            margin-top: 150px;
        }
        .item1,.item2,.item3,.item4,.item5{
            width: 200px;
            height: 200px;
            border: 10px solid;
            border-radius: 50%;
            position: absolute;
            box-sizing: border-box;
        }
        .item1{
            border-color: red;
        }
        .item2{
            left: 220px;
            border-color: green;
            z-index: 5;
        }
        .item3{
            left: 440px;
            border-color: yellow;
        } 
        .item4{
            left: 110px;
            top: 100px;
            border-color: blue;
        }
        .item5{
            left: 330px;
            top: 100px;
            border-color: purple;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>
        <div class="item5"></div>
    </div>
</body>
</html>

info_foo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用HTML制作奥运五环居中

奥运五环固定垂直居中步骤：初始化固定定位与绝对定位居中点外边距调整<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
复制链接

扫一扫