lovecoding
/
W250511


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<!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>
        /* css reset */
        body{
            margin: 0;
        }
        li{
            list-style: none; /* 清除列表项前面的圆点 */
        }
        ul{
            margin: 0;
            padding: 0;
        }

        .page-title{
            overflow: hidden; /* 生成 BFC */
            background-color: #44117d;
            color: white;
            text-align: center;
        }
        .page-title p{
            width: 650px;
            margin:0 auto 20px;
        }

        .page-content li{
           width: 500px;
           background-color: #aaa;  
           display: inline-block; /* 使列表项水平排列 */
           margin-bottom: 40px;
           margin-left: 20px;
           margin-right: 20px;
           padding: 20px;
           box-sizing: border-box;
           min-height: 300px;
        }
        .page-content ul{
            width: 1080px;
            font-size: 0;
            margin: 30px auto;
        }
        .list-title img{
            width: 30px;
            /* vertical-align: middle; */
            margin-top: 10px;
        }
       .list-title span{
            font-size: 40px;
            color: #44117d;
            font-weight: bolder;
        }
        .list-title{
            height: 50px;
            line-height: 50px;
        }
        .list-content .content-box{
            border:5px solid #44117d;
            margin: 20px auto;
            width:200px;
            font-size: 25px;
            color: #44117d;
            padding: 10px;
        }
        .list-bottom p{
            font-size: 20px;
        }
        .bc span{
            color: #f6c3cc;
        }
        .bc .content-box{
                background-color: #f6c3cc;
                border:5px solid #f6c3cc;
        }
        .wh .list-title span{
            color: green;
        }
        .wh .content-box{
            border:5px solid green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-title">
            <h1>CSS 属性游乐场</h1>
            <p>
                探索 margin、border、width、height、background-color、color、font-size 和 text-align的神奇效果
            </p>
        </div>
        <div class="page-content">
            <ul>
                <li>
                    <div class="list-title">
                        <img src="./image/arr.png" alt="arr">
                        <span>Margin</span>
                    </div>
                    <div class="list-content">
                        <div class="content-box">
                            我有 margin-5
                        </div>
                    </div>
                    <div class="list-bottom">
                        <p>Margin 控制元素周围的空间，增加或减少它可以改变元素之间的距离。</p>
                    </div>
                </li>
                <li>
                   <div class="list-title bc" >
                        <img src="./image/background-color.png" alt="arr">alt="arr">
                        <span>Background-color</span>
                   </div> 
                   <div class="list-content bc">
                        <div class="content-box">
                            我有背景色
                        </div>
                   </div>
                   <div class="list-bottom">
                    <p>Background Color 设置元素的背景颜色，可以使用颜色名称</p>
                   </div>
                </li>
                <li class="wh">
                    <div class="list-title">
                        <img src="./image/expand.png" alt="arr">
                        <span>Width & Height</span>
                    </div>
                    <div class="list-content">
                        <div class="content-box">
                            我有宽度和高度
                        </div>
                    </div>
                    <div class="list-bottom">
                        <p>Width 和 Height 定义元素的尺</p>
                    </div>
                </li>
                <li>
                    <div class="list-title">
                        <img src="./image/align-center.png" alt="arr">
                        <span>Text Align</span>
                    </div>
                    <div class="list-content">
                        <div class="content-box">
                            我的文本靠右对齐
                        </div>
                    </div>
                    <div class="list-bottom">
                        <p>Text Align 控制文本在元素内的对齐方式，可以是左对齐、居中、右对齐等。</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>