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

html + css 自适应首页布局案例

news 2026/3/31 4:40:19

文章目录

  • 前言
  • 一、组成
  • 二、代码
    • 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布局 一、组成 整体居中&#xff0c;宽度1200px&#xff0c;小屏幕宽度100% 二、代码 1. css 样式 代码如下&#xff08;示例&#xff09;&#xff1a; <style>* {…...

编程日记 2024/11/16 18:27:47

时钟之CSS+JS版

写在前面 此版本绘制的时钟基于CSSJS模式。 优点操作简单&#xff0c;缺点当然是不够灵活。下一篇会基于HTML5的canvas标签&#xff0c;使用JS绘制。会更灵活&#xff0c;元素更加丰富。 HTML代码 <div class"box"><article class"clock"><…...

编程日记 2024/11/16 18:23:44

ubuntu18.04 配置安卓编译环境

目前有个项目&#xff0c;验收时有个要求是在linux中进行编译打包生成apk文件。我平时都是在windows环境android studio中进行打包的&#xff0c;花了半天时间研究了一下&#xff0c;记录如下&#xff1a; 安装安卓sdk cd /opt wget https://dl.google.com/android/reposito…...

编程日记 2024/11/16 18:20:40

pycharm分支提交操作

一、Pycharm拉取Git远程仓库代码 1、点击VCS > Get from Version Control 2、输入git的url&#xff0c;选择自己的项目路径 3、点击Clone&#xff0c;就拉取成功了 默认签出分支为main 选择develop签出即可进行开发工作 二、创建分支&#xff08;非必要可以不使用&#xf…...

编程日记 2024/11/16 18:19:38

ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码2024/11/15

ESP32-C3 开发笔记 之 arduino 正常上传 串口乱码 ESP32-C3 开发笔记 之 arduino 正常上传程序 但是打开串口,串口快速刷新 芯片一直处于重启状态 找了很久的原因没找到,用Mixly 上传就正常 最后看到这篇 文章https://blog.csdn.net/luooove/article/details/132351398修改了Fl…...

编程日记 2024/11/16 18:10:28

Ubuntu 的 ROS 操作系统 turtlebot3 SLAM仿真

引言 SLAM&#xff08;同步定位与地图构建&#xff09;在Gazebo仿真环境中的应用能够模拟真实机器人进行环境建图和导航。通过SLAM仿真&#xff0c;开发者可以在虚拟环境中测试算法&#xff0c;而不必依赖真实硬件&#xff0c;便于调试与优化。 Gazebo提供了多个虚拟环境&…...

编程日记 2024/11/16 18:09:26

2024年11月15日

1.计算机网络 逻辑右移 做加减法 定点乘法 原码乘法运算 一位乘 计组 2.英语六级...

编程日记 2024/11/16 18:07:23

websocket初始化

websocket初始化 前言 上一集我们HTTP的ping操作就可以跑通了&#xff0c;那么我们还有一个协议---websocket&#xff0c;我们在这一集就要去完成我们websocket的初始化。 分析 我们在初始化websocket的之前&#xff0c;我们考虑一下&#xff0c;我们什么时候就要初始化我们…...

编程日记 2024/11/16 18:05:21

uniapp ios app以framwork形式接入sentry

一、下载Sentry mac终端输入&#xff1a;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执行&#xff1a;pod install下载…...

编程日记 2024/11/16 18:02:19

⾃动化运维利器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…...

编程日记 2024/11/16 17:59:16

若依笔记（十一）：芋道多租户限制与修改

目录 多租户实现 哪些表是多租户的？ YudaoTenant自动装载类 租户隔离的sql在哪？ 如何修改成无租户隔离 全局修改 表级别 请求RUL级别 芋道比若依多了租户概念，这也是因为它增加很多业务系统，首先后台管理系统肯定是多租户的，这意味着如商城系统的产品管理SPU、库存…...

编程日记 2024/11/16 17:58:14

hive 统计各项目下排名前5的问题种类

实现指定某项目下的数据效果图如下所示&#xff1a; 其中 ABCDE 为前5名的问题种类&#xff0c;其中A问题有124个&#xff08;出现了124次&#xff09; 数据说明&#xff1a; 整个数据集 包含很多项目一个项目 包含很多问题一个问题 选项 可认为是 类别值&#xff0c;所有出…...

编程日记 2024/11/16 17:57:12

HBase 安装与基本操作指南

以下是关于 Apache HBase 安装、配置以及简单操作的详细指南&#xff1a; HBase 简介 Apache HBase 是一个基于 Hadoop 的分布式数据库&#xff0c;擅长处理大规模、结构化的海量数据。它采用行列式存储方式&#xff0c;与 Hadoop 和 HDFS 紧密结合&#xff0c;是支持大数据实…...

编程日记 2024/11/16 17:55:09

Spring Boot应用中的文件压缩与解压技术实践

在构建Spring Boot应用时&#xff0c;文件压缩与解压是处理大量数据、优化存储和传输速度的常用技术。本文旨在深入探讨Spring Boot应用中文件压缩与解压的实现方法&#xff0c;包括常见压缩算法的选择、Spring Boot中的实现策略以及实际应用场景中的最佳实践。 引言 随着大数…...

编程日记 2024/11/16 17:54:08

D69【 python 接口自动化学习】- python 基础之数据库

day69 Python 执行 SQL 语句 学习日期&#xff1a;20241115 学习目标&#xff1a; MySQL 数据库&#xfe63;- Python连接redis 学习笔记&#xff1a; redis数据库的用途 使用Python访问redis数据库 使用Python对redis数据库进行读写操作 总结 1. redis是一款高性能的键…...

编程日记 2024/11/16 17:53:07

410. 分割数组的最大值

目录 题目解法 题目 给定一个非负整数数组 nums 和一个整数 k &#xff0c;你需要将这个数组分成 k 个非空的连续子数组&#xff0c;使得这 k 个子数组各自和的最大值 最小。 返回分割后最小的和的最大值。 子数组 是数组中连续的部份。 解法 int splitArray(vector<in…...

编程日记 2024/11/16 17:51:05

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…...

编程日记 2024/11/16 17:50:02

LeetCode74. 搜索二维矩阵（2024冬季每日一题 6）

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…...

编程日记 2024/11/16 17:45:59

BPMN 2.0详细介绍

BPMN 2.0&#xff08;Business Process Model and Notation 2.0&#xff09;是一个标准化的图形化建模语言&#xff0c;用于描述业务流程和工作流。它是由 Object Management Group (OMG) 制定的&#xff0c;旨在提供一种标准化的方式&#xff0c;帮助企业和开发者清晰地建模、…...

编程日记 2024/11/16 17:44:58

web——upload-labs——第四关——.htaccess文件绕过

先尝试直接上传一个普通的一句话木马 显示此文件不允许上传&#xff0c;这道题并没有提示不允许上传什么后缀的文件&#xff0c;经过尝试&#xff0c;基本上所有后缀能够被解析为php语句执行的文件都不能成功上传。试试正常的图片能不能上传&#xff1a; 我们再来试试图片马能不…...

编程日记 2024/11/16 17:43:56

MATLAB MultiDIC/Ncorr实战：从图像采集到应力应变云图生成的全流程解析

1. 数字图像相关技术入门指南 第一次接触数字图像相关&#xff08;DIC&#xff09;技术时&#xff0c;我完全被那些专业术语搞晕了。后来在实际项目中摸爬滚打才发现&#xff0c;这套技术本质上就是用相机"看"材料变形的过程。想象一下橡皮筋被拉伸时表面的斑点移动—…...

编程新知 2026/3/31 2:36:02

BURSTER 8645-5005 扭矩传感器

BURSTER 8645-5005&#xff08;德国波斯特&#xff09;是一款非接触式、磁致伸缩原理、高精度动态旋转扭矩传感器&#xff0c;量程 5 N・m&#xff0c;内置放大器&#xff0c;专为连续旋转工况下的动态扭矩测量设计一、型号与量程型号&#xff1a;BURSTER 8645-5005系列&#x…...

编程新知 2026/3/31 0:20:41

罗技鼠标宏压枪脚本：绝地求生精准射击的终极解决方案

罗技鼠标宏压枪脚本&#xff1a;绝地求生精准射击的终极解决方案 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 还在为《绝地求生》中的后坐力控…...

编程新知 2026/3/30 23:45:11

Legacy-iOS-Kit系统降级全指南：让老旧iOS设备重获新生

Legacy-iOS-Kit系统降级全指南&#xff1a;让老旧iOS设备重获新生 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit 一、问…...

编程新知 2026/3/30 22:46:02

gte-base-zh中文Embedding工业化：CI/CD流水线实现模型版本灰度发布

gte-base-zh中文Embedding工业化&#xff1a;CI/CD流水线实现模型版本灰度发布 1. 项目背景与价值 在人工智能工程化落地的过程中&#xff0c;模型部署和版本管理一直是技术团队面临的挑战。特别是对于文本嵌入模型如gte-base-zh&#xff0c;如何在生产环境中实现平滑的版本升…...

编程新知 2026/3/30 21:35:01

CasaOS应用商店太单调？试试这几个社区维护的源，青龙面板、迅雷都能一键装

CasaOS社区应用源全攻略&#xff1a;解锁青龙面板、迅雷等本土化神器 如果你已经厌倦了CasaOS官方应用商店里那些千篇一律的容器镜像&#xff0c;正为找不到迅雷下载、青龙面板这类中国特色应用而发愁&#xff0c;那么这篇文章就是为你准备的。作为一个长期折腾家庭服务器的玩家…...

编程新知 2026/3/30 21:20:59

Engram：解锁AI潜能，系统优化新高度！

Engram是一种基于LLM的智能体研究者架构&#xff0c;旨在解决系统优化中AI的两个关键局限&#xff1a;进化邻域偏差和连贯性上限。通过将长时程探索与单一上下文窗口解耦&#xff0c;Engram组织一系列智能体迭代设计、测试和分析机制。每次运行结束时&#xff0c;智能体将代码快…...

编程新知 2026/3/30 21:00:55

告别虚拟机！在物理机统信系统上部署FME Desktop的性能调优与存储空间规划指南

告别虚拟机&#xff01;在物理机统信系统上部署FME Desktop的性能调优与存储空间规划指南 当GIS工程师需要在国产化环境中处理大规模空间数据时&#xff0c;物理机直接部署FME Desktop往往能获得比虚拟机更极致的性能表现。本文将深入探讨在统信UOS专业版物理机环境中&#xff…...

编程新知 2026/3/30 20:48:46

Windows 11 零基础搞定 Coze Studio 本地部署：Docker 配置 + 豆包模型实战

Windows 11 零基础搞定 Coze Studio 本地部署&#xff1a;Docker 配置 豆包模型实战 1. 环境准备与Docker安装 对于Windows 11用户来说&#xff0c;Docker是运行Coze Studio的基础环境。与Linux或macOS不同&#xff0c;Windows平台需要特别注意虚拟化支持和镜像源配置。 硬…...

编程新知 2026/3/30 20:04:24

PingFangSC字体实战指南：跨平台字体解决方案的最佳实践

PingFangSC字体实战指南&#xff1a;跨平台字体解决方案的最佳实践 【免费下载链接】PingFangSC PingFangSC字体包文件、苹果平方字体文件&#xff0c;包含ttf和woff2格式 项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC 行业痛点诊断 场景导入&#xff1a;设…...

编程新知 2026/3/30 18:46:52