当前位置： 首页 > news >正文

html5cssjs代码 024 响应式布局示例

news 2026/5/31 11:20:10

html5&css&js代码 024 响应式布局示例

  • 一、代码
  • 二、解释

该HTML代码重点在于构建一个带有响应式设计的两栏布局网页，包含页头、导航条、主要内容区（左右两列）和底部区域，并运用CSS样式设置页面元素的布局、颜色、字体、间距等视觉表现，确保在不同屏幕尺寸下网页布局能灵活调整。
在这里插入图片描述

一、代码

<!DOCTYPE html>
<html lang="zh-cn"><head><title>网页布局 编程笔记 html5&css&js</title><meta charset="utf-8" /><style>* {/*  */box-sizing: border-box;}body {font-family: "微软雅黑", sans-serif;padding: 10px;background: #f1f1f1;}/* 头部标题 */.header {padding: 30px;text-align: center;background: white;}.header h1 {font-size: 50px;}/* 导航条 */.topnav {overflow: hidden;background-color: #333;}/* 导航条链接 */.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;}/* 链接颜色修改 */.topnav a:hover {background-color: #ddd;color: black;}/* 创建两列 *//* Left column */.leftcolumn {float: left;width: 75%;}/* 右侧栏 */.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;}/* 图像部分 */.fakeimg {background-color: #aaa;width: 100%;padding: 20px;}/* 文章卡片效果 */.card {background-color: white;padding: 20px;margin-top: 20px;}/* 列后面清除浮动 */.row:after {content: "";display: table;clear: both;}/* 底部 */.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;}/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */@media screen and (max-width: 800px) {.leftcolumn,.rightcolumn {width: 100%;padding: 0;}}/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */@media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;}}</style></head><body><div class="header"><h1>明月看潮生的网页</h1><p>重置浏览器大小查看效果。</p></div><div class="topnav"><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#" style="float: right">链接4</a></div><div class="row"><div class="leftcolumn"><div class="card"><h2>文章标题</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height: 200px">图片</div><p>一些文本...</p><p>少年软件工程师。不再是一个启蒙的过程，直接向着目标前进！</p></div><div class="card"><h2>文章标题</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height: 200px">图片</div><p>一些文本...</p><p>少年软件工程师。不再是一个启蒙的过程，直接向着目标前进！</p></div></div><div class="rightcolumn"><div class="card"><h2>关于我</h2><div class="fakeimg" style="height: 100px">图片</div><p>关于我的一些信息..</p></div><div class="card"><h3>热门文章</h3><div class="fakeimg"><p>图片</p></div><div class="fakeimg"><p>图片</p></div><div class="fakeimg"><p>图片</p></div></div><div class="card"><h3>关注我</h3><p>一些文本...</p></div></div></div><div class="footer"><h2>底部区域</h2></div></body><footer style="text-align: center;margin: 30px;font-size: 1.5rem;font-weight: bold;color: #ffcc00;">HTML+CSS+JavaScript编程配套代码 作者：明月看潮生</footer>
</html>

二、解释

响应式布局，又称为自适应布局，是一种网页设计的技术，用于实现网页在不同设备上的自适应显示。传统的网页设计是基于固定的像素尺寸进行设计的，而响应式布局则利用CSS媒体查询和流式网格布局等技术，根据不同设备的屏幕尺寸和特性来调整网页的布局和样式，以适应不同的屏幕大小和分辨率。响应式布局可以使网页在桌面、平板、手机等不同设备上都能有良好的用户体验，并且减少了开发和维护的工作量。

相关文章：

html5cssjs代码 024 响应式布局示例

html5&css&js代码 024 响应式布局示例 一、代码二、解释 该HTML代码重点在于构建一个带有响应式设计的两栏布局网页&#xff0c;包含页头、导航条、主要内容区&#xff08;左右两列&#xff09;和底部区域&#xff0c;并运用CSS样式设置页面元素的布局、颜色、字体、间…...

编程日记 2024/3/22 17:25:42

json详解

文章目录 概述JSON 发展史什么是 JSON为什么要使用 JSONJSON 的不足JSON 应该如何存储什么时候会使用 JSON1) 定义接口2) 序列化3) 生成 Token4) 配置文件 Json分类json-lib开源的JacksonGoogle的Gson阿里巴巴的FastJsonJSON.simple JSON 序列化方式有哪些消息队列中传输的数据…...

编程日记 2024/3/22 17:23:37

C语言之---柔性数组

1.1前记 也许你从来没有听说过柔性数组这个概念&#xff0c;但是它是确实存在的。 C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就是柔性数组成员。 例如: struct st_type {int i;int a[0]; }; 有些编译器会报错无法编译可以改为&#xff1a…...

编程日记 2024/3/22 17:19:32

鸿蒙错误记录

鸿蒙错误代码记录 只是记录学习过程中的错误 只是记录学习过程中的错误 刚开始入手学习鸿蒙&#xff0c;错误记录一下 BussinessError 200 授权没有成功&#xff0c;需要先申请权限 BussinessError 3301200:定位时没有网络&#xff0c;打开网络即可...

编程日记 2024/3/22 17:17:30

Leetcode热题100：图论

Leetcode 200. 岛屿数量 深度优先搜索法&#xff1a; 对于这道题来说&#xff0c;是一个非常经典的图的问题&#xff0c;我们可以先从宏观上面来看问题&#xff0c;也就是说在不想具体算法的前提下&#xff0c;简单的说出如何找到所有的岛屿呢&#xff1f; 如图中所示&#x…...

编程日记 2024/3/22 17:15:24

刚进公司第一天-电脑环境搭建

写在前面 之前在公司做过一次开发小工具的分享&#xff0c;这两天有个同事找我学习一些小工具开发的知识&#xff0c;但是我发现他的基础是真的差&#xff0c;想学开发知识却连自己本地电脑环境都没弄好&#xff0c;确实&#xff0c;有些人工作了很久&#xff0c;由于自己工作中…...

编程日记 2024/3/22 17:11:20

kubernetes集群报 unable to load bootstrap kubeconfig处置思路

一.现状和问题现象 公司kubernetes集群是通过kubeadm工具安装的&#xff0c;使用1年之后证书到期。在 kubernetes control plane maste节点服务器上运行 kubeadm certs renew all 命令更新证书后&#xff0c;kubelet 无法正常启动&#xff0c;报错日志如下 Failed to run kube…...

编程日记 2024/3/22 17:10:18

MacBook远程桌面Windows使用Microsoft Remote Desktop for Mac_亲测使用

MacBook远程桌面Windows使用Microsoft Remote Desktop for Mac_亲测使用 像Windows上有自带的远程桌面连接软件.MacBook没有自带的远程连接Windows桌面的工具,需要安装软件来实现. 像远程桌面控制软件一般有 TeamViewer、向日葵远程控制, ToDesk, Microsoft Remote Desktop f…...

编程日记 2024/3/22 17:09:17

Huggingface 笔记：大模型（Gemma2B,Gemma 7B）部署+基本使用

1 部署 1.1 申请权限 在huggingface的gemma界面&#xff0c;点击“term”以申请gemma访问权限 https://huggingface.co/google/gemma-7b 然后接受条款 1.2 添加hugging对应的token 如果直接用gemma提供的代码&#xff0c;会出现如下问题&#xff1a; from transformers i…...

编程日记 2024/3/22 17:07:14

WebGL 理论基础 01 WebGL 基础概念

WebGL 理论基础 基础概念 WebGL 基础概念 顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置&#xff0c;WebGL可以对点&#xff0c; 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法。 片段着色器的作用是计算…...

编程日记 2024/3/22 17:06:13

Leetcode 28：找出字符串中第一个匹配项的下标

给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入&#xff1a;haystack &q…...

编程日记 2024/3/22 17:05:11

docker opensearch arm64 运行失败解决方案

opensearch版本 2.1.0 docker日志错误信息&#xff1a; Disabling execution of install_demo_configuration.sh for OpenSearch Security Plugin Enabling OpenSearch Security Plugin Killing opensearch process 10 OpenSearch exited with code 143 Performance analyze…...

编程日记 2024/3/22 17:03:08

C#、ASP、ASP.NET、.NET、ASP.NET CORE区别、ASP.NET Core其概念和特点、ASP.NET Core个人心得体会

C#是一种面向对象的编程语言&#xff0c;主要用于开发跨平台的应用程序。它是.NET框架的一部分&#xff0c;并且可以在.NET平台上运行。 ASP&#xff08;Active Server Pages&#xff09;是一种用于构建动态Web页面的技术&#xff0c;使用VBScript或JScript作为服务器端脚本语…...

编程日记 2024/3/22 17:02:05

SpringMVC 简介及入门级的快速搭建详细步骤

MVC 回顾 MVC&#xff0c;即Model-View-Controller&#xff08;模型-视图-控制器&#xff09;设计模式&#xff0c;是一种广泛应用于软件工程中&#xff0c;特别是Web应用开发中的架构模式。它将应用程序分为三个核心组件&#xff1a; Model&#xff08;模型&#xff09;&#…...

编程日记 2024/3/22 17:01:02

Flutter编译卡在Running Gradle task ‘assembleDebug

1、翻墙 2、修改国内镜像源&#xff08;以下以Flutter 3.19.3版本为例&#xff09; 找到Flutter SDK目录下的Flutter配置文件resolve_dependencies.gradle 路径&#xff1a;flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle 1)、第一处修改&#xff1a; g…...

编程日记 2024/3/22 16:59:59

基于springboot的牙科就诊管理系统

技术&#xff1a;springbootmysqlvue 一、系统背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化管理。这样…...

编程日记 2024/3/22 16:55:55

C语言 指针练习

一、 a、b是两个浮点型变量&#xff0c;给a、b赋值&#xff0c;建立两个指针分别指向a的地址和b的地址&#xff0c;输出两个指针的值。 #include<stdio.h> int main() {float a,b,*p1,*p2;a10.2;b2.3;p1&a;p2&b;printf("a%f,b%f\n",a,b);printf("…...

编程日记 2024/3/22 16:53:51

【力扣 TOP100】 无重复字符的最长子串

题目描述&#xff1a; 思路&#xff1a; 使用left和right表示子串的端点。每次判断新的right是否在之前的子串里&#xff0c;如果在&#xff0c;则将left更新为新字符在子串里的位置&#xff08;因为在此之间&#xff0c;没有更长的子串了&#xff09;。如果不在则right1&…...

编程日记 2024/3/22 16:50:47

K8S node磁盘清理

K8S磁盘清理 K8S的部署形式相比传统非容器部署&#xff0c;会消耗更多的磁盘&#xff0c;在运行时可能会把磁盘占满。 这里以使用containerd运行时的K8S node为例&#xff0c;说明磁盘会用到那里了和如何清理磁盘 通用处理 磁盘清理: du -h --max-depth6 / 2>/dev/nul…...

编程日记 2024/3/22 16:49:45

2024年上半年软考，现在开始学真的来得及吗？

24上软考报名进行时&#xff0c;如果从现在开始学习来得及吗&#xff1f;只为拿证&#xff0c;还没报名的选哪科通过率高一点呢&#xff1f; 01、现在开始学来得及吗&#xff1f; 还没开始备考的考生&#xff0c;现在开始抓紧时间学还来得及&#xff0c;但是要正视软考的试题…...

编程日记 2024/3/22 16:47:43

艾尔登法环帧率解锁终极指南：告别卡顿，畅享丝滑游戏体验

艾尔登法环帧率解锁终极指南&#xff1a;告别卡顿&#xff0c;畅享丝滑游戏体验 【免费下载链接】EldenRingFpsUnlockAndMore A small utility to remove frame rate limit, change FOV, add widescreen support and more for Elden Ring 项目地址: https://gitcode.com/gh_m…...

编程新知 2026/5/26 3:38:09

用Python和MNE库玩转BCI Competition IV 2a脑电数据集：从数据加载到可视化全流程

用Python和MNE库玩转BCI Competition IV 2a脑电数据集&#xff1a;从数据加载到可视化全流程当你第一次接触脑电信号处理时&#xff0c;面对原始数据文件可能会感到无从下手。BCI Competition IV 2a数据集作为脑机接口领域的经典基准数据&#xff0c;包含了9名受试者四种运动想…...

编程新知 2026/5/26 2:59:48

[智能体-69]：重新认知MCP：协议不生产智能，只是AI全域交互的标准化基石

MCP只是提供了大模型、编排调度、外部工具能够进行结构化交流的标准&#xff0c;而整个系统的智能主要依赖编排调度&#xff0c;与外部软件系统的交互取决于外部工具&#xff0c;包括外部语音交互、视觉交互、数字化交互。当下MCP&#xff08;Model Context Protocol&#xff0…...

编程新知 2026/5/26 2:09:22

DeepSeek基准测试避坑手册：92%开发者忽略的4大陷阱——硬件配置偏差、tokenizer不一致、batch size幻觉、温度值污染

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek基准测试避坑手册&#xff1a;92%开发者忽略的4大陷阱——硬件配置偏差、tokenizer不一致、batch size幻觉、温度值污染 硬件配置偏差&#xff1a;GPU显存与计算精度的隐性干扰 在A100&#xff08;8…...

编程新知 2026/5/26 1:53:13

Midjourney锐化效果失效真相（2024官方未公开的渲染管线瓶颈解析）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney锐化效果失效真相&#xff08;2024官方未公开的渲染管线瓶颈解析&#xff09; 自2024年V6.2版本起&#xff0c;大量用户反馈 --stylize 与 --sharp 参数组合下图像边缘锐化效果显著弱化&am…...

编程新知 2026/5/26 1:06:54

半导体元件（二极管/三极管/MOS管/IC）损坏诊断全解

半导体元件&#xff08;二极管、三极管、MOS 管、集成电路&#xff09;是 PCB 的核心功能单元&#xff0c;对过压、过流、ESD、高温极度敏感&#xff0c;损坏后直接导致电路功能失效、短路烧板。很多工程师维修时盲目更换芯片&#xff0c;不仅成本高&#xff0c;还易误判。​一…...

编程新知 2026/5/26 0:18:08

机器学习与深度学习在社交媒体心理健康检测中的权衡与选择

1. 项目概述&#xff1a;当AI遇见心灵&#xff0c;社交媒体心理健康检测的技术十字路口在社交媒体成为我们数字生活延伸的今天&#xff0c;海量的文本数据无意中记录着用户的情感波动与心理状态。作为一名长期混迹于数据科学和自然语言处理&#xff08;NLP&#xff09;一线的从…...

编程新知 2026/5/25 19:11:47

ZYNQ中断避坑指南：PL端信号线如何正确‘连线’到PS端处理函数？

ZYNQ中断系统深度解析&#xff1a;从硬件信号到软件响应的全链路实践 在嵌入式系统开发中&#xff0c;中断处理是实时响应的核心机制。对于ZYNQ这种集成了ARM处理器(PS)和可编程逻辑(PL)的异构计算平台&#xff0c;其中断系统既有传统处理器的特性&#xff0c;又具备FPGA灵活定…...

编程新知 2026/5/25 17:15:18

解锁你的音乐收藏：浏览器端音频解密完整指南

解锁你的音乐收藏&#xff1a;浏览器端音频解密完整指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: https://gitcod…...

编程新知 2026/5/25 16:13:18

还在手动触发Lindy子任务？这6个隐藏API+3个低代码集成技巧，今天就能上线全自动流水线

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Lindy多步骤任务自动化的价值与演进路径 Lindy效应指出&#xff0c;一项技术的预期剩余寿命与其当前已存在时间正相关&#xff1b;在自动化领域&#xff0c;Lindy原则催生了对“经久验证、语义稳定、可组合性强…...

编程新知 2026/5/25 15:28:08