利用html/css设计一个简单个人主页

最新推荐文章于 2024-03-23 13:43:52 发布

摩霄志在潜修羽

最新推荐文章于 2024-03-23 13:43:52 发布

阅读量6.5w

点赞数 81

本文链接：https://blog.csdn.net/cprimesplus/article/details/100810508

版权

web编程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本次作业要求：
设计个人主页
在这里插入图片描述
我的代码及效果
效果

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人主页设计</title>
<style type="text/css">
	.paragraph { background-image: url(wufan.jpg);
                 background-repeat: no-repeat;
				 background-position:80% 50%;
				 /*background-position:80% 95%*/
				 filter:alpha(opacity:30); opacity:1;}
</style>
<!-- 取消超链接下的下划线 -->
<style type="text/css">a {text-decoration: none}</style>
	
</head>

<body class="paragraph">
	<div>
		<center><h1>ACoder的个人主页</h1></center>
		<marquee bgcolor="black" behavior="scroll">
			<font color="white" size="+1">欢迎来到ACoder的个人主页！</font>
		</marquee>
	</div>
	
	<!-- 不知道下面这样放合不合理 -->
	<!--center-->
		<div>
		<h2 align="left">个人简历</h2>
		<table border="2" bordercolor="black">
			<caption>ACoder的个人简历</caption>
			<tr>
				<th rowspan="2" align="left"><img src="wufan.jpg" height="200" width=""></img></th>
				<th>姓名</th>
				<td align="center">xxxx</td>
				<th>性别</th>
				<td align="center">男</td>
			</tr>
			<tr>
				<th>政治面貌</th>
				<td align="center">xxx</td>
				<th>出生日期</th>
				<td align="center">1998-10-20</td>
			</tr>
			<tr>
				<!-- <th><img src="悟饭.png" height="200" width=""></img></th> -->
				<th colspan="5">兴趣爱好</th>
			</tr>
			<tr>
				<td align="center">编程</td>
				<td align="center">书法</td>
				<td colspan="2" align="center">看武侠小说</td>
				<td align="center">打羽毛球</td>
			</tr>
			<tr>
				<th colspan="5">个人csdn博客</th>		
			</tr>
			<!-- 如果有网的话... -->
			<tr>
				<td colspan="5" align="center"><a href="https://blog.csdn.net/cprimesplus">点击参观我的博客</a></td>
			</tr>
		</table>
	</div>
	<br>
	<div>
		<h2>友情链接</h2>
		<a href="https://github.com/">github</a>
		<a href="www.baidu.com">baidu</a>
		<a href="https://mail.126.com/">126邮箱</a>
		<a href="https://mail.163.com/">163邮箱</a>
		<a href="https://mail.qq.com/">qq邮箱</a>
	</div>
	<!--/center-->
	<br><HR>
	<div>
		作者：xxx &#8195;&#8195;学校：xxx &#8195;&#8195;个人邮箱：xxx@qq.com
		<br>csdn：cprimesplus
	</div>
	
</body>
</html>