1.背景
<head> < charset="UTF-8"> < >背景</ > <style> /* 设置背景为图片，并设置大小、是否重复 */ body { background-image: url("imgs/background.jpeg"); background-repeat: no-repeat; background-size: 250px 142px; } /* 设置背景为纯色 */ #p1 { background-color: lightblue; } /* 设置背景为图片 */ #p2 { width: 20px; height: 20px; background-image: url("imgs/citypoint.png"); } /* 设置背景为图片的一部分 */ #p3 { width: 16px; height: 16px; background-image: url("imgs/ui-icons.png"); background-position: -64px -80px; } </style></head><body><p id="p1">这是一个段落内容.</p><p id="p2"></p><p id="p3"></p></body>2.文本
示例
<head> < charset="UTF-8"> < >文本</ > <style> /* 设置文本颜色 */ #p1 { color: lightcoral; } /* 设置文本左对齐 */ #p2 { text-align: left; } /* 设置文本居中对齐 */ #p3 { text-align: center; } /* 设置文本右对齐 */ #p4 { text-align: right; } /* 设置链接样式去掉下划线 */ a { text-decoration: none; } /* 设置文本的缩进 */ #p5 { text-indent: 50px; } </style></head><body><p id="p1">这是一个段落内容.</p><p id="p2">这又是一个段落内容.</p><p id="p3">这又是一个段落内容.</p><p id="p4">这又是一个段落内容.</p><a href="#">这是一个链接</a><p id="p5">这还是一个段落内容.</p></body>
3.列表
<head> < charset="UTF-8"> < >列表</ > <style> /* 设置列表项的预定义样式 */ #u1 { list-style-type: decimal; } /* 设置列表项的图片样式 */ #u2 { list-style-image: url("imgs/mac.png"); } /* 设置列表项水平方向排列 */ #u3 { list-style-type: none; } #u3>li { float: left; display: inline-block; background-color: lightgreen; padding: 5px; } </style></head><body><ul id="u1"> <li>苹果</li> <li>西瓜</li> <li>香蕉</li></ul><ul id="u2"> <li>苹果</li> <li>西瓜</li> <li>香蕉</li></ul><ul id="u3"> <li>苹果</li> <li>西瓜</li> <li>香蕉</li></ul></body>
4.表格
<style> table, th, td { border: 1px solid lightslategray; border-collapse: collapse; } table { width: 80%; margin: 0px auto; } table th { background-color: lightcoral; color: white; } table th, table td { padding: 10px; } .info { background-color: lightgreen; color: white; } </style></head><body><table> <tr> <th>名称</th> <th>职位</th> <th>收入</th> </tr> <tr class="info"> <td>张无忌</td> <td>老板</td> <td>100000</td> </tr> <tr> <td>小昭</td> <td>秘书</td> <td>10000</td> </tr> <tr class="info"> <td>周芷若</td> <td>主管</td> <td>20000</td> </tr></table></body>
继续阅读与本文标签相同的文章
下一篇 :
Java 学习（01）--DOS/环境/常量
-
Java 学习（21）--集合笔试题
2026-05-26栏目： 教程
-
Java 学习（20）--异常 / IO 流
2026-05-26栏目： 教程
-
初识 Vue（07）---(Vue 实例的生命周期钩子)
2026-05-26栏目： 教程
-
初识 Vue（06）---(Vue 实例)
2026-05-26栏目： 教程
-
初识 Vue（05）---(组件间传值)
2026-05-26栏目： 教程