HTML综合练习

原创 2019-01-28 23:15:24 384
摘要: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>

发布手记

热门词条