浮动练习(3)

##每台电脑分辨率不同,数值高度宽度需要自己调,仅供参考

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            div{
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .main{
                width: 100%;
                font-size: 24px;
                /*text-align: center;*/
                display: block;
            }
            .main .banner{
                widows: 100%;
                height: 100px;
                /*background: red;*/
            }
            .main .banner .logo{
                background: gainsboro;
                width: 20%;
                height: 100%;
                float: left;
            }
            .main .banner .banner1{
                background: gainsboro;
                width: 58%;
                height: 100%;
                float: left;
                margin: 0px 19px;
            }
            .main .banner .banner2{
                background: gainsboro;
                width: 20%;
                height: 100%;
                float: left;                
            }
            .main .menu{
                width: 100%;
                height: 43px;
                background: gainsboro;
                margin: 16px 0px;
            }
            .main .container{
                display: block;
                height: 680px;    
                    
            }
            .main .container .lanmu{
                width: 653px;
                /*background: gainsboro;*/
                height:100%;
                float: left;
                margin-right: 15px;
                display: block;
            }
            .main .container .lanmu2{
                width: 457px;
                /*background: gainsboro;*/
                height:100%;
                float: left;
                display: block;
            }
            .lanmu .lanmu3{
                width: 655px;
                height: 300px;
                border: 2px solid black;
            }
            .lanmu .lanmu4{
                width: 309px;
                height: 355px;
                border: 2px solid black;
                margin: 15px 15px 0px 0px;
                display: inline-block;
                float: left;
            }
            .lanmu .lanmu5{
                margin-right: 0px;
            }
            .lanmu2 .lanmu6{
                width: 450px;
                height: 212px;
                border: 2px solid black;
                margin-bottom: 16px;        
            }
            .foot{
                width: 100%;
                height: 80px;
                background: gainsboro;
                margin: 16px 0px;
            }            
        </style>
    </head>
    <body> 

        <div class="main">
            <div class="banner">
                <div class="logo">logo</div>
                <div class="banner1">banner1</div>
                <div class="banner2">banner2</div>            
            </div>
            <div class="menu">菜单</div>
            <div class="container">
                <div class="lanmu">
                    <div class="lanmu3">栏目一</div>
                    <div class="lanmu4">栏目三</div>
                    <div class="lanmu4 lanmu5">栏目四</div>
                </div>
                <div class="lanmu">
                    <div class="lanmu3">栏目二</div>
                    <div class="lanmu4">栏目五</div>
                    <div class="lanmu4 lanmu5">栏目六</div>
                </div>
                <div class="lanmu2">
                    <div class="lanmu6">栏目七</div>
                    <div class="lanmu6">栏目八</div>
                    <div class="lanmu6">栏目九</div>
                </div>        
            </div>
            <div class="foot">页脚</div>
        </div>        
    </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/897179.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JMeter详细介绍和相关概念

JMeter是一款开源的、强大的、用于进行性能测试和功能测试的Java应用程序。 本篇承接上一篇 JMeter快速入门示例 &#xff0c; 对该篇中出现的相关概念进行详细介绍。 JMeter测试计划 测试计划名称和注释&#xff1a;整个测试脚本保存的名称&#xff0c;以及对该测试计划的注…

《使用Gin框架构建分布式应用》阅读笔记:p108-p126

《用Gin框架构建分布式应用》学习第8天&#xff0c;p108-p126总结&#xff0c;总计18页。 一、技术总结 1.Redis eviction policy (1)什么是 eviction policy? The eviction policy determines what happens when a database reaches its memory limit. (2)配置示例 在r…

Dockerfile样例

一、基础jar镜像制作 ## Dockerfile FROM registry.openanolis.cn/openanolis/anolisos:8.9 RUN mkdir /work ADD jdk17.tar.gz fonts.tar.gz /work/ RUN yum install fontconfig ttmkfdir -y && yum clean all && \chmod -R 755 /work/fonts ADD fonts.conf …

docker配置mysql8报错 ERROR 2002 (HY000)

通过docker启动的mysql&#xff0c;发现navicat无法连接&#xff0c;后来进入容器内部也是无法连接&#xff0c;产生以下错误 root9f3b90339a14:/var/run/mysqld# mysql -u root -p Enter password: ERROR 2002 (HY000): Cant connect to local MySQL server through socket …

二叉树中的最长交错路径

题目链接 二叉树中的最长交错路径 题目描述 注意点 每棵树最多有 50000 个节点每个节点的值在 [1, 100] 之间起点无需是根节点 解答思路 要找到最长交错路径&#xff0c;首先想到的是深度优先遍历因为起点无需是根节点&#xff0c;所以对于任意一个节点&#xff0c;其可以…

4个在线音频剪辑工具,让你的声音更加动听。

最近我开始接触音乐剪辑&#xff0c;想把一些歌曲进行剪辑创作&#xff1b;于是在网上好多了很多的音频剪辑软件进行试用&#xff0c;一番下来&#xff0c;发现了4款使用起来体验感比较好的专业剪辑工具&#xff0c;在这里跟大家分享分享。这些工具都可以被应用于歌曲创作&…

Linux系统基础-进程间通信(3)_模拟实现匿名管道

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Linux系统基础-进程间通信(3)_模拟实现匿名和命名管道 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&a…

【优先算法】--双指针1

“一念既出&#xff0c;万山无阻。”加油陌生人&#xff01; 目录 1.双指针--移动零 2.双指针-复写零 ok&#xff0c;首先在学习之前&#xff0c;为了方便大家后面的学习&#xff0c;我们这里需要补充一个知识点&#xff0c;我这里所谓的指针&#xff0c;不是之前学习的带有…

dolphinscheduler创建工作流及工作流中DataX的使用(简单操作)

一、在项目管理中创建项目&#xff1a;点击创建项目 用哪个用户登录的&#xff0c;所属用户就是哪个&#xff0c;直接输入项目名即可 二、点击项目&#xff0c;在项目中创建工作流&#xff0c;用DataX同步数据 按照图片的步骤依次填写完成&#xff0c;注意 图片中的第九步是写…

2024年双十一腾讯阿里云香港服务器优惠活动汇总

2024年双11狂欢节终于来了&#xff0c;按照往年的惯例&#xff0c;各大云服务器厂商通常会在10月20号左右开始上线新的活动&#xff0c;今年双11期间国内各大云服务器厂商都有哪些活动呢&#xff1f;有哪些活动包括香港云服务器呢&#xff1f;是否有海外服务器的优惠折扣呢&…

HelpLook联合MarketUP发布《2024企业内容营销实战》白皮书!(内附下载链接)

B2B内容营销为什么值得反复讲&#xff1f; 这是一个技术创新、客户聚焦、回归内容的B2B时代&#xff0c;B2B市场源源不断地诞生新故事&#xff0c;从短视频到AIGC&#xff0c;从新产品到新技术&#xff0c;内容始终是所有B2B活动的核心&#xff0c;需要更新更深的内容营销塑造…

Xmind一款极简思维导图和头脑风暴软件,支持PC和移动端,Xmind 2024.10.01101版本如何升级到Pro版?简单操作,最新可用!

文章目录 Xmind下载安装Xmind免费升级到Pro Xmind 是一款全功能的思维导图和头脑风暴软件&#xff0c;不限制节点和文件数&#xff0c;创新无限&#xff0c;界面纯净简洁无广告&#xff0c;支持PC和移动端&#xff0c;思维导图和大纲视图自由切换&#xff0c;可本地化文档存储&…

新版idea菜单栏展开与合并

新版idea把菜单栏合并了看着很是不习惯&#xff0c;找了半天原来在这里展开 ① 点击文件 -> 设置 ② 点击外观与行为 -> 外观 -> 合并主菜单和窗口标题 然后确定&#xff0c;重启即可

【LeetCode每日一题】——523.连续的子数组和

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 前缀和 二【题目难度】 中等 三【题目编号】 523.连续的子数组和 四【题目描述】 给你一个…

【不要离开你的舒适圈】:猛兽才希望你落单,亲人总让你回家,4个维度全面构建舒适圈矩阵

单打独斗的英雄时代已经落幕 抱团取暖才是社会寒冬的良策 自然界中&#xff0c;每个物种都占据着自己的领地和生存空间。 生态位的差异决定了它们的生存方式&#xff0c;一旦离开领地&#xff0c;失去群体的庇护&#xff0c;就会沦为野兽的美餐。 人类社会同样存在隐形圈层…

Nginx16-Lua扩展案例

零、文章目录 Nginx16-Lua扩展案例 1、ngx_lua案例 &#xff08;1&#xff09;需求 请求地址&#xff1a;http://192.168.119.161/getByGender?name张三&gender1Nginx接收到请求后&#xff0c;根据gender传入的值 如果gender传入的是1&#xff0c;则在页面上展示张三先…

初阶数据结构【3】--单链表(比顺序表还好的一种数据结构!!!)

本章概述 前情回顾单链表实现单链表彩蛋时刻&#xff01;&#xff01;&#xff01; 前情回顾 咱们在上一章博客点击&#xff1a;《顺序表》的末尾&#xff0c;提出了一个问题&#xff0c;讲出了顺序表的缺点——有点浪费空间。所以&#xff0c;为了解决这个问题&#xff0c;我…

Java项目-基于springboot框架的线上买菜系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…

WebGL编程指南 - 高级变换与动画基础

学习使用一个矩阵变换库&#xff0c;该库封装了矩阵运算的数学细节。快速上手使用该矩阵库&#xff0c;对图形进行复合变换。在该矩阵库的帮助下&#xff0c;实现简单的动画效果。 矩阵变换库&#xff1a;cuon-matrix.js OpenGL中的函数&#xff1a; 书中 cuon-matrix.js 函数…

go jwt 用户登录和返回用户信息 token ----important!!!

1.每一行代码都有详细注释&#xff0c;解释了其功能和作用。这些注释可以帮助你理解代码如何工作&#xff0c;特别是在处理用户登录、生成 JWT、验证 JWT 和返回用户信息的过程中。 package main // 指定这个文件是一个可执行程序import ("fmt" …