用HTML5做一个个人网站，此文仅展示个人主页界面。内附源代码下载地址

全栈程序员站长

发布于 2022-07-25 12:57:16

5440

发布于 2022-07-25 12:57:16

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

html5 ，用css去修饰自己的个人主页

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
}
#aa {
	position: fixed;
	height: 662px;
	width: 1366px;
	background: #FFF;
}
#bb {
	background: #FFF;
	position: absolute;
	height: 401px;
	width: 1398px;
	left: -31px;
	top: 0px;
}
#cc {
	background: #09C;
	position: absolute;
	height: 63px;
	width: 1404px;
	left: -34px;
	top: 418px;
	font-size: 36px;
	color: #FFF;
}
#dd {
	position: absolute;
	height: 124px;
	width: 175px;
	left: 1142px;
	top: 136px;
}
#ee {
	position: absolute;
	height: 295px;
	width: 510px;
	left: 953px;
	top: 70px;
	line-height: 24px;
}
#ff {
	position: absolute;
	height: 66px;
	width: 214px;
	left: 600px;
	top: 553px;
	font-size: 45px;
	font-weight: bold;
}
.gg {
	font-size: 36px;
}
#aa #bb #ee table tr td {
	color: #000;
}
#aa #bb #ee table {
	color: #000;
}
#gg {
	position: absolute;
	height: 161px;
	width: 195px;
	left: 573px;
	top: -55px;
	font-size: 16px;
}
</style>
</head>

<body>
<div id="aa">
  <div id="cc">                                                            青春     奔放    活泼    热情&copy;</div>
  <div id="bb">
    <div id="ee">
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td><hr /></td>
        </tr>
        <tr>
          <td><p>姓名：%%%</p></td>
        </tr>
        <tr>
          <td>性别：男</td>
        </tr>
        <tr>
          <td>年龄：19</td>
        </tr>
        <tr>
          <td>家乡：<a href="http://baike.baidu.com/link?url=ZkJSggcN2Nl7Xe0HaB0hSRrMkIdo-VGCNJWpbPIWNt1-M7xPr4FkF2qdxHGCMz3lT0LdGTsXi5zMtwMWKZ5S3Pz8elmt9ATA1omMMMfTIBSdG430mMTTJk0MyAlQO88B">甘肃省镇原县</a></td>
        </tr>
        <tr>
          <td>就读院校：<a href="http://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D%E5%A4%A7%%A6">**大学</a></td>
        </tr>
        <tr>
          <td>就读专业：<a href="http://baike.baidu.com/item/%E5%BE%AE%E7%94%E7%A7%91%E5%AD%A6%E4%B8%8E%E5%B7%A5%E7%A8%8B%E4%B8%93%E4%B8%9A">微电子科学与工程专业</a></td>
        </tr>
        <tr>
          <td>学生证号：201614#######</td>
        </tr>
        <tr>
          <td>兴趣爱好：听歌，打篮球</td>
        </tr>
        <tr>
          <td>政治面貌：团员</td>
        </tr>
        <tr>
          <td>联系电话：13245676543</td>
        </tr>
        <tr>
          <td>Email:179997256@qq.com</td>
        </tr>
        <tr>
          <td>关键词：学生</td>
        </tr>
        <tr>
          <td> </td>
        </tr>
      </table>
    </div>
    <img src="img/1497103056360.jpg" width="1398" height="403" /></div>
  <div id="ff">
    <div id="gg">
      <p> </p>
      <p> </p>
      <p> </p>
      <p><a href="zhuye.html">回到主页</a></p>
      <form id="form1" name="form1" method="post" action="">
      </form>
    </div>
  About  me</div>
</div>
</body>
</html>