admin管理员组文章数量:1516870
1.主页
<html>
<head>
<title>个人主页</title>
<meta charset="UTF-8"/>
<style type="text/css">/*设置图片样式*/
#div_box {
width: 1100px;
height: 500px;
font-family: "宋体";
background-color: #ffffff90;
margin: auto;
margin-top: 3%;
text-align: center;
border-radius: 10px;
padding: 20px 50px;
}
body{
background: url("images/主页背景图1.png")
no-repeat;
background-size: 2000px 1000px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
}
h{
text-align: center;
margin-top:0px;
font-size: 20px;
color:rgb(9, 8, 8);
font-family: "宋体";
}
h1{
text-align: center;
margin-top:30px;
font-size: 30px;
color:rgb(13, 11, 11);
font-family: "宋体";
}
/*设置div的基础样式*/
div{
width: 250px;
height: 250px;
border-radius: 50%;
}
/*设置header和footer的样式*/
#header,#footer{
width: 1190px;
margin: auto;
margin-top: 100px;
}
/*设置子div的样式*/
#div01{
border: solid 0px #ffffff90 ;
float: left;
margin-right: 20px;
}
#div02{
border: solid 0px #ffffff90;
float: left;
margin-right: 20px;
}
#div03{
border: solid 0px #ffffff90 ;
float: left;
margin-right: 20px;
}
#div04{
border: solid 0px #ffffff90;
float: left;
}
#log
{
color:rgb(100, 50, 355);
font-size: 55px;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
<style>
a:visited {color:rgb(2, 1, 1);}
a:hover {color:rgb(24, 21, 198);}</style>
</head>
<body>
<div id="div_box">
<h1>欢迎来到我的主页</h1>
<div id="header">
<div id="div01">
<img src="images/派大星01.png" alt="" class="img"><br>
<h><a href="个人简介1.html">个人简介</a></h>
</div>
<div id="div02">
<img src="images/派大星02.png" alt="" class="img"><br>
<h><a href="我的理想.html">我的理想</a></h>
</div>
<div id="div03">
<img src="images/派大星03.png" alt=""class="img"><br>
<h><a href="我的生活.html">我的生活</a></h>
</div>
<div id="div04">
<img src="images/派大星04.png" alt=""class="img"><br>
<h><a href="学习内容.html">学习内容</a></h>
</div>
</div>
</p>
</body>
</html>
2.个人简介.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简介</title>
<style>
#div_box {
width: 900px;
height: 500px;
font-family: "宋体";
background-color: #ffffff90;
margin: auto;
margin-top: 10%;
text-align: center;
border-radius: 10px;
padding: 20px 50px;
}
body{
background :url("images/主页背景图1.png")
no-repeat;
background-size: 1500px 1000px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
}
h1{
text-align: center;
margin-top:30px;
font-size: 30px;
color:rgb(13, 11, 11);
font-family: "宋体";
}
/*设置div的基础样式*/
div{
width: 250px;
height: 250px;
border-radius: 50%;
}
.img{
margin-left: 150px;
width: 200px;
height: 200px;
border-radius: 50%;
float: left;
}
tr{
vertical-align: top;
}
td{
text-align: center;
}
</style>
</head>
<body>
<div id="div_box">
<h1>个人简介</h1>
<h2>现就读于哈尔滨理工大学荣成校区 软件工程系大三学生</h2>
<tr>
<td rowspan="6">
<img src="images/主页背景图.png" class="img" >
</td>
<td rowspan="3">姓名 | xxxxx</td>
<td>手机号 | xxxxxxxx</td>
</tr>
<br>
<br>
<tr>
<td rowspan="3">性别 | 男</td>
<td>邮籍 | 2132344</td>
</tr>
<br>
<br>
<tr>
<td>生日 | xxxxxx</td>
<td>qq号 | xxxxxx</td>
</tr>
<br>
<br>
<tr>
<td>居住 | 山东省威海市</td>
<td>户籍 | 黑龙江省绥化市</td>
</tr>
<br>
<br>
<tr>
<td>学历 | 本科</td>
<td>学校 | 哈尔滨理工大学荣成校区</td>
</tr>
<br>
<br>
<tr>
<td>专业 | 软件工程</td>
<td></td>
</tr>
<br>
<br>
</div>
</body>
</html>
版权声明：本文标题：IE8兼容策略详解：构建高效、美观的HTML个人主页实例 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/biancheng/1770482395a3255144.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论