摘要：<html><head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href=""> <style type="
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
a{
color:blue;
font-size: 20px;
text-indent: 2em;
text-decoration: none;
}
a:hover{color:red;}
ul li{
list-style: none;
height: 40px;
width: 100px;
border: 1px solid #ccc;
margin: 5px 0px;
text-align: center;
line-height: 40px; /* 指定line-height可以让它居中*/
}
ul li:before{
content: url(1.png);
margin-right: 20px;
}
ul li:after{
content: url(1.png);
}
input{
width: 298px;
height: 48px;
border: 1px solid #ccc;
margin-top: 10px;
padding: 10px;
}
button{
width: 300px;
height: 50px;
border: none;
margin-top: 10px;
background: #FF6A00;
color: #ccc;
}
table{
border: 1px solid #ccc;
border-collapse: collapse;
}
tr th{
height: 200px;
width: 100px;
border: 1px solid #ccc;
}
tr td{
height: 200px;
width: 100px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<pre id='top'>123 23x</pre>
<a href="http://www.baidu.com" target="_blank">baidu</a>
<div style="height: 100px; background-color: red;" ></div>
<a href="#top">123</a>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li>123</li>
/*
二次嵌套
*/
<ul>
<li>12</li>
<li>12</li>
<li>12</li>
</ul>
<li>222</li>
<li>222</li>
</ul>
<form method="get" action="">
get传值有最大值<br>
<input type="text" name="username" placeholder="请输入用户名">用户名<br>
<input type="password" name="password" placeholder="请输入密码">密码<br>
<button>登陆</button>
</form>
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="3">合并列</td>
</tr>
<tr>
<td rowspan="2" >合并行</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-13 14:07:50
老师总结：测试的比较全面，刚开始基础课可能会比较枯燥，后面会越来越有趣了……
