个人网站

作者: 咖啡和烟 | 来源:发表于2017-02-19 14:40 被阅读0次

个人网站
个人网站
个人网站
个人网站
个人网站
个人网站
个人网站 - 架构设计
搭建个人网站
个人推荐网站
个人网站发布

<!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">![](css/images/1.jpg)</a>
            <a href="" class="a2">![](css/images/2.jpg)</a>
            <a href="" class="a3">![](css/images/3.jpg)</a>
            <a href="" class="a4">![](css/images/4.jpg)</a>
            <a href="" class="a5">![](css/images/5.jpg)</a>
    </div>
        
    </div>
    <div id="guanyuwomen">
        <p>我的宝贝</p>
        <a href="">![](css/images/6.jpg)
        </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