HTML+CSS 轻松入门之HTML+CSS 综合实例（二）

下面我们要做一个个人简历

表格布局，这里面我们将用到合并单元格，横向和纵向，代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>php 这中文网   实例二</title>
	<style type="text/css">
			table{
				width:650px;
				border:1px solid black;
				text-align:center;
				margin:0 auto;
			}
			td{
				border:1px solid black;
				width:50px;
				height:45px;
			}

			.t1{
				width:50px;
			}

			.t2{
				width:80px;
				height:55px;
			}
			.t3{
				height:80px;
			}

			.tit{
				font-weight:bold;
			}
	</style>
</head>
<body>
	<table rules="all">
		<tr class="t1">
			<td class="tit">姓名</td>
			<td>王茵</td>
			<td class="tit">性别</td>
			<td>女</td>
			<td class="tit">出生日期</td>
			<td>1985.6.25</td>
			<td rowspan="3">相片</td>
		</tr>
		<tr class="t1">
			<td class="tit">籍贯</td>
			<td>安徽</td>
			<td class="tit">民族</td>
			<td>汉</td>
			<td class="tit">身体状况</td>
			<td>健康</td>
			
		</tr>
		<tr class="t1">
			<td class="tit">政治面貌</td>
			<td>团员</td>
			<td class="tit">身高</td>
			<td>165</td>
			<td class="tit">学历</td>
			<td>本科</td>
			
		</tr>
		<tr class="t2">
			<td class="tit">毕业学校</td>
			<td colspan="2">安徽大学</td>
			<td class="tit">所学专业</td>
			<td colspan="3">计算机应用技术</td>
		</tr>
		<tr class="t2">
			<td class="tit">毕业时间</td>
			<td colspan="2">2014.6.8</td>
			<td class="tit">联系电话</td>
			<td colspan="3">18856325968</td>
		</tr>
		<tr class="t2">
			<td class="tit">邮箱</td>
			<td colspan="2">wangyin@163.com</td>
			<td class="tit">家庭住址</td>
			<td colspan="3">安徽省合肥市蜀山区科学大道健康小区2105室</td>
		</tr>

		<tr class="t3">
			<td class="tit">拥有证书</td>
			<td colspan="6">驾驶证，会计证，办公自动化，等</td>
		</tr>
		<tr class="t3">
			<td class="tit">专业技能</td>
			<td colspan="6">photoshop php java javascript</td>	
		</tr>

		<tr class="t3">
			<td class="tit">工作经验</td>
			<td colspan="6">某某公司前端开发（包括美工）
							某某公司前端开发（包括美工）
			</td>
		</tr>

		<tr class="t3">
			<td class="tit">个人特点</td>
			<td colspan="6">爱好学习，喜欢挑战有难度的工作</td>
		</tr>

		<tr class="t3">
			<td colspan="7">相信您的信任与我的努力将为我们带来共同的成功，希望我能为贵公司贡献自己的力量！</td>
		</tr>
	</table>
</body>
</html>

小伙伴们回去要试一下，虽然在网站开发中，我们不常用表格来布局，但这是最简单的布局方式

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php 这中文网实例二</title> <style type="text/css"> table{ width:650px; border:1px solid black; text-align:center; margin:0 auto; } td{ border:1px solid black; width:50px; height:45px; } .t1{ width:50px; } .t2{ width:80px; height:55px; } .t3{ height:80px; } .tit{ font-weight:bold; } </style> </head> <body> <table rules="all"> <tr class="t1"> <td class="tit">姓名</td> <td>王茵</td> <td class="tit">性别</td> <td>女</td> <td class="tit">出生日期</td> <td>1985.6.25</td> <td rowspan="3">相片</td> </tr> <tr class="t1"> <td class="tit">籍贯</td> <td>安徽</td> <td class="tit">民族</td> <td>汉</td> <td class="tit">身体状况</td> <td>健康</td> </tr> <tr class="t1"> <td class="tit">政治面貌</td> <td>团员</td> <td class="tit">身高</td> <td>165</td> <td class="tit">学历</td> <td>本科</td> </tr> <tr class="t2"> <td class="tit">毕业学校</td> <td colspan="2">安徽大学</td> <td class="tit">所学专业</td> <td colspan="3">计算机应用技术</td> </tr> <tr class="t2"> <td class="tit">毕业时间</td> <td colspan="2">2014.6.8</td> <td class="tit">联系电话</td> <td colspan="3">18856325968</td> </tr> <tr class="t2"> <td class="tit">邮箱</td> <td colspan="2">wangyin@163.com</td> <td class="tit">家庭住址</td> <td colspan="3">安徽省合肥市蜀山区科学大道健康小区2105室</td> </tr> <tr class="t3"> <td class="tit">拥有证书</td> <td colspan="6">驾驶证，会计证，办公自动化，等</td> </tr> <tr class="t3"> <td class="tit">专业技能</td> <td colspan="6">photoshop php java javascript</td> </tr> <tr class="t3"> <td class="tit">工作经验</td> <td colspan="6">某某公司前端开发（包括美工）某某公司前端开发（包括美工） </td> </tr> <tr class="t3"> <td class="tit">个人特点</td> <td colspan="6">爱好学习，喜欢挑战有难度的工作</td> </tr> <tr class="t3"> <td colspan="7">相信您的信任与我的努力将为我们带来共同的成功，希望我能为贵公司贡献自己的力量！</td> </tr> </table> </body> </html>

einreichen Code zurücksetzen

Automatische Operation

HTML+CSS 轻松入门之HTML+CSS 综合实例（二）

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]