闲来无事之HTML布局练习--《温柔》（五月天）-原创手记-慕课网

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>温柔</title>
<style type="text/css">
h1{
    color:#9c6; 
    letter-spacing:20px;  
} 
h4{
   color:#9c6; 
} 
.head{
    width:250px;
    height:160px;
    border:6px #963 inset  ;/*菱形边框*/
    background:#ff9;
    position:fixed;/*固定在屏幕中不会随着滚动条的变化而变化*/
    top:15px;
    left:220px;
    color:red;

}

.part1{  
    position:absolute;/*将元素从文档流中拖出来，相对于浏览器窗口设置位置。相对于浏览器固定，随着滚动条移动而移动：滚动条下滑标题还在，内容则向下滑动*/
    left:30px;
    top:200px; 
}

.part2{   
    position:absolute;
    left:400px;
    top:200px; 
}

.part3{   
    position:absolute;   
    left:30px;
    top:340px; 
}
.part4{   
    position:absolute; 
    left:400px;
    top:340px; 
}

.part5{  
    width:265px;
    height:100px;
    position:absolute;  
    border:3px solid #9c6; 
    left:30px;
    top:500px; 
}

.part1,.part2{
    width:265px;
    height:85px;
    border:3px dotted  #f66;/*点线*/
}
.part3,.part4{
    width:265px;
    height:100px;
    border:3px dashed #ff6; /*线线*/
}

</style>
</head>
<body>

    <div class="head">
        <h1>温柔</h1> <br/>
　      <h4>歌手：五月天    |    专辑：爱情万岁 <br/> </h4>
　  </div>
　　<div class="part1">
    p1走在风中　今天阳光　突然好温柔<br/>
    天的温柔　地的温柔　像你抱著我<br/>
    然后发现　你的改变　孤单的今后<br/>
    如果冷　该怎么渡过<br/>
　　</div>
　　<div class="part2">
    天边风光　身边的我　都不在你眼中<br/>
    你的眼中　藏著什么　我从来都不懂<br/>
    没有关系　你的世界　就让你拥有<br/>
    不打扰　是我的温柔<br/>
　　</div>
　　<div class="part3">
    不知道  不明了 不想要 为什么我的心 <br/>
    明明是想靠近 却孤单到黎明 <br/>
    不知道 不明了 不想要 为什么我的心 <br/>
    那爱情的绮丽  总是在孤单里 <br/>
    再把我的最好的爱给你 <br/>
　　</div>
　　
　　<div class="part4">
    不知不觉 不情不愿 又到巷子口 <br/>
    我没有哭 也没有笑 因为这是梦 <br/>
    没有预兆 没有理由 你真的有说过 <br/>
    如果有就让你自由 <br/>
　　</div> 
　 
　　<div class="part5">
    自由  <br/>
    这是我的温柔 <br/>
    就让你自由 <br/>
　　</div> 

</body>
</html>