1.背景
<head>
<meta charset="UTF-8">
<title>背景</title>
<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>
<meta charset="UTF-8">
<title>文本</title>
<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>
<meta charset="UTF-8">
<title>列表</title>
<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>
