div-ul-li经典布局

最新推荐文章于 2024-05-14 09:58:41 发布

超越～and me

最新推荐文章于 2024-05-14 09:58:41 发布

阅读量990

点赞数 28

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_78986604/article/details/138135553

版权

<!DOCTYPE html>
<html>
<head>
    <title>div-ul-li经典布局</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{
        margin:0;
        padding:0;
         /*去掉所有元素的边距*/
            /*可以去掉ul 中 li 的左边距，使之美观*/
    }
       div{
        width:500px;
        height:400px;
        border:1px solid red;
       }
       ul{
        border:1px solid green;
        width:250px;
        height:250px;
       }
       li{
        border:1px solid violet;
        width:100px;
        height:150px;
       }
    </style>
</head>
<body>
<div id="div-box1">
    <ul class="faceul">
     <li>好好学习！</li>
    </ul>
</div>
</body>
</html>

效果图

<!DOCTYPE html>
<html>
<head>
    <title>div-ul-li经典布局</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{
        margin:0;
       /* padding:0;*/
         /*去掉所有元素的边距*/
            /*可以去掉ul 中 li 的左边距，使之美观*/
    }
       div{
        width:500px;
        height:400px;
        border:1px solid red;
       }
       ul{
        border:1px solid green;
        width:250px;
        height:250px;
       }
       li{
        border:1px solid violet;
        width:100px;
        height:150px;
       }
    </style>
</head>
<body>
<div id="div-box1">
    <ul class="faceul">
     <li>好好学习！</li>
    </ul>
</div>
</body>
</html>

效果图


<!DOCTYPE html>
<html>
<head>
    <title>div-ul-li经典布局</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{
          margin:60px;
       /* padding:0;*/
         /*去掉所有元素的边距*/
            /*可以去掉ul 中 li 的左边距，使之美观*/
    }
       div{
        width:500px;
        height:400px;
        border:1px solid red;
       }
       ul{
        border:1px solid green;
        width:250px;
        height:250px;
       }
       li{
        border:1px solid violet;
        width:100px;
        height:150px;
       }
    </style>
</head>
<body>
<div id="div-box1">
    <ul class="faceul">
     <li>好好学习！</li>
    </ul>
</div>
</body>
</html>

效果图