利用HTML和CSS实现的浮动布局
代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.all{width: 960px;height: 1000px;margin: 0 auto;}.body_url{height: 80px;display: inline-block;margin-bottom: 10px;/* 去除换行空格距离 */font-size: 0;}.body_com{display: inline-block;text-align: center;line-height: 80px;background-color: rgb(171, 149, 149);font-size: 16px;}.logo{width: 200px;}.banner1{width: 540px;margin: 0 10px;}.banner2{width: 200px;}.menu{height: 30px;background-color: rgb(171, 149, 149);text-align: center;line-height: 30px;margin-bottom: 10px;}.nav_left{width: 760px;float: left;font-size: 0;}.left_one{display: inline-block;width: 368px;height: 198px;text-align: center;line-height: 100px;border: 1px solid black;margin-right: 10px;margin-bottom: 10px;font-size: 16px;}.left_two{display: inline-block;width: 178px;height: 198px;text-align: center;line-height: 100px;border: 1px solid black;margin-right: 10px;font-size: 16px;}.nav_right{width: 200px;float: right;font-size: 0;}.left_three{display: inline-block;width: 198px;height: 128px;text-align: center;line-height: 100px;border: 1px solid black;margin-bottom: 10px;font-size: 16px;}.foot_url{/* 清除浮动 */clear: both;height: 60px;text-align: center;line-height: 60px;background-color: rgb(171, 149, 149);}</style>
</head>
<body><div class="all"><!-- 头部 --><div class="body_url"><div class="body_com logo">logo</div><div class="body_com banner1">banner1</div><div class="body_com banner2">banner2</div></div><!-- 菜单 --><div class="menu">菜单</div><!-- 栏目 --><div class="nav_url"><!-- 左边栏目 --><div class="nav_left"><!-- top --><span class="left_one">栏目一</span><span class="left_one">栏目二</span><!-- bottom --><span class="left_two">栏目三</span><span class="left_two">栏目四</span><span class="left_two">栏目五</span><span class="left_two">栏目六</span></div><!-- 右边栏目 --><div class="nav_right"><span class="left_three">栏目七</span><span class="left_three">栏目八</span><span class="left_three">栏目九</span></div></div><!-- 页脚 --><div class="foot_url">页脚</div></div>
</body>
</html>
这是UI设计图
下面为实现的效果图
相关文章：
利用HTML和CSS实现的浮动布局
代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>*{m…...
2024年第十届控制、自动化与机器人国际会议（ICCAR 2024）即将召开！
2024年4月27~29日 新加披 会议官网：10th-ICCAR 2024https://iccar.org/index.html 第十届控制、自动化和机器人国际会议将于2024年4月27-29日在新加坡举办。本次会议由新加坡电子学会，IEEE机器人和自动控制协会和IEEE联合主办，并得到北京航空…...
基于python集成学习算法XGBoost农业数据可视化分析预测系统
文章目录 基于python集成学习算法XGBoost农业数据可视化分析预测系统一、项目简介二、开发环境三、项目技术四、功能结构五、功能实现模型构建封装类用于网格调参训练模型系统可视化数据请求接口模型评分 0.5*mse 六、系统实现七、总结 基于python集成学习算法XGBoost农业数据可…...
第29集《佛法修学概要》
丁三、声闻乘 分二：戊一、释义；戊二、四谛法；戊三、结示 请大家打开讲义第八十二页。我们看丁三，声闻乘。 在祖师大德的判教当中，把我们整个大乘的成佛之道分成了三个部分：第一个是安乐道，第…...
奥伦德光电耦合器5G通信领域及其相关领域推荐
光电耦合器是以光为媒介传输电信号的一种电-光-电转换器件。由于该器件使用寿命长、工作温度范围宽，所以在过程控制、工业通信、家用电器、医疗设备、通信设备、计算机以及精密仪器等方面有着广泛应用在当前工艺技术持续发展与提升的过程中，其工作速度、…...
机器学习算法 - 马尔可夫链
马尔可夫链（Markov Chain）可以说是机器学习和人工智能的基石，在强化学习、自然语言处理、金融领域、天气预测、语音识别方面都有着极其广泛的应用 > The future is independent of the past given the present 未来独立于过去ÿ…...
Linux下防火墙相关命令整理
目录 一.前言二.相关命令整理 一.前言 这篇文章简单整理一下Linux系统中防火墙相关命令。 二.相关命令整理 开启防火墙 systemctl start firewalld关闭防火墙 systemctl stop firewalld重启防火墙 systemctl restart firewalld开机启用防火墙 systemctl enable firewall…...
Python八股文总结
一. Python基本数据结构有哪四种？区别是什么？ 列表（List）元组（Tuple）字典（Dictionary）集合（Set） 区别主要在于它们的可变性（是否可以修改&#x…...
计算机导论05-计算机网络
文章目录 计算机网络基础计算机网络概述计算机网络的概念计算机网络的功能计算机网络的组成 计算机网络的发展计算机网络的类型 网络体系结构网络互联模型OSI/RM结构与功能TCP/IP结构模型TCP/IP与OSI/RM的比较 网络地址与分配IP地址构成子网的划分IPv6 传输介质与网络设备网络传…...
sentinel熔断与限流
文章目录 一、sentinel简介Sentinel 是什么？Sentinel安装 二、sentinel整合工程新建cloudalibaba-sentinel-service8401微服务引入依赖yml配置主启动类添加EnableDiscoveryClient业务类测试 三、sentinel流控规则基本介绍流控模式直接（默认）关…...
vi/vim 编辑器 --基本命令
1 vi/vim编辑器介绍 vi 是visual interface 的简称，是Linux中最经典的文本编辑器 vim是vi的加强版。兼容了vi的所有指令，不仅能编辑文本，而且具有shell程序编辑的功能，可以通过不同颜色的字体辨别语法的正确性，极大…...
C++——STL标准模板库——容器详解——set
一、基本概念 set容器是一种具备自动排序功能的集合，默认递增排序；元素无法直接修改，且不能重复；另一个版本叫做multiset，允许存在重复元素，其他功能和性质一样。 set容器底层结构一般为自平衡二叉搜索树…...
Vim一键配置指南，打造高效率C++开发环境
文章目录 前言安装与卸载功能演示gcc/g升级问题 前言 Vim作为当下最受欢迎的文本编译器之一，不仅具有强大的文本编辑功能，还提供了高度的可定制性。用户可以根据自己的喜好自定义配置，并且通过自己编写插件或者使用现有的插件来扩展Vim的功能…...
新航向，新生态： Michael在出海业务圆桌会议分享HyperBDR全球业务拓展之道
1月15日-16日，以“领航新开局，共赢新生态”为主题的华为云生态大会2024在华为云贵安数据中心云上屯盛大举行。本次会议聚焦于华为云全国生态伙伴与开发者，旨在共同见证华为云生态战略的最新进展和伙伴政策的新升级。与会者将分享来自优秀生态…...
SpringBoot异步处理
Spring boot异步处理 业务场景： 如执行数据库备份任务，前端发起请求到后端，后端备份数据库的处理逻辑需要很长一段时间，此时前端会一直等待后端返回结果，给用户给等待时间过长，这是就要考虑异步处理了&…...
2024年甘肃省职业院校技能大赛信息安全管理与评估 样题一 模块二
竞赛需要完成三个阶段的任务，分别完成三个模块，总分共计 1000分。三个模块内容和分值分别是： 1.第一阶段：模块一 网络平台搭建与设备安全防护（180 分钟，300 分）。 2.第二阶段：模块二…...
matplotlib绘制动态瀑布图
绘制瀑布图思路：遍历指定文件目录下所有的csv文件，每读一个文件，取文件前20行数据进行保存，如果超过规定的行数300行，将最旧的数据删除，仅保留300行数据进行展示。 网上找的大部分绘制瀑布图的代码&#x…...
【STM32】STM32学习笔记-USART串口收发HEX和文本数据包(29)
00. 目录 文章目录 00. 目录01. 串口简介02. 串口收发HEX数据包接线图03. 串口收发HEX数据包示例104. 串口收发HEX数据包示例205. 串口收发文本数据包接线图06. 串口收发文本数据包示例07. 程序示例下载08. 附录 01. 串口简介 串口通讯(Serial Communication)是一种设备间非常…...
uniapp列表实现方式 v-for
创建列表视图 v-for v-for“对象item in 数组” v-for“(对象item，下标) in 数组” v-for“(对象item，使用这个键取到的值，下标) in 数组” :key 绑定标识 一般建议使用对象中的id等值 类型 any <template><view><view clas…...
SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解
SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(二) 入门示例及编程步骤 三、使用Core API访问与操作数据库 Sqlalchemy 的Core部分集成了DB API, 事务管理，schema描述等功能，ORM构筑于其上。本章介绍创建 Engine对象，使用基本的…...
SKILL语言在数字IC设计中的高级应用：如何优化你的工作流程
SKILL语言在数字IC设计中的高级应用：如何优化你的工作流程 在数字IC设计的复杂世界里，效率就是竞争力。当大多数工程师还在手动点击EDA工具菜单时，掌握SKILL语言的高手已经用几行代码完成了批量操作。这不是魔法，而是SKILL语言赋…...
深度解析PAC文件解析器：构建智能代理路由系统的终极方案
深度解析PAC文件解析器：构建智能代理路由系统的终极方案 【免费下载链接】pacparser A library to parse proxy auto-config (PAC) files 项目地址: https://gitcode.com/gh_mirrors/pa/pacparser 在现代企业网络架构中，代理自动配置（…...
GEE下载哨兵2号影像时，如何避开云层和无效数据？我的季度合成与质量筛选实战
GEE实战：哨兵2号影像季度合成与云层规避全流程解析 湿地生态监测中，云层干扰是每位研究者都绕不开的痛点。去年我在分析鄱阳湖湿地植被动态时，曾因云污染损失了整整两个季度的有效数据。本文将分享如何通过GEE平台，从数据筛选到季…...
)
Linux g++编译与GDB调试完整流程(文末附图)
验证安装 C which g g --versionC which gcc gcc --version安装 **centOs**：sudo yum install gcc **centOs**：sudo yum install g **ubuntu**：sudo apt-get install gcc **ubuntu**：sudo apt-get install g **kyLin**：…...
BoltDB vs Redis 读性能对比：实测表现与原理差异
一、前言 BoltDB（bbolt）与 Redis 都是高并发场景下常见的键值存储，但存储架构、存储介质、并发模型完全不同，导致两者在读性能、延迟、并发扩展性上呈现巨大差异。 本文从原理、延迟、并发读能力、资源开销四个维度对比两者的读性…...
可解释推荐-TKDE 24|基于强化路径推理的反事实解释优化策略
1. 为什么我们需要更好的推荐解释？ 你有没有遇到过这种情况：某购物平台突然给你推荐了一款完全不符合你品味的商品，或者视频平台连续推送你根本不感兴趣的短视频？这时候你可能会想："这个推荐系统到底是怎么想的&…...
基于uniapp的SUPOIN PDA激光扫码广播监听功能实现与优化
1. 为什么选择SUPOIN PDA激光扫码方案 在工业级移动应用中，扫码功能可以说是刚需中的刚需。我做过不少仓库管理、物流配送的项目，深刻体会到扫码速度差个0.5秒，工人一天下来就能多处理上百件货物。SUPOIN PDA设备自带的激光扫码模块…...
高效Android系统清理：Universal Android Debloater专业指南
高效Android系统清理：Universal Android Debloater专业指南 【免费下载链接】universal-android-debloater Cross-platform GUI written in Rust using ADB to debloat non-rooted android devices. Improve your privacy, the security and battery life of your d…...
BYD Battery Emulator：让电动汽车电池成为家庭储能的智能桥梁
BYD Battery Emulator：让电动汽车电池成为家庭储能的智能桥梁 【免费下载链接】BYD-Battery-Emulator-For-Gen24 This software enables EV battery packs to be used for stationary storage in combination with solar inverters. 项目地址: https://gitcode.co…...
Laf云平台终极灾备指南：如何实现多区域部署与智能故障转移
Laf云平台终极灾备指南：如何实现多区域部署与智能故障转移 【免费下载链接】laf labring/laf: 是一个用于 PHP 的轻量级 AJAX 库，可以方便地在 PHP 应用中实现 AJAX 通信。适合对 PHP、AJAX 库和想要实现 PHP AJAX 通信的开发者。 项目地址: https://g…...