HTML+CSS:构建网站不可不知的18个模块!

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集

295篇原创内容-更多前端系列内容可以go公众.h:云桃桃

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

后台回复“前端电子书”可获取20+本精选电子书

CSS 基础知识部分,基本说完了。接下来,我们从网站模块构成的角度考虑,来看下一个网站通常由哪些常见的模块组成的。

  1. 头部(Header):网站的最顶部区域,通常包含导航栏、网站标志(Logo)、搜索栏等。比如,tb 的,jd 的。

图片

图片

  1. 导航栏(Navigation):允许用户访问网站的不同部分,可能包括下拉菜单、侧边导航或底部导航。比如,这部分。

    图片

  2. 横幅(Banner):通常位于页面顶部或导航栏下方,用于展示重要的信息、广告或视觉元素。比如,jd 顶部的这一块。

    图片

  3. 侧边栏(Sidebar):页面的侧边区域,可能包含额外的导航链接、最新文章、社交媒体插件等。比如,zh 的这块。

    图片

  4. 主要内容区(Main Content):页面的核心区域,用于展示文章、产品列表、服务介绍等主要内容。这个就不多说了,比如 jd 的商品列表,点开之后的商品详情等。

    图片

  5. 信息区(Info Blocks):提供关于产品或服务的详细信息,可能包括图标、文本和链接。这个就比较常见了,单个产品界面。

  6. 轮播图(Slider):自动或手动切换的图片或内容展示区。比如,tb 这块,定时隔几秒换一张,也可以手动切换。

图片

  1. 页脚(Footer):页面底部,通常包含版权信息、联系信息、网站地图、隐私政策等。比如,wyyyy 的这部分。每个备案的网站几乎都有。

    图片

  2. 新闻或博客区(News/Blog Section):展示最新的新闻、文章或博客帖子。

  3. 服务区(Services Section):列出网站提供的各种服务或产品。

  4. 产品展示区(Products Section):电子商务网站中用于展示产品。

  5. 用户评价或推荐区(Testimonials):展示客户的评价或推荐。

  6. 表单(Forms):用于用户输入信息,如联系表单、注册表、登录框等。这个比较常见的。

  7. 分页(Pagination):当内容需要分成多个页面时使用。比如,tb 商店的。

    图片

  8. 搜索结果区(Search Results):展示搜索查询的结果。

  9. 社交媒体链接(Social Links):提供到社交媒体页面的快速链接。

  10. 响应式设计(Responsive Design Elements):确保网站在不同设备上都能良好展示。

  11. 后端管理面板(Admin Panel):用于后台类网站内容管理的区域。

OK,以上就是一些普通网站的 18 个常见模块了,普通网站大差不差是由这些组成的。了解这些以后,有以下几点好处:

  1. 在开始编写代码之前,了解不同模块可以帮助新手更好地规划网页布局。

  2. 在团队项目中,了解网站的模块化有助于新手更好地与设计师、后端开发者和项目经理沟通和协作。

  3. 了解网站的组成部分是前端开发的起点,有助于以后持续学习更高级的技术框架(比如,vue,react),如状态管理、性能优化等。

那最终,还是要多练习啊,才能把 CSS 网站布局做好。

以上,本文完。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4831.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python】调整图像大小_自定义调整、等高宽调整

【python】调整图像大小_自定义调整、等高宽调整 【先赞后看养成习惯】求点赞+关注+收藏😀 文章目录 【python】调整图像大小_自定义调整、等高宽调整1、安装 Pillow 库:2、加载图像:3、使用 resize 方法调整图像大小:4、保持图像宽高比:5、保存调整大小后的图像:在Py…

virtualbox 网络设置实现主机和虚拟机互相访问

前言 一般来说,virtualbox 虚拟机的上网模式是 NAT。这样虚拟机可以上网并访问宿主机,但宿主机无法访问虚拟机,也无法 ping 通。下面介绍双网卡模式,实现虚拟机和宿主机能够互相访问 ping 通。 双网卡模式 进入虚拟机的网络设置…

贪心算法在找零问题中的应用

贪心算法在找零问题中的应用 引言a. 贪心算法求解找零问题算法设计算法证明 b. 硬币面额为c的幂时的贪心算法证明算法设计算法证明 c. 设计使贪心算法失效的硬币面额组合d. 通用找零算法设计算法设计算法实现(伪代码)算法实现(C代码&#xff…

基于SpringBoot和PostGIS的各省与地级市空间距离分析

目录 前言 一、PostGIS时空库 1、时空表设计 2、空间数据管理与查询 二、后台接口设计 1、ORM层设计与实现 2、业务层设计与实现 3、控制层设计 三、web可视化设计与实现 1、省份范围展示 2、城市距离可视化 3、成果展示 总结 前言 在上一篇博客中基于Java和GDAL实…

光伏电站信息化管理系统有哪些?

随着科学技术的进步,信息化管理系统在企业中得到广泛应用,光伏企业亦是如此,标志着光伏企业的管理现代化水平和信息化水平。光伏电站信息化管理系统有哪些? 一、鹧鸪云光伏业务管理专家 是一款覆盖光伏项目全流程的管理平台&…

Flutter:继承接口类,并将多个子类实例化

接口类 abstract class Animal {late String name;void eat() {} }子类 class Dog implements Animal{overridevoid eat() {print("Dog eat");}overridelate String name; }class Cat implements Animal{overridevoid eat() {print("cat eat");}override…

充电桩选型对比:ESP32-S3模组和ESP32-C3模组谁更合适

随着新能源电车的普及,全国各地和海外都开始加紧安装充电桩,运城到2025年年底,实现充电桩城镇居住小区全覆盖,截至今年3月底,泉州市新增充电桩居民报装1.68万户。 启明云端是国内领先的物联网通讯产品和整体解决方案供应商,有非常…

全面监控支撑业务系统的IT软硬件,确保企业信息化稳健运行

在当今高度信息化的时代,企业信息化业务系统的稳定运行显得尤为重要。为了确保信息化业务系统的连续性和高效性,企业需要对这些系统的关键组件进行实时监控和管理。监控易产品,以其强大的信息化业务系统管理与监控功能,为企业提供…

Gromacs——教程学习(6)

谈谈怎么判断分子动力学模拟是否达到了平衡 在计算RMSD之前必须先通过最小二乘法将各帧结构相对于参考结构进行最大程度叠合,从而消除体系的整体运动而令RMSD只体现生物分子内部结构的变化,这称为align或者least squares fit。 需要注意的是&#xff0…

国产Sora诞生!清华团队发布Vidu大模型,可直接生成16秒视频

大模型之争已从单模态转向多模态。 4月27日,在2024中关村论坛年会未来人工智能先锋论坛上,清华大学联合北京生数科技有限公司正式发布了文生视频大模型——Vidu。 在会议上,清华大学人工智能研究院副院长、生数科技首席科学家朱军对外展示了…

stack,queue的模拟实现以及优先级队列

这篇博客用来记录stack&#xff0c;queue的学习。 stack的模拟实现 stack的模拟实现比较简单&#xff0c;先上代码 #pragma once #include<vector> #include<list> #include<deque> #include<iostream> using std::deque; using namespace std;name…

PyTorch中Torch.arange()函数详解

函数原型 arange(start0, end, step1, *, outNone, dtypeNone, layouttorch.strided, deviceNone, requires_gradFalse) -> Tensor 用法 返回大小为的一维张量&#xff0c;其值介于区间 为步长等间隔取值 参数说明 参数类型说明startNumber起始值&#xff0c;默认值&…

【Python的魅力】:利用Pygame实现游戏坦克大战——含完整源码

文章目录 一、游戏运行效果二、代码实现2.1 项目搭建2.2 加载我方坦克2.3 加载敌方坦克2.4 添加爆炸效果2.5 坦克大战之音效处理 三、完整代码 一、游戏运行效果 二、代码实现 坦克大战游戏 2.1 项目搭建 本游戏主要分为两个对象&#xff0c;分别是我方坦克和敌方坦克。用户可…

C++ 中的隐式类型转换

基本数据类型的转换(不是重点) int i 42; double d i; // int 自动转换为 double 类类型转换: 如果一个类定义了接受单一参数的构造函数&#xff08;且该构造函数未被声明为 explicit&#xff09;&#xff0c;那么该构造函数可以被用来进行隐式转换,可以理解为int被隐式转…

告别盲目投放,Xinstall让App广告效果一目了然

在移动互联网时代&#xff0c;App广告的投放已经成为企业营销的重要手段。然而&#xff0c;广告主在投放广告后&#xff0c;如何有效追踪广告效果、衡量广告ROI&#xff0c;一直是困扰他们的难题。今天&#xff0c;我们就来聊聊Xinstall这家国内专业的App全渠道统计服务商&…

计算一个结构的平方

在行列可自由变换的平面上计算3a1*3a1 得到的结构应该有9个点&#xff0c;并且点的分布有3a1的特征 这个9点结构可以化简成 1 1 1 1 1 1 1 1 1 显然这个结构可以再次平方&#xff0c;得到 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 …

python:reportlab 生成pdf:基本用法。

1.首先&#xff0c;打开cmd&#xff0c;安装reportlab pip install -i https://pypi.tuna.tsinghua.edu.cn/simple reportlab #从清华镜像安装更快 然后就可以使用其基本用法。 from reportlab.lib.pagesizes import letter from reportlab.pdfgen import canvasdef genera…

Day43 JDK1.8新特性 下 接口的类优先原则和接口冲突,日期时间组件,重复注解

Day43 JDK1.8新特性 1.接口的默认方法与静态方法 从JDK1.8开始&#xff0c;接口中可以有默认方法&#xff0c;既default修饰的方法&#xff0c;此方法可以让接口的实现类所调用&#xff0c;而接 口中的静态方法直接用接口名调用即可 public class Test1 {Testpublic void test…

小程序评分/关键词/UV优化助力小程序登顶

随着小程序市场的日益繁荣&#xff0c;小程序搜索排名优化成为了众多开发者关注的焦点。小程序搜索排名被很多因素影响着&#xff0c;关键词、评分还有uv&#xff08;授权&#xff09;等。在本文小柚和各位老板分享如何有效优化小程序搜索排名的经验。 一、关键词策略 关键词是…

Python | Leetcode Python题解之第55题跳跃游戏

题目&#xff1a; 题解&#xff1a; class Solution:def canJump(self, nums: List[int]) -> bool:n, rightmost len(nums), 0for i in range(n):if i < rightmost:rightmost max(rightmost, i nums[i])if rightmost > n - 1:return Truereturn False