用html和css完成指定布局

最新推荐文章于 2024-08-27 14:09:09 发布

23全栈陈泓宇

最新推荐文章于 2024-08-27 14:09:09 发布

阅读量141

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/Love_only_/article/details/134676557

版权

学习完有个html和css的有关基础知识后，为检验学习成果，现在需要用html和css完成指定的网页布局：

1.布局黄色背景，绿色区域

首先打开html编辑器（我用的是vscode），新建一个html文件，补全html，head，body标签

同时将页面背景设置为黄色（这样更方便布置紫色和绿色区域），即用body标签中的style属性，添加值background-color：yellow，代码如下

<body style="background-color: yellow;">
    </body>

接着开始布置绿色区域，这里需要用到css的盒模型，并把该盒模型背景颜色设置为绿色，具体操作如下：在body中增加一个div标签，用css的class选择器将该标签的宽度设置为100%（相对浏览器的窗口，下同），高度设置为12.5%，同时将该盒子的背景颜色定义为绿色，但直接设置不会出现绿色区域，这是因为必须将浏览器页面固定，要利用css选择器选择html和body标签增加属性overflow，值设为hidden，此时便可出现绿色区域；但此时该盒子并不能挤满左上角，如下：

因为body本质也是个巨大的盒模型，它占据的页面的大部分空间，但也存在边角空隙，这些空隙就是body盒模型外面的margin外边距，浏览器默认为8，所以要去除这里的空隙就要手动将值设为0，代码如下：

        <style type="text/css">
             .top{width:100%;height:12.5% ;background-color: green;}
             html,body{margin: 0px;height: 100%;background-color: yellow;overflow: hidden;}
        </style>

2.布局紫色区域

紫色区域再绿色区域的左下角，同样的的需要用到盒模型，但此时用的是span标签，但span是行内元素，无法直接调整大小，所以要利用到css选择器中display：inline-block；此时span盒模型就可以设置大小，同时一行内还可以容纳多个盒模型（div盒模型一行只能容纳一个，功能有些）。接着在该span选择器中设置背景颜色，长，宽,外边距等即可，关键代码如下：

 <style>
        .inner{margin:0px ;width: 20%;height: 100%;
       background-color: purple;display: inline-block;}
  </style>

3.布置各区域内方块

布置区域内方块包括两部分：制作方块（方块长什么样子）和定位方块（方块在哪）。

制作方块：先拿黄色区域的方块开刀，使用display为inline-biock的span盒模型，设置背景颜色，margin等属性。

定位方块：写入span标签，就可以在网页中看到方块，但位置不对，此时就要在选择器中加入position属性，通过它对方块进行定位，移动到指定的位置

其他区域的方块可以如法炮制，关键代码如下：

<style>
      .inner2{width: 300px; ;height: 20%; background-color:blue;display: inline-block;
       margin-bottom: 0%;margin-left: 90px;margin-right: 0px;position: relative;top: -600px;}
       .inner3{width:210px ;height: 70px ;background-color:rgb(162, 13, 13);display: inline-block; margin: 18px 20px;}
       .inner4{width:240px;height: 85px;background-color:peru ;display: inline-block;
         position: relative;bottom: 1080px;margin-left:25px ;}  
</style>

      <span class ='inner2'></span>
      <span class ='inner2' style="margin-left: 70px;"></span>
      <span class ='inner2' style="margin-left: 70px;"></span>
      <span class ='inner2' style="margin-left :401.9px ; margin-top: 70px; " ></span>
      <span class ='inner2' style="margin-left: 70px; margin-top: 70px;"></span>
      <span class ='inner2' style="margin-left: 70px; margin-top:70px;"></span>
      <span class="inner4"></span>
      <br>
      <span class="inner4" style='margin-top:40px ;' ></span>
      <br>
      <span class="inner4" style='margin-top:40px ;'></span>

最终制作结果如下：

4.总结

本次学习让我基本了解了html和css的基础知识和使用方法，为我后续的学习前端打下了坚实的基础，但同时依然有不足之处：不过熟练，代码冗余呆板，同时用以上方法做出来的网页布局稳定性差，实用性不高，在盒子内输入任何内容都会打乱布局，这点需要后续改进。尽管如此，我仍对后续的学习怀有极高的热情，相信自己可以越做越好。