CSS中页面的布局案例-利用浮动

(接期末课程设计题目,支持定制)

利用浮动完成页面布局

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*清除默认样式*/*{margin: 0;padding: 0;}/*设置头部div*/.header{/*设置一个宽度*/width: 1000px;/*设置一个高度*/height: 120px;/*设置一个背景颜色*/background-color: yellowgreen;/*设置居中*/margin: 0 auto;}/*设置一个content*/.content{/*设置一个宽度*/width: 1000px;/*设置一个高度*/height: 400px;/*设置一个背景颜色*/background-color: orange;/*居中*/margin: 10px auto;}/*设置content中小div的样式*/.left{width: 200px;height: 100%;background-color: skyblue;/*向左浮动*/float: left;}.center{width: 580px;height: 100%;background-color: yellow;/*向左浮动*/float: left;/*设置水平外边距*/margin: 0 10px;}.right{width: 200px;height: 100%;background-color: pink;/*向左浮动*/float: left;}/*设置一个footer*/.footer{/*设置一个宽度*/width: 1000px;/*设置一个高度*/height: 120px;/*设置一个背景颜色*/background-color: silver;/*居中*/margin: 0 auto;}</style></head><body><!-- 头部div --><div class="header"></div><!-- 主体内容div --><div class="content"><!-- 左侧div --><div class="left"></div><!-- 中间div --><div class="center"></div><!-- 右侧div --><div class="right"></div></div><!-- 底部信息div --><div class="footer"></div></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript 对象和 JSON 字符串的区别

JavaScript 对象和 JSON 字符串是两种不同的数据表示形式&#xff0c;它们有以下区别&#xff1a; 语法格式&#xff1a;JavaScript 对象是 JavaScript 语言中的一种数据类型&#xff0c;使用花括号 {} 包裹&#xff0c;属性和值之间使用冒号 : 分隔&#xff0c;并且使用逗号 …

在Jetpack Compose中使用ExoPlayer实现直播流和音频均衡器

在Jetpack Compose中使用ExoPlayer实现直播流和音频均衡器 背景 ExoPlayer与Media3的能力结合&#xff0c;为Android应用程序播放多媒体内容提供了强大的解决方案。在本教程中&#xff0c;我们将介绍如何设置带有Media3的ExoPlayer来支持使用M3U8 URL进行直播流。此外&#x…

PortSwigger Business Logic Vulnerabilities

lab1: Excessive trust in client-side controls 给了100块 买价值1337的货 在历史包里发现 尝试直接修改价格 lab2: High-level logic vulnerability 这里把加入购物车时价格可控的点修复了 但是数量可控 我们可以买负数的东西来加钱 但是返回Cart total price cannot be …

【数据结构】四、串

目录 一、定义 二、表示与实现 定长顺序存储 堆分配存储 链式存储 三、BF算法 四、KMP算法 1.求next数组 方法一 方法二&#xff08;考试方法&#xff09; 2.KMP算法实现 方法一 方法二 3.nextval 4.时间复杂度 本节最重要的就是KMP算法&#xff0c;其他要求不高…

汽车级EEPROM 存储器 M24C64-DRMN3TP/K是电可擦除可编程只读存储器?它的功能特性有哪些?

M24C64-DRMN3TP/K是一款64 Kbit串行EEPROM汽车级设备&#xff0c;工作温度高达125C。符合汽车标准AEC-Q100 1级规定的极高可靠性。 该设备可通过一个高达1MHz的简单串行I2C兼容接口访问。 存储器阵列基于先进的真EEPROM技术&#xff08;电可擦除可编程存储器&#xff09;。M2…

【力扣】543. 二叉树的直径

543. 二叉树的直径 突然间发现现在刷的题好多都和大一时学的数据结构密切相关&#xff0c;比如说这道题就用到的深度优先搜索算法。 题解&#xff1a; 以根节点为例&#xff0c;我们通过遍历左边的深度就可以得到当前左子树的长度&#xff0c;然后再遍历其右边&#xff0c;就…

吴恩达RLHF课程笔记

1.创建偏好数据集 一个prompt输入到LLM后可以有多个回答&#xff0c;对每个回答选择偏好 比如{prompt,answer1,answer2,prefer1} 2.根据这个数据集&#xff08;偏好数据集&#xff09;&#xff0c;创建reward model&#xff0c;这个model也是一个LLM,并且它是回归模型&#…

关于networkx图的文本格式保存与加载

今天需要将networkx生成的graph保存一下&#xff0c;然后再从新加载&#xff0c;虽然可以单独保存边在加载&#xff0c;但是感觉有麻烦&#xff0c;后来找到了json_graph,可以进行文本格式的保存和加载 import networkx as nx from networkx.readwrite import json_graphDG n…

momentum2靶机

文章妙语 遇事不决&#xff0c;可问春风&#xff1b; 春风不语&#xff0c;遵循己心。 文章目录 文章妙语前言一、信息收集1.IP地址扫描2.端口扫描3.目录扫描 二&#xff0c;漏洞发现分析代码bp爆破1.生成字典2.生成恶意shell.php2.抓包 三&#xff0c;漏洞利用1.反弹shell 四…

Diffusion扩散模型学习:图片高斯加噪

高斯分布即正态分布&#xff1b;图片高斯加噪即把图片矩阵每个值和一个高斯分布的矩阵上的对应值相加 1、高斯分布 np.random.normal 一维&#xff1a; import numpy as np import matplotlib.pyplot as pltdef generate_gaussian_noise(mean, std_dev, size):noise np.ran…

低代码如何助力企业数字化转型?

目录 一、低代码开发是什么&#xff1f; 二、低代码与企业数字化转型 1&#xff09;集成化 2&#xff09;智能化 3&#xff09;定制化 三、低代码开发平台对于企业数字化转型的优势 01、提供源码 02、私有化部署 03、敏捷开发 04、拓展能力 四、低代码带来的效益 以…

量化服务器 - 后台挂载运行

服务器 - 后台运行 pip3命令被kill 在正常的pip命令后面加上 -no-cache-dir tmux 使用教程 https://codeleading.com/article/40954761108/ 如果你希望在 tmux 中后台执行一个 Python 脚本&#xff0c;你可以按照以下步骤操作&#xff1a; 启动 tmux: tmux这将会创建一个新…

绝对干货-讲讲设计模式之结构型设计模式

经典的23种设计模式种属于结构型设计模式的是装饰模式&#xff0c;适配器模式&#xff0c;代理模式&#xff0c;组合模式&#xff0c;桥接模式&#xff0c;外观模式&#xff0c;享元模式。 如果说创建型设计模式解决的是创建对象的问题&#xff0c;那么结构型模式就是通过类和…

JS逆向基础

JS逆向基础 一、什么是JS逆向&#xff1f;二、接口抓包三、逆向分析 一、什么是JS逆向&#xff1f; 我们在网站进行账号登录的时候对网页源进行抓包就会发现我们输入的密码在后台会显示为一串由字母或数字等符号&#xff0c;这就是经过加密呈现的一段加密文字&#xff0c;而分…

python脚本 链接到ssh服务器 快速登录ssh服务器 ssh登录

此文分享一个python脚本,用于管理和快速链接到ssh服务器。 效果演示 🔥完整演示效果 👇第一步,显然,我们需要选择功能 👇第二步,确认 or 选择ssh服务器,根据配置文件中提供的ssh信息,有以下情况 👇场景一,只有一个候选ssh服务器,则脚本会提示用户是否确认链…

blender径向渐变材质-着色编辑器

要点&#xff1a; 1、用纹理坐标中的物体输出连接映射中的矢量输入 2、物体选择一个空坐标&#xff0c;将空坐标延z轴上移一段距离 3、空坐标的大小要缩放到和要添加材质的物体大小保持一致

存 储 管 理

(1) 存储管理的任务和功能是什么&#xff1f; 解&#xff1a; 存储管理的主要任务是&#xff1a; 支持多道程序的并发执行&#xff0c;使多道程序能共享存储资源&#xff0c;在互不干扰的环境中并发执行。方便用户&#xff0c;使用户减少甚至摆脱对存储器的管理&#xff0c;使…

【前端】前后端通信方法与差异(未完待续)

系列文章 【Vue】vue增加导航标签 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/134965353 【Vue】Element开发笔记 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/133947977 【Vue】vue&#xff0c;在Windows IIS平台…

Pytorch 读取t7文件

Pytorch 1.0以上可以使用&#xff1a; import torchfileth_path r"./path/xx.t7" data torchfile.load(th_path)print(data.shape)若data的尺寸为0&#xff0c;则将torch版本降为0.4.1&#xff0c;并使用以下函数&#xff1a; from torch.utils.serialization im…

WPF中使用DataGrid封装组合控件TreeView+DataGrid

&#xff08;关注博主后&#xff0c;在“粉丝专栏”&#xff0c;可免费阅读此文&#xff09; wpf的功能非常强大&#xff0c;很多控件都是原生的&#xff0c;但是要使用TreeViewDataGrid的组合&#xff0c;就需要我们自己去封装实现。 我们需要的效果如图所示&#x…