html + css 自适应首页布局案例
文章目录
- 前言
- 一、组成
- 二、代码
- 1. css 样式
- 2. body 内容
- 3.全部整体
- 三、效果
前言
一个自适应的html布局
一、组成
整体居中，宽度1200px，小屏幕宽度100%
二、代码
1. css 样式
代码如下（示例）：
<style>* {box-sizing: border-box;}body {margin: 0;font-family: Arial, sans-serif;}.header {background-color: #f1f1f1;padding: 10px;text-align: center;margin: 0 auto;/* 水平居中 */max-width: 1200px;/* 最大宽度为1200px */width: 100%;/* 宽度为100% */}.content {display: flex;flex-wrap: wrap;/* 允许子元素换行 */margin: 0 auto;/* 水平居中 */max-width: 1200px;/* 最大宽度为1200px */width: 100%;/* 宽度为100% */}.left,.right {padding: 20px;min-height: 300px;/* 可以根据需要调整高度 */}.left {background-color: #ccc;flex: 1;/* 默认占据剩余空间 */}.right {background-color: #ddd;flex: 1;/* 默认占据剩余空间 */}@media (max-width: 1199px) {.left,.right {flex: 100%;/* 当屏幕宽度小于1200px时，左右两侧各占100%宽度 */}}
该处使用的css布局。
2. body 内容
代码如下（示例）：
<body><div class="header"><h1>导航栏</h1></div><div class="content"><div class="left"><h2>左侧内容</h2><p>这里是左侧的内容区域。</p></div><div class="right"><h2>右侧内容</h2><p>这里是右侧的内容区域。当屏幕尺寸变小时，我会移动到左下方。</p></div></div></body>
该处使用div组成。
3.全部整体
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式布局示例</title><style>* {box-sizing: border-box;}body {margin: 0;font-family: Arial, sans-serif;}.header {background-color: #f1f1f1;padding: 10px;text-align: center;margin: 0 auto;/* 水平居中 */max-width: 1200px;/* 最大宽度为1200px */width: 100%;/* 宽度为100% */}.content {display: flex;flex-wrap: wrap;/* 允许子元素换行 */margin: 0 auto;/* 水平居中 */max-width: 1200px;/* 最大宽度为1200px */width: 100%;/* 宽度为100% */}.left,.right {padding: 20px;min-height: 300px;/* 可以根据需要调整高度 */}.left {background-color: #ccc;flex: 1;/* 默认占据剩余空间 */}.right {background-color: #ddd;flex: 1;/* 默认占据剩余空间 */}@media (max-width: 1199px) {.left,.right {flex: 100%;/* 当屏幕宽度小于1200px时，左右两侧各占100%宽度 */}}</style></head><body><div class="header"><h1>导航栏</h1></div><div class="content"><div class="left"><h2>左侧内容</h2><p>这里是左侧的内容区域。</p></div><div class="right"><h2>右侧内容</h2><p>这里是右侧的内容区域。当屏幕尺寸变小时，我会移动到左下方。</p></div></div></body>
</html>
三、效果
相关文章：
html + css 自适应首页布局案例
文章目录 前言一、组成二、代码1. css 样式2. body 内容3.全部整体 三、效果 前言 一个自适应的html布局 一、组成 整体居中，宽度1200px，小屏幕宽度100% 二、代码 1. css 样式 代码如下（示例）： <style>* {…...
时钟之CSS+JS版
写在前面 此版本绘制的时钟基于CSSJS模式。 优点操作简单，缺点当然是不够灵活。下一篇会基于HTML5的canvas标签，使用JS绘制。会更灵活，元素更加丰富。 HTML代码 <div class"box"><article class"clock"><…...
ubuntu18.04 配置安卓编译环境
目前有个项目，验收时有个要求是在linux中进行编译打包生成apk文件。我平时都是在windows环境android studio中进行打包的，花了半天时间研究了一下，记录如下： 安装安卓sdk cd /opt wget https://dl.google.com/android/reposito…...
pycharm分支提交操作
一、Pycharm拉取Git远程仓库代码 1、点击VCS > Get from Version Control 2、输入git的url，选择自己的项目路径 3、点击Clone，就拉取成功了 默认签出分支为main 选择develop签出即可进行开发工作 二、创建分支（非必要可以不使用…...
ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码2024/11/15
ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码 ESP32-C3 开发笔记 之 arduino 正常上传程序 但是打开串口,串口快速刷新 芯片一直处于重启状态 找了很久的原因没找到,用Mixly 上传就正常 最后看到这篇 文章https://blog.csdn.net/luooove/article/details/132351398修改了Fl…...
Ubuntu 的 ROS 操作系统 turtlebot3 SLAM仿真
引言 SLAM（同步定位与地图构建）在Gazebo仿真环境中的应用能够模拟真实机器人进行环境建图和导航。通过SLAM仿真，开发者可以在虚拟环境中测试算法，而不必依赖真实硬件，便于调试与优化。 Gazebo提供了多个虚拟环境&…...
2024年11月15日
1.计算机网络 逻辑右移 做加减法 定点乘法 原码乘法运算 一位乘 计组 2.英语六级...
websocket初始化
websocket初始化 前言 上一集我们HTTP的ping操作就可以跑通了，那么我们还有一个协议---websocket，我们在这一集就要去完成我们websocket的初始化。 分析 我们在初始化websocket的之前，我们考虑一下，我们什么时候就要初始化我们…...
uniapp ios app以framwork形式接入sentry
一、下载Sentry mac终端输入：vim Podfile修改Podfile: platform :ios, 11.0 target YourApp douse_frameworks! # This is importantpod Sentry, :git > https://github.com/getsentry/sentry-cocoa.git, :tag > 8.40.1 end执行：pod install下载…...
⾃动化运维利器Ansible-基础
Ansible基础 一、工作原理二、快速入门2.1 测试所有资产的网络连通性2.2 发布文件到被管理节点(资产) 三、资产(被管理节点)3.1 静态资产3.1.1 自定义资产3.1.2 自定义资产的使用3.1.3 资产选择器 四、Ansible Ad-Hoc 命令4.1 模块类型4.1.1 command & shell 模块4.1.2 cop…...
若依笔记（十一）：芋道多租户限制与修改
目录 多租户实现 哪些表是多租户的？ YudaoTenant自动装载类 租户隔离的sql在哪？ 如何修改成无租户隔离 全局修改 表级别 请求RUL级别 芋道比若依多了租户概念，这也是因为它增加很多业务系统，首先后台管理系统肯定是多租户的，这意味着如商城系统的产品管理SPU、库存…...
hive 统计各项目下排名前5的问题种类
实现指定某项目下的数据效果图如下所示： 其中 ABCDE 为前5名的问题种类，其中A问题有124个（出现了124次） 数据说明： 整个数据集 包含很多项目一个项目 包含很多问题一个问题 选项 可认为是 类别值，所有出…...
HBase 安装与基本操作指南
以下是关于 Apache HBase 安装、配置以及简单操作的详细指南： HBase 简介 Apache HBase 是一个基于 Hadoop 的分布式数据库，擅长处理大规模、结构化的海量数据。它采用行列式存储方式，与 Hadoop 和 HDFS 紧密结合，是支持大数据实…...
Spring Boot应用中的文件压缩与解压技术实践
在构建Spring Boot应用时，文件压缩与解压是处理大量数据、优化存储和传输速度的常用技术。本文旨在深入探讨Spring Boot应用中文件压缩与解压的实现方法，包括常见压缩算法的选择、Spring Boot中的实现策略以及实际应用场景中的最佳实践。 引言 随着大数…...
D69【 python 接口自动化学习】- python 基础之数据库
day69 Python 执行 SQL 语句 学习日期：20241115 学习目标： MySQL 数据库﹣- Python连接redis 学习笔记： redis数据库的用途 使用Python访问redis数据库 使用Python对redis数据库进行读写操作 总结 1. redis是一款高性能的键…...
410. 分割数组的最大值
目录 题目解法 题目 给定一个非负整数数组 nums 和一个整数 k ，你需要将这个数组分成 k 个非空的连续子数组，使得这 k 个子数组各自和的最大值 最小。 返回分割后最小的和的最大值。 子数组 是数组中连续的部份。 解法 int splitArray(vector<in…...
Azure pipeline 通过git命令修改文件
步骤及解释 设置git用户名 git config --global user.email "useremail" git config --global user.name "username" 获取branch $branch "$(Build.SourceBranch)" -replace "refs/heads/" "$(Build.SourceBranch)"&a…...
LeetCode74. 搜索二维矩阵（2024冬季每日一题 6）
给你一个满足下述两条属性的 m x n 整数矩阵： 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target ，如果 target 在矩阵中，返回 true ；否则，返回 false 。…...
BPMN 2.0详细介绍
BPMN 2.0（Business Process Model and Notation 2.0）是一个标准化的图形化建模语言，用于描述业务流程和工作流。它是由 Object Management Group (OMG) 制定的，旨在提供一种标准化的方式，帮助企业和开发者清晰地建模、…...
web——upload-labs——第四关——.htaccess文件绕过
先尝试直接上传一个普通的一句话木马 显示此文件不允许上传，这道题并没有提示不允许上传什么后缀的文件，经过尝试，基本上所有后缀能够被解析为php语句执行的文件都不能成功上传。试试正常的图片能不能上传： 我们再来试试图片马能不…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...