您的位置：首页 > 其它

个人主页

2017-06-28 18:38 176 查看 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body {
margin: 0;
}

header {
background-color: palegreen;
width: 100%;
/*bordr:2px red solid;*/
position: fixed;
box-shadow: 2px 5px 5px;
}

header section{
background-image: url("logo.png");
width: 400px;
height: 100px;
background-size: 400px 100px;
float: left;
margin-top: 35px;
margin-left: 20px;
}

header div {
margin-top: 70px;
float: right;

}

.one {
margin-right: 30px;
font-size: 25px;
text-decoration-line: none;
}

div img {
width: 100%;
height: 600px;
margin-top: 135px;
}

.aa {
height: 800px;
margin: 0px;
}

main {
margin-left: 100px;
margin-right: 100px;
}

.div1 {
width: 10px;
height: 30px;
background-color: red;
float: left;
}

.div0 {
margin-bottom: 10px;
font-size: 25px;
/*font-size-adjust: center;*/
margin-top: 30px;
}

#foot {
display: block;  border-top: solid 2px red;
/*text-justify: center;*/
margin-top: 50px;
padding:30px;
text-align: center;
}

/*.foot1 {

display: block;
margin-left: 20px;
float: left;
margin-right: 20px;

}*/
#class{
/*width:100%;*/
height:600px;
background-image: url(classmates.jpg);
background-size: 100%;
border:solid 1px transparent;

}
#class1{
width:300px;
height:300px;
background-image: url(lry.jpg);
background-size: 100% 100%;

border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
margin-top:150px;
margin-left:300px;
/*transform: translateX(300px)  translateY(150px) ;*/
}
</style>

<body>
<header>
<section></section>
<div>
<a href="#tip0" class="one" >我的主页</a>
<a href="#tip1" class="one">我的同学</a>
<a href=" #tip2" class="one" >我的家乡</a>
<a href="" class="one">我的照片</a>
<a href="" class="one">关于我</a>
</div>

</header>
<div>
<img src="header.jpg" alt="">
</div>
<main>

<div>
<div>njfksdahnjkegndkrfgmnklsgjnls</div>
<div class="div0">
<div class="div1"> </div>
<div id="tip0">HTML5</div>
</div>

<img src="html5.jpg" alt="" class="aa">
<div>njfksdahnjkegndkrfgmnklsgjnls</div>
</div>
<div>
<div class="div0">
<div class="div1"> </div>
<div id="tip1">我的主页</div>
</div>
<div id="class">
<!--<img src="classmates.jpg" alt="" class="aa">-->
<div id="class1"></div>
</div>
<div>njfksdahnjkegndkrfgmnklsgjnls</div>
</div>
<div>
<div class="div0">
<div class="div1"> </div>
<div id="tip2">我的同学</div>
</div>
<img src="lzu.jpg" alt="" class="aa">
<div>njfksdahnjkegndkrfgmnklsgjnls</div>
</div>
<div>
<div class="div0">
<div class="div1"> </div>
<a id="tip">我的家乡</a>
</div>
<img src="hometown.jpg" alt="" class="aa">
<div>njfksdahnjkegndkrfgmnklsgjnls</div>
</div>
<div id="foot">

nasklfseldgml;sdfghtl;h
   
134156546546
   
nasklfseldgml;sdfghtl;h

</div>
</main>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航