为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html/CSS
<!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>
点击查看更多内容
25人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
103
获赞与收藏
598

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消