CSS 盒子模型练习

nulidewo10

已于 2023-11-06 17:47:48 修改

阅读量87

点赞数

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

于 2023-11-06 17:47:07 首次发布

本文链接：https://blog.csdn.net/m0_71571499/article/details/134251519

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现东京奥运会奖牌榜设计

<!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;
        }
        div{
            border: 1px solid rgb(161, 210, 254)  ;
            text-align: center;
            width:400px;
            margin:100px;
        }
        ul{
            list-style: none;
        }
        li{
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 10px; 
            border-bottom: 1px solid rgb(161, 210, 254); 
        }
        li p{
            width: 25%; 
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <p style="background-color: rgb(161, 210, 254);line-height: 50px;">东京奥运会金牌榜</p>
        <ul>
            <li style="background-color: rgb(209,232,245);">
                <p>排名</p>
                <p>国家</p>
                <p>金牌</p>
                <p>银牌</p>
                <p>铜牌</p>
                <p>总计</p>
            </li>
            <li>
                <p>1</p>
                <p>中国</p>
                <p>17</p>
                <p>9</p>
                <p>4</p>
                <p>30</p>
            </li>
            <li>
                <p>2</p>
                <p>美国</p>
                <p>12</p>
                <p>8</p>
                <p>9</p>
                <p>29</p>
            </li>
            <li>
                <p>3</p>
                <p>韩国</p>
                <p>6</p>
                <p>2</p>
                <p>4</p>
                <p>12</p>
            </li>
            <li>
                <p>4</p>
                <p>法国</p>
                <p>5</p>
                <p>3</p>
                <p>5</p>
                <p>13</p>
            </li>
            <li>
                <p>5</p>
                <p>朝鲜</p>
                <p>4</p>
                <p>0</p>
                <p>1</p>
                <p>5</p>
            </li>
        </ul>
    </div>
</body>
</html>