html学习----标签（二）
2018-04-16 本文已影响0人
这个姑凉儿
标签
此篇所记标签
-
 空格占位符 -
table：tr代表列,td代表行，th代表表头,cellpadding表格左右间距 、cellspacing表格上下间距，colspan跨列,rowspan跨行 -
ul:无序列表 (style="list-style-type:disc"圆点列表,style="list-style-type:circle"圆圈列表,style="list-style-type:square"正方形列表) -
ol:有序列表(type="A"大写字母列表,type="a"小写字母列表,type="I"罗马数字列表,type="i"小写罗马数字列表) -
li：定义列表项 -
dl:定义列表 -
dt：自定义列表项目 -
dd: 定义自列表项的描述
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web学习</title>
<link rel="stylesheet" href="text.css"> <!-- 引用外部的css -->
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" class="biaoti" height="60">统计表</td>
</tr>
<tr>
<td align="right" height="25">2018-04-16---2018-05-02</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="tabtop13" bgcolor="#cccccc">
<tr>
<td rowspan="2" class="btbg font-center titfont">姓名</td>
<td rowspan="2" class="btbg font-center titfont">年龄</td>
<td colspan="2" class="btbg font-center titfont">爱好</td>
<td colspan="3" class="btbg font-center titfont">身体指标</td>
</tr>
<tr>
<td class="btbg font-center titfont">游泳</td>
<td class="btbg font-center titfont">绘画</td>
<td class="btbg font-center titfont">体重</td>
<td class="btbg font-center titfont">身高</td>
<td class="btbg font-center titfont">心率</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg font-center titfont">合计</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
.tabtop13 {
margin-top: 13px; /*margin-top 属性设置元素的上外边距*/
}
.tabtop13 td{
background-color:#ffffff;
height:25px;
line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.biaoti{
font-family: 微软雅黑;
font-size: 26px;
font-weight: bold;
border-bottom:1px dashed #CCCCCC;
color: #255e95;
}
.titfont {
font-family: 微软雅黑;
font-size: 16px;
font-weight: bold;
color: #255e95;
background: url(../images/ico3.gif) no-repeat 15px center;
background-color:#e9faff;
}
//无序列表
<ul>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ul>
//有序列表
<ol type="A">
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
