HTML/CSS小实验

Justice link

已于 2024-09-22 13:32:25 修改

阅读量59

点赞数

文章标签： html css 前端

于 2023-10-26 16:17:45 首次发布

本文链接：https://blog.csdn.net/2301_78530830/article/details/134058966

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <style type="text/css">
           *{ /--减少排版空格-->
               margin: 0px;
               padding: 0px;
           }
           body{/--设置整体背景颜色-->
               background-color: beige;
           }
           div{
               width: 300px;/--设置排版部分块元素大小,并且居中-->
               height: 350px;
               background-color: white;
               margin: 0px auto;
           }
           div h1{ /--设置标题-->
               line-height: 40px;
               background-color: black;
               color: white;
               padding-left: 20px;/--与右边间隔20像素-->
               font-size: 20px;
               font-family: "宋体";
           }
           div dl dt{/--设置副标题类型,大小和加粗-->
               font-weight: bold;
               line-height: 40px;
           }
           div dl dd{/--设置详细分类-->
               padding-left: 45px;
               color: dimgray;
           }
           div dl{/--设置虚线-->
               border-top: 2px dashed gray;
           }
           div dl span{/--设置标签span类型的类型-->
               display: inline-block;/--行元素转换为块元素-->
               width: 20px;
               height: 20px;
               background-color: gray;
               font-size: 15px;
               text-align: center;/--文本居中-->
               margin-right: 15px;
               margin-left: 10px;
               border-radius: 100px;/--设置圆角形状-->
               line-height: 18px;/--设置行高-->
           }
       </style>
       <div>
           <h1>全部分类</h1>
           <dl>
               <dt><span>1</span>护肤</dt>
               <dd>洁面化妆水喷雾美容液眼霜</dd>
               <dd>眼部精华眼膜面膜面膜贴</dd>
               <dd>水洗面膜免洗面膜精华精油面霜</dd>
               <dd>凝露乳液日霜晚霜</dd>
           </dl>
           <dl>
               <dt><span>2</span>彩妆</dt>
           <dd>卸妆防晒隔离 BB霜粉底粉饼</dd>
           <dd>睫毛膏眼影唇彩腮红眼线笔</dd>
           <dd>底妆遮瑕蜜粉眉笔美甲</dd>
           </dl>
           <dl>
               <dt><span>3</span>香氛</dt>
               <dd>男香女香小Q装中性香水</dd>
           </dl>
           <dl>

           </dl>
       </div>
   </body>
</html>