12_CSS3简单入门——列表与表格

这一次简单介绍下CSS3列表和表格样式的设置

 

Part1 CSS列表

CSS列表属性允许你放置、改变列表标志,或者将图像作为列表项标志,常用列表样式属性如下:

属性 描述
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标志位置
list-style-type 列表类型

详细说明可查看https://www.w3school.com.cn/css/css_list.asp

直接上代码:

 1 <!DOCTYPE html> 
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>css3列表</title>
 6         <style>
 7             #liebiao1{
 8                 list-style-image: url("D://Web/从入门到精通/photo/7.jpg");  /* 列表项图像 */
 9                 list-style-position: outside;   /* 列表标志位置 */
10             }
11             #liebiao2{
12                 list-style-image: url("D://Web/从入门到精通/photo/7.jpg");
13                 list-style-position: inside;    /* 列表标志位置 */
14             }
15             #liebiao3{
16                 list-style: inside square;  /* 排序:正方形;这种方式(list-style是简写列表项)*/
17             }
18             #liebiao4{
19                 list-style-type: decimal;   /* 排序:1、2、3、4 */
20             }
21         </style>
22     </head>
23     <body>
24         <p>列表:效果1</p>
25         <ul id="liebiao1">
26             <li>windows</li>
27             <li>mac</li>
28             <li>linux</li>
29         </ul>
30         <p>列表:效果2</p>
31         <ul id="liebiao2">
32             <li>windows</li>
33             <li>mac</li>
34             <li>linux</li>
35         </ul>
36         <p>列表:效果3</p>
37         <ul id="liebiao3">
38             <li>windows</li>
39             <li>mac</li>
40             <li>linux</li>
41         </ul>
42         <p>列表:效果4</p>
43         <ul id="liebiao4">
44             <li>windows</li>
45             <li>mac</li>
46             <li>linux</li>
47         </ul>
48     </body>
49 </html>

效果

12_CSS3简单入门——列表与表格

 

 从上图容易看出:效果1和效果2的标志都是那个黄色的logo(载入的图片,区别是标志的位置不同)

inside是有缩进的,outside的缩进没有inside缩进大

效果3主要是体现list-style的使用,具体说明如下

list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。

效果4主要是体现list-style-type的使用,设置列表类型,suqare是方块标志,circle是圆点标志,decimal是数字排序

 

Part2 CSS表格

CSS表格属性可以帮助我们极大的改善表格的外观

比如:表格边框的设置,折叠边框的设置,表格宽高设置,表格文本对齐设置,表格内外边距设置,表格颜色设置等

先上一波代码

 1 <!DOCTYPE html> 
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>css3表格</title>
 6         <style>
 7             #tb{
 8                 border-collapse: collapse;      /* 去除掉table边框,把原来的双边框变成单边框 */
 9             }
10             td,th{                              /* 统一设置设置单元格 */
11                 border: 1px solid blue;       /* 表格边框 */
12                 /* text-align: center; */             /* 对齐方式 */
13                 padding: 5px;                   /* 内边距 */
14                 width: 100px;                   /* 单元格的宽 */
15                 height: 30px;                   /* 单元格的高 */
16             }
17             tr td{                              /* 设置奇数行单元格 */
18                 background-color: antiquewhite;     /* 背景色 */
19                 color: black;                       /* 字体色 */
20             }
21             tr.ou td{                           /* 设置偶数行单元格 */
22                 background-color: aquamarine;
23                 color: black;
24             }
25             #th{                                /* 设置表头单元格 */
26                 background-color: mediumaquamarine;
27                 color: black;
28             }
29         </style>
30     </head>
31     <body>
32         <table id="tb">
33             <tr>
34                 <th>项目1</th>
35                 <th>项目2</th>
36                 <th>项目3</th>
37             </tr>
38             <tr class="ou">
39                 <td>html5</td>
40                 <td>css3</td>
41                 <td>javascript</td>
42             </tr>
43             <tr>
44                 <td>python</td>
45                 <td>Java</td>
46                 <td>php</td>
47             </tr>
48             <tr class="ou">
49                 <td>STC89C51</td>
50                 <td>STM32</td>
51                 <td>Arduino</td>
52             </tr>
53             <tr>
54                 <td>Altium Designer</td>
55                 <td>protuce7</td>
56                 <td>Multisim</td>
57             </tr>
58         </table>
59     </body>
60 </html>

具体就不多做说明了,因为也不难,看上面注释都能看懂,看不懂再自己去调试,应该能看得懂的

具体效果如下:

12_CSS3简单入门——列表与表格

 

 其实还有很多功能的,操作起来也是挺简单的,可具体参考 https://www.w3school.com.cn/css/css_table.asp

 

总结

内容介绍的不多,直接复制代码去看效果就行,当然自己改改代码,美化表格和列表设计,加深下印象

后面讲到导航栏设计时,列表可以整成导航栏,也是用处很大的一个东西

最后希望这篇简单的随笔能对你们有所帮助吧(= ̄ω ̄=)

没用就当看着玩啦[狗头]

 

12_CSS3简单入门——列表与表格

上一篇:关于Mesos和Kubernetes的区别


下一篇:Spring征服数据库