圣杯布局学习博客

insignificant555

于 2022-04-18 19:29:17 发布

阅读量93

点赞数

文章标签：其他

本文链接：https://blog.csdn.net/qq_66351622/article/details/124257169

版权

学习目标：

一周掌握基本前端页面布局

学习内容：

1.圣杯布局
2.position相对定位属性
3.文档流…

学习产出：

技术笔记
网页博客
下面展示代码：

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width,initial-scale=1.0">
  	<title>圣杯布局练习</title>
  </head>
  <style>
  header {
  width: 100%;
  height: 50px;
  background: #6daca7;
  line-height: 50px;
  text-align: center;}

footer {
  width: 100%;
  height: 30px;
  background: #52797a;
  clear: both;
  line-height:30px;
  text-align: center;
}
.container{
  padding-left: 200px;
  padding-right: 150px;
}
.left , .right, .middle {
  position: relative;
  float: left;
}
.left {
  width: 200px;
  background: rgb(0, 229, 255);
  margin-left: -100%;
  left:-200px; 
}
.right {
  width: 150px;
  background: rgb(0, 255, 251);
  margin-right: -150px
}
.middle {
  width: 100%;
  background: rgb(122, 128, 0);
}
  </style>
  <body>
<!-- 		header和footer各自占领屏幕所有宽度，高度固定。
  	中间的container是一个三栏布局。
  	三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
  	中间部分的高度是三栏中最高的区域的高度。 -->
  	<header>
  		header
  	</header>
  	<div class="container" >
  		<div class="middle">歌词
              <p>
              Some deserts on this planet were oceans once 
              这颗星球上的一些沙漠曾是海洋
              Somewhere shrouded by the night, the sun will shine 
              被黑夜笼罩的地方，也会迎来阳光
              Sometimes I see a dying bird fall to the ground 
              偶尔也会见到濒死的鸟跌落地面
              But it used to fly so high 
              但它也曾展翅高飞过
              I thought I were no more than a bystander Till I felt a touch so real 
              我本以为我不过是个旁观者 直到我感觉到如此真实的触碰
              I will no longer be a transient When I see smiles with tears 
              当我看到人们含泪的微笑 我便不再是个匆匆过客
              If I have never known the sore of farewell and pain of sacrifices 如果不曾知晓生离死别的伤痛
              What else should I engrave on my mind 
              又该将什么铭记于心
              Frozen into icy rocks, that's how it starts 
              冰冻成石一般的开端
              Crumbled like the sands of time, that's how it ends 
              沙漏崩落一般的终结
              Every page of tragedy is thrown away Burned out in the flame 悲剧的每一页已被烈焰燃尽
              A shoulder for the past 
              给过往一个肩膀
              Let out the cries imprisoned for so long 
              让久被禁锢的哭泣得以放声
              A pair of wings for me at this moment 
              给此刻的自己一双翅膀
              To soar above this world 
              翱翔于世界的上空
              Turn into a shooting star that briefly shines but warms up every heart 
              化为一颗流星，给心灵一瞬的希望
              May all the beauty be blessed 
              愿所有的美好都能得到祝福
              May all the beauty be blessed 
              愿所有的美好都能得到祝福
              I will never go 
              我不会离开
              There's a way back home 
              回归之路就在前方
              Brighter than tomorrow and yesterday 
              比过往与未来都要更加闪耀着
              May all the beauty be blessed 
              愿所有的美好都能得到祝福
              Wave good-bye to the past When hope and faith have grown so strong and sound 
              当希望和信念羽翼丰满，就向昨日告别吧
              Unfold this pair of wings for me again 
              再一次为我张开这双翅膀
              To soar above this world 
              翱翔于世界的上空
              Turned into a moon that always tells the warmth and brightness of the sun 
              化为月亮长久地传达着太阳的光亮
              May all the beauty be blessed 
              愿所有的美好都能得到祝福
              May all the beauty be blessed 
              愿所有的美好都能得到祝福
              </p>
          </div>
  		<div class="left">MoonHalo
              <p>左边栏</p>
          </div>
  		<div class="right">MoonHalo
              <p>右边栏</p>
          </div>
  	</div>
  	<footer>
  		footer
  	</footer>
  </body>
</html>

运行结果如图：在这里插入图片描述

insignificant555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局学习博客

学习目标：一周掌握基本前端页面布局学习内容：1.圣杯布局2.position相对定位属性3.文档流…学习产出：技术笔记网页博客下面展示代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> &
复制链接

扫一扫