|
|
@@ -0,0 +1,157 @@
|
|
|
+<!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>
|
