<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人网站</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bace.css">
</head>
<body>
<div class="w980 header">
<div class="h1">
<a href="#gerenxinxi">个人信息</a>
<a href="#guanyudaxue">关于大学</a>
<a href="#guanyuwomen">关于我们</a>
</div>
<div class="h2">
<p>感谢17dian网站的所有老师和一起进步的同学!</p>
</div>
</div>
<div id="gerenxinxi">
<p>姓名：王羽非</p><br>
<p>学校：辽宁科技大学</p><br>
<p>专业：自动化</p><br>
<p>家庭地址：辽宁省大连市普兰店市</p><br>
<p>联系方式：15566281340</p><br>
</div>
<div id="guanyudaxue">
<div class="daxue">
<p>我的辽科大</p>
<a href="" class="a1"></a>
<a href="" class="a2"></a>
<a href="" class="a3"></a>
<a href="" class="a4"></a>
<a href="" class="a5"></a>
</div>
</div>
<div id="guanyuwomen">
<p>我的宝贝</p>
<a href="">
</a>
</div>
</body>
</html>
CSS部分：
@charset "utf-8";
/* header */
*{
margin:0;
padding:0;
}
.w980{
width:980px;
margin:0 auto;
}
.header{
height:580px;
background:url(images/0.jpg) no-repeat;
}
.h1{
width:980px;
height:40px;
padding-left:200px;
padding-top:20px;
}
.h1 a{
font:bold 30px/40px "宋体";
color:#000;
margin-left:40px;
text-decoration: none;
}
.h1 a:hover{
color:#3e2854;
}
.h2{
margin-top:440px;
width:980px;
height:80px;
background-color:#000;
opacity: 0.5;
}
.h2 p{
font:40px/80px "宋体";
color:#fff;
text-indent: 10px;
text-decoration: none;
}
#gerenxinxi{
width:490px;
height:490px;
margin:20px auto;
border:5px solid #3e2854;
}
#gerenxinxi p{
width:490px;
height:80px;
text-decoration: none ;
text-align: left;
font:bold 30px/50px "宋体";
color:#8c1872;
}
#guanyudaxue{
width:800px;
height:1000px;
margin:0 auto;
}
#guanyudaxue .daxue{
width:800px;
height:900px;
position:relative;
}
#guanyudaxue .daxue p{
width:800px;
height:100px;
font:bold 50px/100px "宋体";
color:#8c1872;
text-decoration: none;
}
#guanyudaxue .a1{
width:280px;
height:280px;
border:5px solid #fff;
position: absolute;
top:350px;
left:250px;
}
#guanyudaxue .a2{
width:240px;
height:540px;
border:5px solid #fff;
position: absolute;
top:100px;
left:0;
}
#guanyudaxue .a3{
width:240px;
height:540px;
border:5px solid #fff;
position: absolute;
top:350px;
left:550px;
}
#guanyudaxue .a4{
width:540px;
height:240px;
border:5px solid #fff;
position: absolute;
top:100px;
left:250px;
}
#guanyudaxue .a5{
width:540px;
height:240px;
border:5px solid #fff;
position: absolute;
top:650px;
left:0px;
}
#guanyuwomen{
width:800px;
height:1000px;
margin:0 auto;
}
#guanyuwomen p{
width:800px;
height:100px;
font:bold 50px/100px "宋体";
color:#8c1872;
text-decoration: none;
}
#guanyuwomen a{
width:800px;
height:800px;
}
链接：http://pan.baidu.com/s/1geZYtsJ 密码：iw96
网友评论