利用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对象，使用基本的…...
中小型企业服务器常见隐患 + 标准化运维维护方案总结
做运维多年，接触过大量中小企业服务器，总结几个最常见、最致命的问题：1、服务器常年不关机、不巡检，磁盘爆满无人察觉；2、对外开放端口过多，没有安全策略，极易被暴力破解；3、数据库无…...
软件许可优化选到头大？八家公司直接给你答案
上周一个做采购的朋友打电话来，声音都哑了。说他们公司被Adobe审计盯上了，对方要他们在两周内提交过去三年的部署报告。他们IT就两个人，连公司有多少台电脑装了Photoshop都说不清。我问她你现在打算怎么办，她说正在看各种软件许可…...
Mythos模型：通用AI在漏洞挖掘与 exploit 生成中的范式跃迁
1. 这不是一次普通升级：Mythos 的能力跃迁到底意味着什么“Claude Mythos Preview”——这个名字在2026年4月的AI圈里炸开时，我正调试一个用Opus 4.6做代码审计的自动化流水线。看到基准测试数据的第一反应不是兴奋，而是下意识关掉了终端窗口…...
math 7 [parallel lines] 2026.05.22
math 7 [parallel lines] 2026.05.22 平行线练习...
ANI-RSS自定义扩展技术深度解析：架构设计与高级定制方案
ANI-RSS自定义扩展技术深度解析：架构设计与高级定制方案 【免费下载链接】ani-rss 基于RSS自动追番、订阅、下载、刮削、洗版 项目地址: https://gitcode.com/gh_mirrors/an/ani-rss ANI-RSS作为一款基于RSS的自动化追番解决方案，其技术架构提供了…...
ElegantBook终极指南：5分钟学会专业书籍排版，告别格式烦恼
ElegantBook终极指南：5分钟学会专业书籍排版，告别格式烦恼 【免费下载链接】ElegantBook Elegant LaTeX Template for Books 项目地址: https://gitcode.com/gh_mirrors/el/ElegantBook 你是否曾经为学术论文或专业书籍的排版而烦恼？复…...
Godot PCK Explorer：可视化浏览与精准定位Godot游戏资源
1. 这不是“解包工具”，而是Godot游戏资产的显微镜 你有没有遇到过这种情况：下载了一个开源Godot游戏，想看看它的UI是怎么做的，动画资源放哪儿，或者想复用某个粒子特效——结果打开文件夹只看到一个几百MB的 game.pc…...
初创团队如何利用Taotoken控制大模型API成本并保持开发灵活性
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 初创团队如何利用Taotoken控制大模型API成本并保持开发灵活性 对于初创团队而言，大模型API是加速产品原型验证和功能开…...
嵌入式开发为何首选C语言？深入解析其核心优势与实战应用
1. 项目概述：嵌入式世界的“通用语”如果你刚踏入嵌入式开发的大门，或者正从其他编程领域转过来，可能会有一个疑问：为什么满世界都在用C语言？从你手上那块小小的单片机，到家里的智能路由器，再到…...
构造函数、this指向和原型链机制
今天在刷力扣 [146. LRU 缓存](https://leetcode.cn/problems/lru-cache/) 的时候，遇到了原型链的写法，想想这个写法我正式开发中从来都没有用过，到底是个什么玩意？遂将各个节点和变量都定义在外面，但是代码居然报错啦…...