摘要：总结：CSS让HTML页面更加美观，更加具有层次感案例：<!DOCTYPE html><html><head> <title>作业</title></head><style type="text/css" media="screen"> table{border: 1px p
总结：
CSS让HTML页面更加美观，更加具有层次感
案例：
<!DOCTYPE html>
<html>
<head>
<title>作业</title>
</head>
<style type="text/css" media="screen">
table{border: 1px pink solid;
border-radius: 10px;
padding: 10px;
margin: auto;
box-shadow: 10px 10px 5px #ccc;
}
tr{text-align: center;}
td{border: 1px #099 solid;
padding: 5px;
border-radius: 3px;
}
h2{margin: -10px 20px 0 20px;}
input{text-align: center;
height: 30px;
width: 150px;
margin: 5px 0 5px 0;
}
button{background: #0c6;
border: 0;
width: 200px;
height: 30px;
}
a{text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
a:hover{color: blue;}
</style>
<body>
<form action="www.baidu.com" method="post" id="f1">
<table>
<tr>
<th colspan="2"><h2>作业</h2></th>
</tr>
<tr>
<td><input type="text" name="un" value="" placeholder="请输入用户名"></td>
<td><input type="password" name="pwd" value="" placeholder="请输入密码"></td>
</tr>
<tr>
<td>
<ol>
<li>左侧列表</li>
<li>左侧列表项</li>
</ol>
</td>
<td>
<ul>
<li>右侧列表</li>
<li>右侧列表项</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2"><button><a href="www.baidu.com">跳转</a></button></td>
</tr>
</table>
</form>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-19 16:51:25
老师总结：页面中内容添加上边框, 不仅可以有效的区隔出内容区块, 还能提升用户的体验
