html5cssjs代码 024 响应式布局示例
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代码重点在于构建一个带有响应式设计的两栏布局网页，包含页头、导航条、主要内容区（左右两列）和底部区域，并运用CSS样式设置页面元素的布局、颜色、字体、间…...
json详解
文章目录 概述JSON 发展史什么是 JSON为什么要使用 JSONJSON 的不足JSON 应该如何存储什么时候会使用 JSON1) 定义接口2) 序列化3) 生成 Token4) 配置文件 Json分类json-lib开源的JacksonGoogle的Gson阿里巴巴的FastJsonJSON.simple JSON 序列化方式有哪些消息队列中传输的数据…...
C语言之---柔性数组
1.1前记 也许你从来没有听说过柔性数组这个概念，但是它是确实存在的。 C99中，结构中的最后一个元素允许是未知大小的数组，这就是柔性数组成员。 例如: struct st_type {int i;int a[0]; }; 有些编译器会报错无法编译可以改为：…...
鸿蒙错误记录
鸿蒙错误代码记录 只是记录学习过程中的错误 只是记录学习过程中的错误 刚开始入手学习鸿蒙，错误记录一下 BussinessError 200 授权没有成功，需要先申请权限 BussinessError 3301200:定位时没有网络，打开网络即可...
Leetcode热题100：图论
Leetcode 200. 岛屿数量 深度优先搜索法： 对于这道题来说，是一个非常经典的图的问题，我们可以先从宏观上面来看问题，也就是说在不想具体算法的前提下，简单的说出如何找到所有的岛屿呢？ 如图中所示&#x…...
刚进公司第一天-电脑环境搭建
写在前面 之前在公司做过一次开发小工具的分享，这两天有个同事找我学习一些小工具开发的知识，但是我发现他的基础是真的差，想学开发知识却连自己本地电脑环境都没弄好，确实，有些人工作了很久，由于自己工作中…...
kubernetes集群报 unable to load bootstrap kubeconfig处置思路
一.现状和问题现象 公司kubernetes集群是通过kubeadm工具安装的，使用1年之后证书到期。在 kubernetes control plane maste节点服务器上运行 kubeadm certs renew all 命令更新证书后，kubelet 无法正常启动，报错日志如下 Failed to run kube…...
MacBook远程桌面Windows使用Microsoft Remote Desktop for Mac_亲测使用
MacBook远程桌面Windows使用Microsoft Remote Desktop for Mac_亲测使用 像Windows上有自带的远程桌面连接软件.MacBook没有自带的远程连接Windows桌面的工具,需要安装软件来实现. 像远程桌面控制软件一般有 TeamViewer、向日葵远程控制, ToDesk, Microsoft Remote Desktop f…...
Huggingface 笔记：大模型（Gemma2B,Gemma 7B）部署+基本使用
1 部署 1.1 申请权限 在huggingface的gemma界面，点击“term”以申请gemma访问权限 https://huggingface.co/google/gemma-7b 然后接受条款 1.2 添加hugging对应的token 如果直接用gemma提供的代码，会出现如下问题： from transformers i…...
WebGL 理论基础 01 WebGL 基础概念
WebGL 理论基础 基础概念 WebGL 基础概念 顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法。 片段着色器的作用是计算…...
Leetcode 28：找出字符串中第一个匹配项的下标
给你两个字符串 haystack 和 needle ，请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标（下标从 0 开始）。如果 needle 不是 haystack 的一部分，则返回 -1 。 示例 1： 输入：haystack &q…...
docker opensearch arm64 运行失败解决方案
opensearch版本 2.1.0 docker日志错误信息： 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…...
C#、ASP、ASP.NET、.NET、ASP.NET CORE区别、ASP.NET Core其概念和特点、ASP.NET Core个人心得体会
C#是一种面向对象的编程语言，主要用于开发跨平台的应用程序。它是.NET框架的一部分，并且可以在.NET平台上运行。 ASP（Active Server Pages）是一种用于构建动态Web页面的技术，使用VBScript或JScript作为服务器端脚本语…...
SpringMVC 简介及入门级的快速搭建详细步骤
MVC 回顾 MVC，即Model-View-Controller（模型-视图-控制器）设计模式，是一种广泛应用于软件工程中，特别是Web应用开发中的架构模式。它将应用程序分为三个核心组件： Model（模型）&#…...
Flutter编译卡在Running Gradle task ‘assembleDebug
1、翻墙 2、修改国内镜像源（以下以Flutter 3.19.3版本为例） 找到Flutter SDK目录下的Flutter配置文件resolve_dependencies.gradle 路径：flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle 1)、第一处修改： g…...
基于springboot的牙科就诊管理系统
技术：springbootmysqlvue 一、系统背景 当前社会各行业领域竞争压力非常大，随着当前时代的信息化，科学化发展，让社会各行业领域都争相使用新的信息技术，对行业内的各种相关数据进行科学化，规范化管理。这样…...
C语言 指针练习
一、 a、b是两个浮点型变量，给a、b赋值，建立两个指针分别指向a的地址和b的地址，输出两个指针的值。 #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("…...
【力扣 TOP100】 无重复字符的最长子串
题目描述： 思路： 使用left和right表示子串的端点。每次判断新的right是否在之前的子串里，如果在，则将left更新为新字符在子串里的位置（因为在此之间，没有更长的子串了）。如果不在则right1&…...
K8S node磁盘清理
K8S磁盘清理 K8S的部署形式相比传统非容器部署，会消耗更多的磁盘，在运行时可能会把磁盘占满。 这里以使用containerd运行时的K8S node为例，说明磁盘会用到那里了和如何清理磁盘 通用处理 磁盘清理: du -h --max-depth6 / 2>/dev/nul…...
2024年上半年软考，现在开始学真的来得及吗？
24上软考报名进行时，如果从现在开始学习来得及吗？只为拿证，还没报名的选哪科通过率高一点呢？ 01、现在开始学来得及吗？ 还没开始备考的考生，现在开始抓紧时间学还来得及，但是要正视软考的试题…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
短视频矩阵系统文案创作功能开发实践，定制化开发
在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...
Ray框架：分布式AI训练与调参实践
Ray框架：分布式AI训练与调参实践 系统化学习人工智能网站（收藏）：https://www.captainbed.cn/flu 文章目录 Ray框架：分布式AI训练与调参实践摘要引言框架架构解析1. 核心组件设计2. 关键技术实现2.1 动态资源调度2.2 …...
【前端实战】如何让用户回到上次阅读的位置？
目录 【前端实战】如何让用户回到上次阅读的位置？ 一、总体思路 1、核心目标 2、涉及到的技术 二、实现方案详解 1、基础方法：监听滚动，记录 scrollTop（不推荐） 2、Intersection Observer 插入探针元素 3、基…...
LangChain + LangSmith + DeepSeek 入门实战：构建代码生成助手
本文基于 Jupyter Notebook 实践代码，结合 LangChain、LangSmith 和 DeepSeek 大模型，手把手演示如何构建一个代码生成助手，并实现全流程追踪与优化。 一、环境准备与配置 1. 安装依赖 pip install langchain langchain_openai2. 设置环境变…...