<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta content="text/html" charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #F7C85C;
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}
#div{
margin-left: 150px;
}
#div1{
background-image: url("4.jpg");
1000px;
height: 180px;
box-shadow: 5px 5px 4px #F7E18B;
margin-bottom: 70px;
}
#div2{
height: 160px;
176px;
border: 3px solid white;
position: absolute;
top: 80px;
left: 160px;
}
#div2:hover #img{
display: none;
}
#div2:hover #img1{
display: block;
}
#img{
height: 160px;
}
#img1{
height: 160px;
176px;
display: none;
}
#div3{
color: #A8384C;
font-size: 30px;
position: absolute;
top: 140px;
left: 380px;
}
#div4{
807px;
height: 50px;
position: absolute;
top: 186px;
left: 343px;
background-color: #FEE27E;
border:1px solid #D59F4B;
}
ul{
list-style: none;
padding: 0px;
}
ul li{
float: left;
border:1px solid #D59F4B;
height: 50px;
72px;
text-align: center;
line-height: 50px;
margin-top: -17px;
}
ul li:hover{
120px;
background-color: #F29E1B;
}
ul li:hover a{
color: white;
font-size: 25px;
}
ul li a{
color: #555555;
text-decoration: none;
text-align: center;
margin-right: 8px;
height: 40px;
100px;
}
#div5{
1000px;
height: 600px;
border:1px solid #D59F4B;
float: left;
}
#div5a{
197px;
height: 600px;
border:1px solid #D59F4B;
float: left;
}
#div5a1{
background-color: #FFEB8E;
197px;
height: 25px;
}
#div5a2{
background-color: #FFffff;
197px;
height: 575px;
text-align: center;
}
.div5a3{
background-image: -webkit-linear-gradient(left,#F6B149,#FFffff);
193px;
height: 25px;
margin-left: 2px;
text-align: left;
margin-bottom: 150px;
}
.div5a4{
193px;
height: 150px;
text-align: left;
margin-left: 4px;
display: none;
margin-top: 4px;
}
.div5a4 a{
color: #555555;
text-decoration: none;
}
.div5a3:hover .div5a4{
display: block;
}
#div5b{
785px;
height: 600px;
border:1px solid #D59F4B;
float: right;
}
#div5b1{
background-color: #FFEB8E;
785px;
height: 25px;
}
#div5b2{
background-color: #FFffff;
785px;
height: 575px;
text-align: center;
}
#div6{
text-align: center;
float: none;
1000px;
height: 25px;
line-height: 25px;
}
#div5b3{
text-align: right;
margin-right: 5px;
}
#div5b4{
text-align: left;
margin-right: 5px;
color: #F56400;
font-size: 20px;
}
#div5b5{
785px;
overflow: hidden;
border-top:1px solid #D59F4B;
border-bottom:1px solid #D59F4B;
height: 200px;
}
#div5b6{
height: 150px;
2050px;
-webkit-animation:chen 5s infinite linear;
}
#div5b6:hover{
-webkit-animation-play-state:paused;
}
@-webkit-keyframes chen{
from{
margin-left: 0px;
}to{
margin-left: -1025px;
}
}
.class1{
200px;
margin-top: 25px;
}
#div5b7{
text-align: right;
}
#div5b7 a{
text-align: right;
margin-right: 5px;
}
#div5b8{
text-align: right;
margin-right: 5px;
color: #555555;
}
#div5b9{
785px;
}
#hr{
border: 1px dashed #D59F4B;
margin-left: 8px;
margin-right: 8px;
}
</style>
</head>
<body>
<div id="div">
<div id="div1">
<div id="div2">
<img src="2.jpg" alt="" id="img">
<img src="3.jpg" alt="" id="img1">
</div>
<div id="div3">
曦间流水
</div>
</div>
<div id="div4">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">收藏</a></li>
<li><a href="#">博友</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">管理</a></li>
</ul>
</div>
<div id="div5">
<div id="div5a">
<div id="div5a1"></div>
<div id="div5a2">
昵称：曦间流水</p>
园龄：1个月</p>
粉丝：1</p>
关注：0</p>
我的闪存</p>
<div class="div5a3">常用链接
<div class="div5a4">
<a href="#">我的随笔</a></br>
<a href="#">我的评论</a></br>
<a href="#">我的参与</a></br>
<a href="#">最新评论</a></br>
<a href="#">我的标签</a></br>
<a href="#">更多链接</a></br>
</div>
</div>
<div class="div5a3">随笔档案
<div class="div5a4">
<a href="#">2014年6月6号</a></br>
<a href="#">2014年6月1号</a></br>
<a href="#">2014年5月29号</a></br>
<a href="#">2014年5月25号</a></br>
<a href="#">2014年5月22号</a></br>
<a href="#">2014年5月18号</a></br>
</div>
</div>
</div>
</div>
<div id="div5b">
<div id="div5b1"></div>
<div id="div5b2">
<div id="div5b3">
2014年6月6号
</div>
<div id="div5b4">
一些网页平面设计图：
</div>
<div id="div5b5">
<div id="div5b6">
<img src="5.jpg" alt="" class="class1">
<img src="6.jpg" alt="" class="class1">
<img src="7.jpg" alt="" class="class1">
<img src="8.jpg" alt="" class="class1">
<img src="9.jpg" alt="" class="class1">
<img src="5.jpg" alt="" class="class1">
<img src="6.jpg" alt="" class="class1">
<img src="7.jpg" alt="" class="class1">
<img src="8.jpg" alt="" class="class1">
<img src="9.jpg" alt="" class="class1">
</div>
</div>
<div id="div5b7">
<a href="#">阅读全文</a>
</div>
<div id="div5b8">
posted @ 2014-06-15 15:36 曦间流水 阅读(4) 评论(0) 编辑
</div>
<div id="div5b9">
<hr id="hr"/>
</div>
</div>
</div>
</div>
<div id="div6">Copyright ©2014 曦间流水</div>
</div>
</body>
</html>
平面图如下：