Web前端初步——布局0

最新推荐文章于 2023-02-10 11:25:35 发布
最新推荐文章于 2023-02-10 11:25:35 发布
阅读量776 收藏
点赞数
分类专栏： Web前端初步 文章标签： 布局 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26864077/article/details/51271995
版权

大笑脱离搬砖，走深度路线大笑——对自己的期待

布局思想——利用CSS

在设计网页或者仿制一个网页前，弄清楚其网页布局是至关重要的。就像你学习写一个字，总要弄清楚它是上中下结构还是左右结构吧，否则贸然下手，只能是涂鸦喽~

就像字的通用结构无非有独体字（大 ）、左右结构（纺）、左中右结构（树）、 上下结构（雷）、上中下结构（意）、 半包围结构（同)、 全包围结构（围 ）、品字形结构（晶）等这几种，就我现在的认识范畴，大齐把通用的布局结构化为一列布局、两列布局、及混合布局这三种，其余复杂的布局均是由这三种结构嵌套形成。

   先介绍下涉及到的额外tip点：自适应概念——当你缩小|扩大浏览器界面时，其布局模块也同比例缩小|扩大。

                                                       清除初始格式——body{margin:0;padding: 0}
                                                       设置div居中   ——margin: 0 auto

                                                       设置自适应宽度|高度——使用百分比%；如设置宽度自适应，width:30%

                                                       设置固定宽度|高度——使用像素px;如设置固定宽度，width：500px，或者亦可在其外加一个div作为其父盒子。

一：一列布局（由顶部+主体+底部三部分构成）

a、界面布局展示：


b、html+CSS实现一列布局的代码结构及不断进阶

      第一种：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一列布局</title>
    <style type = "text/css">
    body{margin:0;padding: 0}
    div{text-align:center;font-size:30px;}
    .top{height:100px;background: #F66060}
    .mainbody{width:50%;height:800px;background:#F68950;margin: 0 auto}
    .foot{width:50%;height:50px;background: #957AEA;margin: 0 auto}
    </style>
</head>
<body>
<div class="top">top</div>
<div class="mainbody">mainbody</div>
<div class="foot">foot</div>
</body>
</html> 

在这种方法下，.top{}体中未设置width,使其自适应浏览器宽度，而采用的width:50%的形式，表明其宽度为浏览器自适应宽度的50%。当你缩小或扩大浏览器时,top,mainbody和footy也会同比例改变。

   第二种：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一列布局v0</title>
    <style type = "text/css">
    body{margin:0;padding: 0}
    div{text-align:center;font-size:30px;}
    .top{height:100px;background: #F66060}
    .mainbody{width:900px;height:800px;background:#F68950;margin: 0 auto}
    .foot{width:900px;height:50px;background: #957AEA;margin: 0 auto}
    </style>
</head>
<body>
<div class="top">top</div>
<div class="mainbody">mainbody</div>
<div class="foot">foot</div>
</body>
</html>

红色标记即为与第一种方法不同的地方，width属性通过px值设为固定值，不随浏览器的缩小或扩大而改变。

二、两列布局（left+right两部分组成）

a、页面布局展示

第一种方法下实现的界面：


第二种方法实现的界面：


b、html+CSS实现两列布局的代码结构及不断进阶

第一种方法：自适应宽度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局v0</title>
<style type="text/css">
        body{margin: 0;padding: 0}
div{text-align: center;font-size: 30px}
.left{width:30%;height:500px;background: #66DDA2;float: left;}
.right{width:70%;height:500px;background: #D6D838;float: right;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>

第二种方法：固定宽度值（目前多使用）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局v1</title>
<style type="text/css">
body{margin: 0;padding: 0}
div{text-align: center;font-size: 30px}
.main{width:800px;height:500px;margin:0 auto;}
.left{width:30%;height:500px;background: #5F5ACD;float: left;}
.right{width:70%;height:500px;background: #D35337;float: right;}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

当然，你也可以将蓝色部分代码替换为：

                 .left{width:240px;height:500px;background: #5F5ACD;float: left;}
.right{width:560px;height:500px;background: #D35337;float: right;}

会得到同样的效果。

拓展：

那么，你是否会自己编写多列布局了呢？这里，我给出一个四列布局的代码示范：

彩蛋：

a 页面展示:


b.代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四列布局</title>
<style type="text/css">
body{text-align: center;font-size: 30px}
div{margin: 0;padding: 0}
.main{width:800px;height:500px;margin: 0 auto}
.col0{width:20%;height:500px;background: #EFCDDA;float: left}
.col1{width:24%;height:500px;background: #F66BAC;float: left}
.col2{width:28%;height:500px;background: #F14646;float:left;}
.col3{width:28%;height:500px;background: #F60707;float:left;}
</style>
</head>
<body>
<div class="main">
<div class="col0">col0=20%</div>
<div class="col1">col1=24%</div>
<div class="col2">col2=28%</div>
<div class="col3">col3=28%</div>
</div>
</body>
</html>

那么，让我们加大一下难度，如果要求如下：

第一：总体布局要求不变，居中，宽度为800px,高度为500px

第二：四列高度均为500px

第三：col0宽度为100px,col2宽度为200px,col3宽度为100px,

第四：col1宽度根据输入文字的长短自适应宽度

a、界面展示


b、代码——去掉浮动方法，通过相对定位和绝对定位以及margin相关设置加以实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四列布局</title>
<style type="text/css">
body{text-align: center;font-size: 20px}
div{margin: 0;padding: 0}
.main{width:800px;height:500px;margin: 0 auto;position:relative;}
.col0{
width:100px;height:500px;background: #EFCDDA;
position: absolute;top:0;left:0;
}
.col1{height:500px;background: #F66BAC;margin: 0 300px 0 100px}
.col2{width:200px;height:500px;background: #F14646;
position: absolute;top:0;right:100px;
}
.col3{width:100px;height:500px;background: #F60707;
position: absolute;top:0;right:0;
}
</style>
</head>
<body>
<div class="main">
<div class="col0">col0=100px</div>
<div class="col1">col1=自适应宽度<br />
在就像字的通用结构无非有独体字（大 ）、左右结构（纺）、左中右结构（树）、 上下结构（雷）、上中下结构（意）、 半包围结构（同)、 全包围结构（围 ）、品字形结构（晶）等这几种，就我现在的认识范畴，大齐把通用的布局结构化为一列布局、两列布局、及混合布局这三种，其余复杂的布局均是由这三种结构嵌套形成。
</div>
<div class="col2">col2=200px</div>
<div class="col3">col3=100px</div>
</div>
</body>
</html>

进一步优化：若想实现col0与col1间隔50px,col1与col2间隔100px,该怎样实现呢？

a、界面展示：


b、代码：（蓝色部分即为修改的代码，将右边从300px变为400px,将左边从100px改为150px,大家若不明白，可搜索学习margin的相关使用方法）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四列布局</title>
<style type="text/css">
body{text-align: center;font-size: 20px}
div{margin: 0;padding: 0}
.main{width:800px;height:500px;margin: 0 auto;position:relative;}
.col0{
width:100px;height:500px;background: #EFCDDA;
position: absolute;top:0;left:0;
}
.col1{height:500px;background: #F66BAC;margin: 0 400px 0 150px}
.col2{width:200px;height:500px;background: #F14646;
position: absolute;top:0;right:100px;
}
.col3{width:100px;height:500px;background: #F60707;
position: absolute;top:0;right:0;
}
</style>
</head>
<body>
<div class="main">
<div class="col0">col0=100px</div>
<div class="col1">col1=自适应宽度<br />
在就像字的通用结构无非有独体字（大 ）、左右结构（纺）、左中右结构（树）、 上下结构（雷）、上中下结构（意）、 半包围结构（同)、 全包围结构（围 ）、品字形结构（晶）等这几种，就我现在的认识范畴，大齐把通用的布局结构化为一列布局、两列布局、及混合布局这三种，其余复杂的布局均是由这三种结构嵌套形成。
</div>
<div class="col2">col2=200px</div>
<div class="col3">col3=100px</div>
</div>
</body>
</html>

三、混合布局

a、页面展示


b、代码（其实就是将一列布局和两列布局的结构嵌套而成，就像“嵌套”一词中的”嵌“字，整体为上下结构，但下面又可拆解为左右结构）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>混合布局</title>
<style type="text/css">
body{margin:0;padding: 0}
div{text-align: center;font-size: 30px}
.top{height:100px;background: #59EAF2;}
.head,.main,.foot{width:800px;margin: 0 auto;}
.head{height: 100px;background: #3355DA;}
.main,.left,.right{height:500px;}
.left{width:30%;background: #42D47A;float: left;}
.right{width:70%;background: #9ADA24;float:right;}
.foot{height:50px;background: #F66418}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="foot">foot</div>
</body>
</html>

拓展：尝试实现以下界面


代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>混合布局v1</title>
<style type="text/css">
body{margin:0;padding: 0}
div{text-align: center;font-size: 30px}
.top{height:100px;background: #59EAF2;}
.head,.main,.foot{width:800px;margin: 0 auto;}
.head{height: 100px;background: #3355DA;}
.main,.left,.right{height:500px;}
.left{width:30%;background: #42D47A;float: left;}
.right{width:70%;background: #9ADA24;float:right;}
.foot{height:50px;background: #F66418}
.r_top{height:50px;background: #DE24C6;}
.r_main,.r_left,.r_mid,.r_right{height:450px;}
.r_main{position: relative;}
.r_left{width:100px;background: #611BBF;position: absolute;top:0;left:0;}
.r_mid{background: #E60B7A;margin: 0 130px 0 130px}
.r_right{width:100px;background: #881D1B;position: absolute;top:0;right:0;}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">
<div class="left">left</div>
<div class="right">
   <div class=r_top>r_top</div>
<div class="r_main">
<div class="r_left">r_left</div>
<div class="r_mid">r_mid</div>
<div class="r_right">r_right</div>
</div>
</div>
</div>
<div class="foot">foot</div>
</body>
</html>

那么，布局就学习到这啦奋斗

糖程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习——页面布局
weixin_51748707的博客
05-20 2847
1.常见的五种布局方式 1.静态布局： 给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。 优点：设计简单。 缺点：对于不同尺寸屏幕的兼容性不好，特别是移动端。 2.流式布局： 元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。 优点：页面元素宽高可以自适应调整。 缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。 3.自适应布局： 屏幕尺寸或分辨率变化时，页面元素会跟着变化。 缺点：页面元素不会随着窗口大小的调整而发生变化
页面顶部元素与body共享margin导致出现滚动条
huyao的博客
04-25 4800
body里面有个div，html和body高度都是100%，margin和padding都是0，内部div设置了一个margin-top，body就出现了滚动条。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; html,bo
WEB前端入门——基础标签
m0_55446673的博客
11-30 633
web学习笔记
web前端基础——定位
NGUP_LEE的博客
03-01 1772
1.1网页常见布局方式 1、标准流 块级元素独占一行——垂直布局 行内元素、行内块元素一行显示多个——水平布局 2、浮动 可以让原本垂直布局的 块级元素变成水平布局 3、定位 可以让元素自由的摆放在网页的任意位置 一般用于盒子之间的层叠情况 ...
web前端基础——rem移动适配
NGUP_LEE的博客
03-11 3118
文章目录1、rem是什么？2、rem媒体查询3、不同设备移动适配4、rem——flexible移动适配 1、rem是什么？ rem是目前好多企业都在使用的移动端界面的适配方案，是一种尺寸单位 rem单位 相对单位 rem单位是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 网页的根就是 html 标签 样例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
web前端基础——响应式布局BootStrap框架
NGUP_LEE的博客
03-15 649
文章目录1、BootStrap栅格系统 1、BootStrap栅格系统 所谓的栅格系统是指在Bootstrap3中，把我们的网页宽度等分成12等份，而每个内容占12份中对应的份数。
web前端技术——二、表格与框架
qq_46007633的博客
03-20 3839
表格和框架的一些基础的知识和属性，还有部分示例，通俗易懂。 注：本系列其他章节在最后有链接哦
web前端基础——Less语法
NGUP_LEE的博客
03-11 9863
在使用rem对移动端界面布局进行适配时，需要完成px单位到rem单位的转换，这个过程中的除法运算对于界面中很多个标签时，是很麻烦的，但是CSS又不支持计算写法，那么有什么办法可以解决这个问题呢？ 文章目录1、Less语法简介2、Less语法的运算3、Less语法快速生成选择器4、Less变量设置属性值5、Less文件的导入与导出5.1 导入5.2 导出5.3 禁止导出 1、Less语法简介 Less是一个CSS预处理器，Less文件后缀是.less 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力.
Web前端初步——HTML5
qq_26864077的博客
06-06 568
HTML5界面：HTML、CSS、JS在内的一套技术组合。 准备一个[编辑器（Sublime Text、Atom、Notepad++） 浏览器（Chrome、火狐等）查看/调试编写的HTML页面 HTML5语法对HTML语言进行了沿用，使用更简化，具体体现在： 1、DOCTYPE及字符编码更简洁 2、大小写都可以——但尽量还是规范点好 3、单双引号或无引号（在不存在空格时）均可——但尽
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
web前端——好玩的魔方.zip
12-04
这个项目旨在展示Web前端技术如何实现三维图形的交互与动画，同时也为学习者提供了一个有趣的实践平台。 首先，HTML（HyperText Markup Language）是构建网页的基础，它定义了页面的结构。在这个魔方项目中，HTML...
Web前端开发——简单讲解(完整版)
11-03
### Web前端开发基础知识点概述 #### 一、Web前端开发概览 Web前端开发是指创建网页或应用程序的用户界面部分的技术工作。它涉及到多种技术，包括但不限于HTML、CSS和JavaScript等，这些技术共同构建了一个网站的...
web前端——HTML+CSS
m0_64378422的博客
02-10 3384
web前端——HTML+CSS
Web前端基础——弹性布局display:flex
weixin_56182955的博客
04-03 816
display：元素显示的方式 display的取值： display:none 不生成盒子 display:inline 行盒 多个行盒 标签可在一行显示 display:block 块盒 块盒元素独占一行 display:其他 例如：flex Flex 容器：父元素 项目：子元素 主轴：X轴（默认） 交叉轴：y轴（默认） display不具有继承性 display：flex； 添加flex的标签就是容器，子元素就是项目 功能： 1.所有的项目默认情况在
Web前端初步——IDE工具选择和emment插件
qq_26864077的博客
04-21 1292
在工具选择上，个人比较喜欢Brackets和Subliment,这里我记录下目前使用的Subliment text3的emment插件安装关键点及相应安装文件。
Web前端初步——Javascript(0)
qq_26864077的博客
05-03 507
1、引入js的方法 第一种方法：若要在html代码中填写javascript语句，则在.........内添加主体：注：看个人需要确定放置位置。一般放在网页的head或者body部分。                       #预添加的 javascript语句         第二种方法：引用js外部文件  将HTML文件和JS代码分开,单独创建一个JavaScript文件(
vscode:Web前端——登录、注册界面
最新发布
06-07
首先，登录和注册界面是Web前端的常见功能，可以使用HTML、CSS、JavaScript等技术来实现。以下是一些简单的步骤： 1.设计页面布局：可以参考一些常见的登录、注册页面的设计，例如输入框、按钮的布局和样式等。 2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值