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、现在开始学来得及吗？ 还没开始备考的考生，现在开始抓紧时间学还来得及，但是要正视软考的试题…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
解锁数据库简洁之道：FastAPI与SQLModel实战指南
在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...
【Linux系统】Linux环境变量：系统配置的隐形指挥官
。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量：setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...