【CSS|第1期】网页设计的演变:从表格布局到Grid布局

日期: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年代初,当时互联网刚刚兴起。最早的网页设计主要是基于HTMLHyperText Markup Language)的简单文本和图像展示 。随着互联网的普及和技术的进步,网页设计逐渐发展成为一个独立的领域,涵盖了视觉设计、用户体验、交互设计等多个方面。

三、CSS的诞生与作用


1、CSS是什么

CSSCascading Style Sheets层叠样式表 )是一种用于描述 HTMLXML(包括如 SVGMathML 等各种 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),并利用 toprightbottomleft 属性来精确控制元素在页面中的位置。常用于创建特殊效果,比如:

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、标准化

网页设计的标准化主要体现在 HTMLCSSJavaScript 等技术的规范和标准上。W3CWorld Wide Web Consortium)是制定这些标准的主要组织。标准化的好处包括:

  • 兼容性:不同浏览器和设备之间的兼容性更好。
  • 可维护性:代码更加规范,易于维护和更新。

2、模块化

模块化是指将网页设计和开发过程中的各个部分分解成独立的模块,每个模块负责特定的功能或样式。模块化的优点包括:

  • 可重用性:模块可以在不同的项目中重复使用,减少开发时间和成本。
  • 可维护性:模块化的代码结构清晰,易于维护和更新。
  • 团队协作:模块化使得团队成员可以并行工作,提高开发效率。

七、结语


网页设计从最初的 表格布局 发展到如今的 Flex布局Grid布局 ,经历了不断的演变和进步。CSS的出现使得网页设计更加灵活和易于维护,而标准化和模块化则进一步提高了网页设计的效率和质量。


参考文章:


版权声明:本文为博主原创文章,如需转载,请给出:

原文链接:https://blog.csdn.net/qq_35844043/article/details/142137348

相关推荐
清灵xmf1 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨1 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL1 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
薛一半2 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾2 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage2 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发2 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火3 小时前
Web Components 是什么
前端·web components
顾菁寒3 小时前
WEB第二次作业
前端·css·html