学习了一些个字体标签,表格的制作和背景的各种样式。
笔记:
了解一下:
菜鸟网:runoob.com
<b></b>加粗 <i></i>斜体 <sup></sup>上标 <sub></sub>下标 <del></del>删除字 <pre></pre>预定义 <var></var>定义变量
<samp></samp>定义计算机代码样本 <abbr title=""></abbr>定义缩写
<address></address>地址,针对搜索引擎 <bdo dir="rtl"></bdo>定义方向rtl:right to left <q></q>定义短的引用语
制作表格:
<table></table>
<tr></tr>设置行,to right
<td></td>设置列,to down
<caption></caption>设置表的名字
colspan 设置占几列
空格表示的,包含关系。逗号表示并列
background-image:url() 背景图片
background-size:调整背景图片大小
实现:
- 表格制作
- <!DOCTYPE html>
- <html>
- <head>
- <title>表格制作</title>
- <style>
- table{
- text-align: center;
- border:10px outset #ffff00;
- /*background-color: green;*/
- background-image: url(../1.jpg);
- }
- </style>
- </head>
- <body>
- <table width="300px" height="300px" border="1px">
- <caption>表</caption><!-- 表的名字 -->
- <thead>
- <tr><!-- 设置行,tr可以理解为to right -->
- <th>lalala</th><!-- th表示表头,head -->
- <td>lalala</td><!-- 设置列,td可以理解为to down-->
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>lslslsls</td>
- <td>lslslsl</td>
- <td>lslslsl</td>
- </tr>
- <tr>
- <td colspan="3">lslslsls</td><!-- colspan设置占几列 -->
- </tr>
- <tr>
- <td rowspan="2">lslslsls</td><!--rowspan设置占几行 -->
- <td>lslslsl</td>
- <td>lslslsl</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
2.背景的设置
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
background-image: url(../1.jpg);
border:2px blue;
background-repeat:no-repeat;/*repea-y是y轴重复,no-repeat就是不重复,repeat-x是x轴重复,默认是repeat*/
width: 1000px;
height: 1000px;
background-size: 1000px 1000px;/*调整背景图片大小*/
background-position: 100px 200px;/*调整背景图片位置,前面为横向移动距离,后面为纵向移动距离,了两个数值都可以是负值*/
}
</style>
</head>
<body>
<div>试试试</div>
</body>
</html>