日期:2024年9月9日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海......
注释:如果您觉
在这里插入代码片
得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^1.01^365^ = 37.7834;0.99^365^ = 0.0255
1.02^365^ = 1377.4083;0.98^365^ = 0.0006
文章目录
一、前言
互联网的兴起带来了网页设计的革命,经历了数十年的发展和演变。从最初的简单文本和图像展示 ,到如今的复杂交互和响应式设计,网页设计的技术和方法不断进步。今天,让我们一起回顾网页设计的发展历程,探索从表格布局到CSS、Flex布局,再到Grid布局的演变。
二、网页设计起源
网页设计的起源可以追溯到20世纪90年代初,当时互联网刚刚兴起。最早的网页设计主要是基于HTML
(HyperText Markup Language
)的简单文本和图像展示 。随着互联网的普及和技术的进步,网页设计逐渐发展成为一个独立的领域,涵盖了视觉设计、用户体验、交互设计等多个方面。
三、CSS的诞生与作用
1、CSS是什么
CSS
(Cascading Style Sheets
,层叠样式表 )是一种用于描述 HTML
或 XML
(包括如 SVG
、MathML
等各种 XML
方言)文档样式的样式表语言,它可以控制网页元素的外观,如字体、颜色、布局 等。CSS
的主要作用是将网页的内容(HTML
)与样式分离,使得网页设计更加灵活和易于维护。
2、CSS的提出场景
在早期的网页设计中,HTML
不仅用于结构化内容,还用于定义内容的样式,样式和结构是混合在一起的,这导致了 HTML
代码的冗长、网页的维护和修改非常困难。为了解决这个问题,CSS
被提出,它将网页的内容 和样式分离,大大提高了网页的可维护性和可重用性。
四、布局方式的演变
1、表格布局
在 CSS
广泛应用之前,网页布局主要依赖于HTML表格(<table>
)。表格布局的优点是简单易用,但缺点也很明显:
- 可维护性差:表格嵌套复杂,修改布局需要大量修改HTML代码。
- 性能问题:复杂的表格布局会导致页面加载速度变慢。
- 灵活性差:表格布局难以实现复杂的响应式设计。
以下例子,我们将通过表格的行和列来划分网页的不同区域:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格布局</title>
</head>
<body>
<table>
<tr>
<td colspan="2">头部</td>
</tr>
<tr>
<td>侧边栏</td>
<td>主体内容</td>
</tr>
<tr>
<td colspan="2">底部</td>
</tr>
</table>
</body>
</html>
2、Div+CSS
随着 CSS
的发展,网页布局逐渐转向了 Div+CSS
模式。这种模式下,HTML
用于定义内容的结构,而 CSS
用于定义内容的样式和布局。例如:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div+CSS布局</title>
<style>
*{
margin:0;
padding: 0;
}
#header {
height: 100px;
background-color: #ccc;
}
#sidebar {
width: 200px;
float: left;
background-color: #eee;
}
#main-content {
margin-left: 200px;
background-color: #fff;
}
#footer {
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="header">头部</div>
<div id="sidebar">侧边栏</div>
<div id="main-content">主体内容</div>
<div id="footer">底部</div>
</body>
</html>
3、Flex布局
Flex
布局(Flexible Box Layout Module
)是 CSS3
中引入的一种新的布局模式,旨在提供一种更加灵活和强大的方式来排列和对齐容器中的子元素。Flex
布局特别适用于需要响应式设计的场景。例如:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
</div>
</body>
</html>
4、Grid布局
Grid
布局(CSS Grid Layout
)是 CSS3
中引入的另一种强大的二维布局系统,旨在提供一种更加直观和灵活的方式来创建复杂的网页布局。Grid
布局特别适用于需要精确控制行和列的场景。例如:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grid布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1;
background-color: #ccc;
}
.item2 {
grid-column: 3;
grid-row: 1 / 3;
background-color: #eee;
}
.item3 {
grid-column: 1;
grid-row: 2;
background-color: #fff;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">项目 1</div>
<div class="item2">项目 2</div>
<div class="item3">项目 3</div>
</div>
</body>
</html>
五、特别的布局方式
1、绝对定位布局
绝对定位布局通过设置元素的绝对定位(position: absolute
),并利用 top
、right
、bottom
、left
属性来精确控制元素在页面中的位置。常用于创建特殊效果,比如:
html
<div style="position: absolute; bottom: 20px; right: 20px;">客服按钮</div>
它可以创建出固定在页面特定位置的元素 ,如弹出框、固定导航栏等。但需要注意管理好元素的堆叠顺序和布局结构。
- 绝对定位的元素会脱离文档流,因此它原来的位置不会被保留,下面的元素会向上移动来填补空位。
- 绝对定位的元素可以重叠其他元素。
- 通常,绝对定位的元素需要一个相对定位的父元素作为定位的参考点。
- 如果没有设置偏移属性(
top
,right
,bottom
,left
),则绝对定位的元素会位于其父元素的左上角。
2、相对定位布局
相对定位布局是元素相对其原本在文档流中的位置进行偏移。例如:
html
< img src="image.jpg" alt="图片">
<p style="position: relative; left: 10px;">这是图片的描述文字</p >
相对定位是CSS布局中一个非常灵活的工具,在不影响其他元素位置的情况下,对元素进行微调,实现更细致的布局调整。
- 相对定位的元素不会脱离文档流,因此它下面的元素不会上移来填补它的位置。
- 相对定位通常用于微调元素的位置,或者作为绝对定位元素的参考点。
- 如果没有设置偏移属性(
top
,right
,bottom
,left
),则相对定位的元素不会发生任何位置上的变化。
3、框架布局(Frame
布局)
在 HTML
中,框架布局(Frame Layout
)指的是使用框架集(<frameset>
)和框架(<frame>
)元素来创建一个包含多个 HTML
文档的页面布局。不过,需要注意的是,HTML
框架(frames
)已经不被推荐使用,并且在 HTML5
中已经被移除。现代的网页设计更倾向于使用 CSS
框架 或 内联框架(<iframe>
) 来实现类似的功能。
html
<!DOCTYPE html>
<html>
<head>
<title>框架布局示例</title>
</head>
<frameset rows="25%, 75%">
<frame src="top.html" noresize="noresize">
<frameset cols="25%, 75%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>
本示例中,<frameset>
元素定义了页面的框架布局,而 rows
属性定义了框架集的行划分,cols
属性定义了框架集的列划分。
<frame src="top.html" noresize="noresize">
:定义了一个框架,其内容来自 "top.html
" 文件,且用户不能调整框架的大小。<frameset cols="25%, 75%">
:在主框架集内部定义了一个新的框架集,它将剩余空间分为两列,比例为25%
和75%
。
每个<frame>
元素都指向一个HTML
文件,该文件将显示在相应的框架中。
虽然在老式网站系统中曾有应用,但由于不利于搜索引擎优化和页面加载速度慢等缺点,在现代网页设计中使用较少。
六、标准化和模块化
1、标准化
网页设计的标准化主要体现在 HTML
、CSS
和 JavaScript
等技术的规范和标准上。W3C
(World Wide Web Consortium
)是制定这些标准的主要组织。标准化的好处包括:
- 兼容性:不同浏览器和设备之间的兼容性更好。
- 可维护性:代码更加规范,易于维护和更新。
2、模块化
模块化是指将网页设计和开发过程中的各个部分分解成独立的模块,每个模块负责特定的功能或样式。模块化的优点包括:
- 可重用性:模块可以在不同的项目中重复使用,减少开发时间和成本。
- 可维护性:模块化的代码结构清晰,易于维护和更新。
- 团队协作:模块化使得团队成员可以并行工作,提高开发效率。
七、结语
网页设计从最初的 表格布局 发展到如今的 Flex
布局 和 Grid
布局 ,经历了不断的演变和进步。CSS
的出现使得网页设计更加灵活和易于维护,而标准化和模块化则进一步提高了网页设计的效率和质量。
参考文章:
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/142137348