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、现在开始学来得及吗？ 还没开始备考的考生，现在开始抓紧时间学还来得及，但是要正视软考的试题…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
测试markdown--肇兴
day1： 1、去程：7:04 --11:32高铁 高铁右转上售票大厅2楼，穿过候车厅下一楼，上大巴车 ￥10/人 **2、到达：**12点多到达寨子，买门票，美团/抖音：￥78人 3、中饭&a…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用： 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests：发送 …...
掌握 HTTP 请求：理解 cURL GET 语法
cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
elementUI点击浏览table所选行数据查看文档
项目场景： table按照要求特定的数据变成按钮可以点击 解决方案： <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
若依登录用户名和密码加密
/*** 获取公钥：前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...