网页布局 —— 基础篇

最新推荐文章于 2024-04-26 15:21:52 发布

H_36627117

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量2.5k

点赞数 2

分类专栏：网页布局文章标签： html css

本文链接：https://blog.csdn.net/qq_36627117/article/details/108202109

版权

制作网站中的静态网页最重要的是什么呢？很多人肯定知道，当然是布局了。那什么是布局呢？页面布局是对页面的文字、图像或表格进行格式化版式排列。想制作出好看的网页，就必须要弄懂网页布局所用到的知识，那么需要用到哪些知识?对于初学者而言，可能比较陌生，对网页布局这块可能还不能很好的掌握，布局最主要是就是css样式，要制作好看的网页，这是最基础的部分。所以就要灵活运用css，一般css都是配合div（块元素）使用，来实现好看的页面，所以大家可以看看一些网页中常见的布局方式。

网页布局一般分为一列布局，二列布局，三列布局和混合布局，四种布局方式。

1、一列布局

一列布局多用于网站的首页，比如360搜索，一列布局的结构简洁明了，主题突出，适合排列简单的内容，不适合多行内容，通常一列布局都是固定宽度的。

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>一列布局</title>
       
      <style>
         body{ margin:0; padding:0;}
         .top{ height:100px; background:blue; } /*在实际开发中，布局中的高度不能固定，让它根据内容进行自适应调整*/
         .main{ width:500px; height:300px; background:#ccc; margin:0 auto;}
         .footer{ width:500px; height:100px; background:pink; margin:0 auto;}
      </style>
   </head>
   <body>
      <div class="top">top</div>
      <div class="main">main</div>
      <div class="footer">footer</div>
   </body>
</html>

实际效果图：

最低0.47元/天解锁文章

H_36627117

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
网页布局 —— 基础篇

制作网站中的静态网页最重要的是什么呢？很多人肯定知道，当然是布局了。那什么是布局呢？页面布局是对页面的文字、图像或表格进行格式化版式排列。想制作出好看的网页，就必须要弄懂网页布局所用到的知识，那么需要用到哪些知识?对于初学者而言，可能比较陌生，对网页布局这块可能还不能很好的掌握，布局最主要是就是css样式，要制作好看的网页，这是最基础的部分。所以就要灵活运用css，一般css都是配合div（块元素）使用，来实现好看的页面，所以大家可以看看一些网页中常见的布局方式。网页布局一般分为一列布局，二列布局，三.
复制链接

扫一扫