如有错误或更好的方法,请评论修改,谢谢!
此次主要学习了html表格的制作及初步接触CSS样式,为表格润色。
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式。CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式,利用它可以实现修改一个小的样式更新与之相关的所有页面元素。下面大概说一下我用到的CSS样式。
<style type="text/css">
body{font-family:"microsoft yahei";}
img{width:516px;height:100px}
td{background:dodgerblue;}
div{text-align:left;}
.ad{
font-weight:bold;
width: 299px;
border-width:1px;
border-style:solid;
border-color:gainsboro;
}
.bd{
font-weight:bold;
width:130px;
height: 70px;
border-width:1px;
border-style:solid;
border-color:gainsboro;
}
</style>
css样式需要定义在<body>标签内,才能使用。".ad",".bd"被叫做类选器,由圆点"."和选择器(如ad,bd)组成。在花括号内部时控制html外观的具体的css样式,样式有很多,其中font-weight:bold用于字体加粗;“background:"颜色";” ;width:***px,height:***px用于表格长度和宽度的设置,而与border有关的样式均用于边框样式的个性化。当然css样式有太多了,其他的就不赘述了。
话不多说,现在贴上我的代码和运行结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单校园页面</title>
<style type="text/css">
body{font-family:"microsoft yahei";}
img{width:516px;height:100px}
td{background:dodgerblue;}
div{text-align:left;}
.ad{
font-weight:bold;
width: 299px;
border-width:1px;
border-style:solid;
border-color:gainsboro;
}
.bd{
font-weight:bold;
width:130px;
height: 70px;
border-width:1px;
border-style:solid;
border-color:gainsboro;
}
</style>
</head>
<body>
<img src="41.jpg" alt="找不到图片">
<br>
<table class="ta">
<tbody>
<tr>
<td class="ad" style="background:lightgreen;width:100px;height: 50px;">我的校园</td>
<td class="ad" style="background:lightgreen;width:100px;height: 50px;">校园生活</td>
<td class="ad" style="background:lightgreen">我的家园</td>
</tr>
</tbody>
</table>
<table class="ta">
<tbody>
<tr>
<td class="bd">计算中心</td>
<td class="bd" rowspan="4" style="width:375px;height:70px">
<form method="post" action="index.html">
<label>用户名:</label>
<input type="text" name="用户名">
<br><br>
<label>
<span style="letter-spacing:15px;">密码:</span>
</label>
<input type="password" name="密码">
<br><br>
<div>
<input type="submit" value="确定" name="submitBtn">
<input type="reset" value="重置" name="resetBtn">
</div>
</form>
</td>
</tr>
<tr>
<td class="bd">资环学院</td>
</tr>
<tr>
<td class="bd">信息学院</td>
</tr>
<tr>
<td class="bd">动科学院</td>
</tr>
</tbody>
</table>
</body>
</html>