盒模型--display:inline/inline-block

要求实现如下案例：

index.html

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4         <meta charset="UTF-8">
 5         <title>案例title>
 6         <link rel="stylesheet" href="./index.css">
 7     head>
 8     
 9     <body>
10       <ul class="head">
11         <li class="head-first">商品分类li>
12         <li class="head-second">天猫双十一li>
13       ul>
14     
15       <ul class="list">
16         <li><a href="#">大牌女装a>li>
17         <li><a href="#">运动户外a>li>
18         <li><a href="#">潮流男装a>li>
19         <li><a href="#">美妆洗护a>li>
20         <li><a href="#">母婴好货a>li>
21         <li><a href="#">数码家电a>li>
22         <li><a href="#">家具建材a>li>
23         <li><a href="#">全球尖货a>li>
24         <li><a href="#">苏宁易购a>li>
25         <li><a href="#">汽车用品a>li>
26       ul>
27     body>
28     
29 
30 html>

index.css

 1 ul,
 2 li {
 3   list-style: none;
 4   padding: 0px;
 5   margin: 0px;
 6 }
 7 /* 浏览器都有自己的默认样式，以上内容用于浏览器默认样式的清除 */
 8 
 9 .head {
10   width: 200px;
11   color: #ffffff;
12   /* 去除空白折叠 */
13   font-size: 0px;
14 }
15 
16 .head li {
17   /* 让两个li处于同一行 */
18   display: inline-block;
19   font-size: 12px;
20   line-height: 36px;
21   width: 100px;
22   text-align: center;
23 }
24 
25 .head .head-first {
26   background-color: #c60a0a;
27 }
28 
29 .head .head-second {
30   background-color: #464444;
31 }
32 
33 .list {
34   width: 200px;
35   box-sizing: border-box;
36   padding-top: 29px;
37   padding-bottom: 14px;
38   background-color: #413f3f;
39 }
40 
41 .list li {
42   margin-bottom: 14px;
43   padding-left: 24px;/*左内边距*/
44   padding-right: 24px;/*右内边距*/
45 }
46 
47 .list li a {
48   /* 让a成为块状元素才能让宽度占据整条li */
49   display: block;
50   border: 1px solid #cb0c10;/*边框粗细为1px,实线*/
51   border-radius: 10px;/*边框倒角*/
52   text-align: center;
53   line-height: 29px;
54   /* a标签比较特殊，设置它的文本样式需要直接选中它 */
55   color: #ffffff;
56   /* 去除a标签的下划线 */
57   text-decoration: none;
58 }

Web前端语言学习

盒模型--display:inline/inline-block

相关

标签