摘要:HTML综合练习<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="style.c
HTML综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="myjavascript.js"></script>
<style>
.dh {
width: 100%; height: 50px;
background-color: skyblue;
}
ul li {
list-style: none;
width: 100px; height: 50px;
border-radius: 4px;
text-align: center;
line-height: 50px;
float: left;
}
.form {
width: 200px; height: 300px;
background-color: lightblue;
margin:50px auto;
border: 1px solid #ccc;
}
input {
width: 128px; height: 40px;
padding-left: 20px;
line-height: 40px;
margin-top: 20px;
margin-left:25px;
}
button {
width: 150px; height: 40px;
margin-top: 20px;
margin-left: 25px;
background: #ff6500;
border: none;
color: #fff;
}
table {
width:500px;
border: 1px solid #ccc;
border-collapse: collapse;
}
tr th,tr td {
height: 50px;
border: 1px solid #ccc;
text-align:center;
}
tr th {
background-color:lightcyan;
}
</style>
</head>
<body>
<div class="dh">
<ul>
<li><a href="">首页</a></li>
<li><a href="">产品中心</a></li>
<li><a href="">技术支持</a></li>
<li><a href="">关于我们</a></li>
</ul>
</div>
<div class="form">
<form action="">
<input type="text" name="username" placeholder="请输入用户名"><br>
<input type="password" name="pwd" placeholder="请输入密码"><br>
<button>登录</button>
</form>
</div>
<table>
<caption>学生成绩单</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>班级</th>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>1班</td>
<td>语文</td>
<td>86</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>1班</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>1班</td>
<td>语文</td>
<td>92</td>
</tr>
</tbody>
</table>
</body>
</html>
批改老师:天蓬老师批改时间:2019-01-27 14:06:38
老师总结:表格推荐写完整, 加上<tbody>