HTML布局练习–《温柔》五月天

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>

IT文库 » HTML布局练习–《温柔》五月天
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址