百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

初学者:HTML+CSS静态网页开发——网页布局

zhezhongyun 2024-12-05 17:58 85 浏览

作者有话要说：此文是作者自己的学习总结，供大家参考，不足之处还请见谅和指正~

在学习完了基本的HTML+CSS标签之后，就可以尝试写一些简单的静态网页啦~练习的过程是充满成就感的，值得反复体会和思考！

网页结构

简单提一下常用于表示网页机构的标签：

header 整个页面的标题（也可表示一个内容区块）

main 页面主体部分

footer 整个页面的脚注（也可表示一个内容区块）

article 一块与上下文无关的独立内容

section 表示一个内容区块，常嵌套于article中

aside 在article之外与其内容相关的辅助信息

nav 页面中的导航栏

figure 表示一段独立的流内容

三栏布局

一个网页最少由header、main、footer三部分组成，那么从三栏布局开始练习吧。无论是上-中-下结构还是左-中-右结构，关键都在于设置中间部分的宽高或位置。我们知道网页的主体内容（版心）是处于居中位置、随网页缩放而缩放的。那么左右（或上下）两栏固定后，须使中间部分自适应。以下总结了几种三栏布局的方法，以左-中-右结构为例：

先写左中右三个盒子。

1.使用float

需要注意的是，使用float方法需要在body部分改一下center盒子的位置，把center盒子放在right盒子之后（否则right盒子会跑到下一行右侧）。以上代码中，设置center盒子的左右外边距来实现宽度自适应，若父盒子layout无高度要求，可用min-height实现高度自适应。不加高度自适应也可，在未设置center盒子高度的情况下本身高度会随文本内容的扩充而自动增加。

2.使用position

三个盒子都分别使用绝对定位，left、right分别距离窗口左右端为0，center距离窗口左端的间距为left盒子的宽度，距离窗口右端的间距为right盒子的宽度。

3.使用flex

须给父盒子layout加上弹性盒属性，给center盒子设置大于0的flex值，利用弹性盒自动拉伸效果实现center盒子的宽度自适应。

4.使用table

给父盒子layout设置为table，宽度为整个窗口，给三个子盒子都设置为table-cell，此时三个盒子就有了表格的属性。固定left、right盒子的宽度，center盒子自动占满父盒子剩余宽度。需要注意的是，因为父盒子具有表格属性，当left、center、right三者中任意一个盒子高度改变时，其他两个盒子会跟着改变。

5.使用grid

将父盒子layout设置为grid，宽度为整个窗口，用template-rows设置行高，用template-columns分别设置三个盒子的宽度，其中auto实现center盒子的宽度自适应。需要注意的是，这里用template-rows设置了固定的行高，因此center的高度不会自适应。

仿写练习

适合初学者练习的网页有很多，可以打开网址之家去里面挑一挑，以静态页面为主的网站。作者自己是以豆瓣首页（局部）进行练习的。练习过程中，千万不要去看网站源码（此时你也有很多地方看不懂），先试着自己分析和思考，用所学的知识看看能做到哪一步。

放上对比图，还是有很多不一样的地方，网页也没有功能，作为初学者这都是正常的。静态网页练习的主要目的是熟悉HTML+CSS布局，培养做网页的思维。具体细节随着学习的深入，可以让网页更还原、页面更精美，网页功能也能逐步完善起来，实现真正的网站开发。

相关推荐

Python入门学习记录之一:变量_python怎么用变量

写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...

python变量命名规则——来自小白的总结

python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...

Python入门学习教程:第 2 章 变量与数据类型

2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...

绘制学术论文中的“三线表”具体指导

在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...

Python基础语法知识--变量和数据类型

学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...

一文搞懂 Python 中的所有标点符号

反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...

Python变量类型和运算符_python中变量的含义

别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...

从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序

在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...

Python中下划线 ‘_’ 的用法，你知道几种

Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...

解锁Shell编程:变量_shell $变量

引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...

一文学会Python的变量命名规则!_python的变量命名有哪些要求

目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...

更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for

src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...

C++第五课:变量的命名规则_c++中变量的命名规则

变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....

Rust编程-核心篇-不安全编程_rust安全性

Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...

探秘 Python 内存管理:背后的神奇机制

在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...

一周热门
最近发表
标签列表