初学html日记——第二阶段

最新推荐文章于 2025-02-11 22:22:48 发布

原创最新推荐文章于 2025-02-11 22:22:48 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#htm

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML表格制作及CSS样式的应用，通过实例演示如何使用CSS美化HTML表格，并展示了具体的代码实现过程。

如有错误或更好的方法，请评论修改，谢谢！

此次主要学习了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>&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="text" name="用户名">
							<br><br>
							<label>
								<span style="letter-spacing:15px;">密码：</span>
							</label>
							<input type="password" name="密码">
							<br><br>
							<div>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="submit" value="确定" name="submitBtn">
								&nbsp;&nbsp;&nbsp;&nbsp;
								<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>