继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

闲来无事之HTML布局练习--《温柔》(五月天)

呦呦米
关注TA
已关注
手记 31
粉丝 103
获赞 598
<!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>
打开App,阅读手记
25人推荐
发表评论
随时随地看视频慕课网APP