做网站一年大概的盈利/网站运营工作的基本内容
浮动的相关属性
以下使浮动的常用属性值：
float： 设置浮动
以下属性：
left : 设置左浮动
right : 设置右浮动
none ：不浮动，默认值
clear 清除浮动 清除前面兄弟元素浮动元素的响应
以下属性：
left ：清除前面左浮动的影响
right ：清除前面右浮动的影响
both ：清除前面左右浮动的影响
元素浮动之后的特点
-
在上面我们知道了对于浮动的元素，其会脱离标准文档流。
-
浮动产生的影响：
- 脱离文档流。
- 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
- 不会独占一行，可以与其他元素共用一行。
- 不会margin 合并，也不会margin 塌陷，能够完美的设置四个方向的margin 和padding 。
- 不会像行内块一样被当做文本处理（没有行内块的空白问题）。
6.当元素浮动之后，下面的元素就可以向上提升位置，占有浮动元素的位置。
解决浮动产生的影响
- 浮动产生的一些困扰：
- 对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
- 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
- 其实最主要要解决的影响是（父元素高度塌陷），以下是解决方案：
- 方案一： 给父元素指定高度。
- 方案二： 给父元素设置浮动，带来其他影响。
- 方案三： 给父元素设置 overflow:hidden 。
- 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both
- 额外标签：谁需要清除浮动就在该元素后面添加一个空白标签，属性设置为：clear:both
-
方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动 （推荐使用）
-
伪元素 对于其父元素，我们可以给其加上一个类，并对该类进行如下设置：
.clearfix::after {/* 设置添加子元素的内容是空 */content: '';/* 设置添加子元素为块级元素 */display: block;/* 设置添加的子元素的高度0 */height: 0;/* 设置添加子元素看不见 */visibility: hidden;/* 设置clear：both */clear: both;
}作业
- 盒子模型
<!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: 0px auto;padding:0px;/* 自动减去边距宽度 */box-sizing: border-box;}/* 整体 */#all{width: 970px;height: 586px;/* 整体背景颜色，看效果 *//* background-color: palegoldenrod; */}/* 顶部 */#top{width: 970px;height: 103px;/* 在最开始设置整体布局可以写一下 *//* background-color: pink; */}/* 红色的盒子 */.left1{float: left;width: 277px;height: 103px;background-color: red;}/* 右边 */.right1{float: right;width: 679px;height: 103px;}/* 语言选择 */.chinese{float: right;width: 137px;height: 49px;background-color: green;margin-bottom: 8px;}/* 导航条 */.banner{overflow: hidden;width: 679px;height: 46px;background-color: green;}/* 中部 */#middle{width: 970px;height: 435px;/* background-color:pink ; */margin-top:8px ;}/* 黄色部分 大广告 */.left2{float: left;width: 310px;height: 435px;background-color: yellow;margin-right: 10px;}/* 中部的中部部分 蓝色部分 */.center{float: left;width: 450px;height: 435px;}.one{width: 450px;height: 240px;background-color: skyblue;}.two{width: 450px;height: 110px;background-color: skyblue;margin-top: 10px;}.three{width: 450px;height: 30px;background-color: skyblue;margin-top: 10px;}.right2{overflow: hidden;width: 190px;height: 400px;background-color: purple;}/* 深蓝色 */.blue{float: left;width: 648px;height: 25px;background-color: blue;margin-top: 10px;}/* 底部 */#bottom{width: 970px;height: 40px;background-color: darkorange;margin-top: 10px;}</style>
</head>
<body><!-- 整体盒子模型 --><div id="all"><!-- 顶部 --><div id="top"><!-- 红色的盒子 --><div class="left1"></div><!-- 右部分 --><div class="right1"><div class="chinese"></div><div class="banner"></div></div></div><!-- 中部 --><div id="middle"><!-- 黄色部分 --><div class="left2"></div><!-- 浅蓝色部分 --><div class="center"><div class="one"></div><div class="two"></div><div class="three"></div><!-- 深蓝色 --><div class="blue"></div></div><!-- 紫色 --><div class="right2"></div></div><!-- 底部 --><div id="bottom"></div></div>
</body>
</html>
- 公告
<!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: 0px;padding:0px;}#all{width: 500px;height: 400px;}.top{width: 480px;/* height: 100px; */margin: 10px;margin-bottom: 0px;border-top: 1px dashed;} .bgc{width: 480px;height: 20px;background-color: rgb(227, 235, 241);}p{display: inline-block;border-left:3px solid blue ;padding-left: 16px;margin-left: 5px;font-size: 24px;/* margin-top: 20px; */color: blue;font-weight:bolder;}.top a{float: right;margin-top: 10px;color:blue ;}a{text-decoration: none;}.one{width: 480px;height: 2px;background-image: linear-gradient(to right , rgb(61, 47, 187),red);margin-top: 5px;}.bottom{width: 500px;}.bottom li{border-bottom: 1px dashed rgb(210, 207, 207);background: url(..//imgs/triangle1.png) no-repeat 4px;background-size: 12px 12px;padding: 5px;padding-left: 24px;margin: 10px;}span{float: right;}</style>
</head>
<body><!-- 整体 --><div id="all"><!-- 通知公告 --><div class="top"><div class="bgc"></div><p>通知公告</p> <a href="#">更多》</a><div class="one"></div></div><!-- 内容 --><div class="bottom"><ul><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li></ul></div></div>
</body>
</html>相关文章：
HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）
浮动的相关属性 以下使浮动的常用属性值： float： 设置浮动 以下属性： left : 设置左浮动 right : 设置右浮动 none ：不浮动，默认值clear 清除浮动 清除前面兄弟元素浮动元素的响应 以下属性： left &…...
【C++ 滑动窗口】2134. 最少交换次数来组合所有的 1 II
本文涉及的基础知识点 C算法：滑动窗口及双指针总结 LeetCode2134. 最少交换次数来组合所有的 1 II 交换 定义为选中一个数组中的两个 互不相同 的位置并交换二者的值。 环形 数组是一个数组，可以认为 第一个 元素和 最后一个 元素 相邻 。 给你一个 二…...
使用 PyTorch 实现并测试 AlexNet 模型，并使用 TensorRT 进行推理加速
本篇文章详细介绍了如何使用 PyTorch 实现经典卷积神经网络 AlexNet，并利用 Fashion-MNIST 数据集进行训练与测试。在训练完成后，通过 TensorRT 进行推理加速，以提升模型的推理效率。 本文全部代码链接：全部代码下载 环境配置 为了保证代码在 GPU 环境下顺利运行，我们将…...
Python 数据可视化详解教程
Python 数据可视化详解教程 数据可视化是数据分析中不可或缺的一部分，它通过图形化的方式展示数据，帮助我们更直观地理解和分析数据。Python 作为一种强大的编程语言，拥有丰富的数据可视化库，如 Matplotlib、Seaborn、Plotly 和 …...
springboot集成opencv开源计算机视觉库
最近项目需要用到opencv，网上看到很多资料都是下载安装并且引入jar包与dll文件，感觉很麻烦，不是我想要的，于是花时间折腾了下，不需要任何安装与引入jar包与dll文件，简单方便，快速上手。 先说说…...
CCF ChinaOSC |「开源科学计算与系统建模openSCS专题分论坛」11月9日与您相约深圳
2024年11月9日至10日，以“湾区聚力 开源启智”为主题的2024年中国计算机学会中国开源大会（CCF ChinaOSC）将在深圳召开。大会将汇聚国内外学术界、顶尖科技企业、科研机构及开源社区的精英力量，共同探索人工智能技术和人类智慧的无…...
2024年11月8日上海帆软用户大会
2024年11月8日上海帆软用户大会 2024年11月8日，上海成功举办了帆软用户大会，主题为“数字聚力，绽放新机”。大会汇聚了众多行业专家和企业代表，共同探讨数字化转型和商业智能领域的最新趋势和实践。 大会亮点： 专家…...
信息泄露漏洞一文速通
文章目录 信息泄露漏洞一文速通敏感信息の概念敏感信息の分类企业敏感信息用户敏感信息站点敏感信息 如何挖掘信息泄露漏洞？信息泄露风险清单（checklist）未授权访问类文件与数据泄露开发与调试信息泄露公共配置文件泄露其他敏感信息泄露点 威…...
Android 启动时应用的安装解析过程《二》
上一篇内容说到InitAppsHelper这个类的initSystemApps函数，只说了一下几个重要参数的来源还没展开，这里继续，有兴趣的可以看链接: Android 启动时应用的安装解析过程《一》 一、系统应用的扫描安装 /*** Install apps from system dirs.*/Gu…...
智谱AI:ChatGLM强大的生成式语言模型
目录 智谱AI:ChatGLM强大的生成式语言模型 一、ChatGLM的定义与特点 二、ChatGLM的应用场景 三、举例说明 四、注意事项 智谱AI:ChatGLM强大的生成式语言模型 它通过对话的方式能够生成自然流畅的文本，这一特性使其在多个领域都有广泛的应用潜力，特别是在智能对话和智能…...
git tag
已经发布了 v1.0 v2.0 v3.0 三个版本，这个时候，我突然想不改现有代码的前提下，在 v2.0 的基础上加个新功能，作为 v4.0 发布。就可以检出 v2.0 的代码作为一个 branch ，然后作为开发分支。 要查看仓库中的所有标签 gi…...
Golang--反射
1、概念 反射可以做什么? 反射可以在运行时动态获取变量的各种信息，比如变量的类型，类别等信息如果是结构体变量，还可以获取到结构体本身的信息(包括结构体的字段、方法)通过反射，可以修改变量的值，可以调用关联的方法…...
ABAP：SET CURSOR FIELD设置鼠标焦点
SET CURSOR FIELD <字段名>：设置鼠标焦点到该字段 SET CURSOR 设置到鼠标焦点列还是行 SET CURSOR LINE 设置鼠标焦点到行 GET CURSOR field <字段名> ：这个相对应的获取鼠标焦点得到的字段...
【专题】2024年全球生物医药交易报告汇总PDF洞察（附原数据表）
原文链接：https://tecdat.cn/?p38191 在当今复杂多变的全球经济环境下，医药行业正面临着诸多挑战与机遇。2024 年，医药行业的发展态势备受关注。 一方面，全球生物医药交易活跃，2021 - 2023 年的交易中，已…...
LabVIEW气体检测系统
随着工业化进程的加速，环境污染问题愈加严峻，尤其是有害气体的排放对人类生存环境构成了严重威胁。为了更好地监测这些有害气体，开发一个高效、准确且易于操作的气体检测系统显得尤为重要。LabVIEW软件开发的气体检测系统，采用激光…...
LeetCode78. 子集（2024秋季每日一题 58）
给你一个整数数组 nums ，数组中的元素 互不相同 。返回该数组所有可能的 子集（幂集）。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1： 输入：nums [1,2,3] 输出：[[],[1],[2],[1,2],[3…...
推荐一款功能强大的视频修复软件：Apeaksoft Video Fixer
Apeaksoft Video Fixer是一款功能强大的视频修复软件，专门用于修复损坏、不可播放、卡顿、画面失真、黑屏等视频问题。只需提供一个准确且有效的样本视频作为参考，该软件就能将受损视频修复到与样本视频相同的质量。该软件目前支持MP4、MOV、3GP等格式的…...
Golang--网络编程
1、概念 网络编程：把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统，从而使众多的计算机可以方便地互相传递信息、共享数据、软件、数据信息等资源。 客户端（Client） 客户端是请求服务…...
区块链技术在数字版权管理中的应用
💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 区块链技术在数字版权管理中的应用 区块链技术在数字版权管理中的应用 区块链技术在数字版权管理中的应用 引言 区块链技术概述 …...
WPS单元格重复值提示设置
选中要检查的所有的单元格 设置提示效果 当出现单元格值重复时，重复的单元格就会自动变化 要修改或删除，点击...
Scala 的包及其导入
Scala使用包来创建用于模块化程序的命名空间。通过在Scala文件的顶部声明一个或多个包名称可以创建包，另一种声明包的方式是使用0，这种方式可以嵌套包，并且提供更好的范围与封装控制。对于包的导入，Scala与Java的区别之一便是&…...
架构师备考-概念背诵（软件工程）
软件工程 软件开发生命周期： 软件定义时期：包括可行性研究和详细需求分析过程，任务是确定软件开发工程必须完成的总目标，具体可分成问题定义、可行性研究、需求分析等。软件开发时期：就是软件的设计与实现，可分成概要设计、详细设计、编码、测试等。软件运行和维护：就是…...
DIP switch是什么？
**DIP开关（DIP switch），也称为指拨开关，是一种可以人工调整的开关，通常以标准双列直插封装（DIP）的形式出现。**DIP开关一般设计在印刷电路板上，配合其他电子元件使用，…...
【销帮帮-注册_登录安全分析报告-试用页面存在安全隐患】
联通支付注册/登录安全分析报告 前言 由于网站注册入口容易被黑客攻击，存在如下安全问题： 暴力破解密码，造成用户信息泄露短信盗刷的安全问题，影响业务及导致用户投诉带来经济损失，尤其是后付费客户，风险巨…...
2024年下半年系统分析师论文
2024年下半年11月份系统分析师考试论文 1、静态测试工具和方法 可以从代码桌前检查，代码审查，代码走查组织文章 2、DevOps开发 可以从开发，运维，测试的自动化协作入手，跨部门沟通需求也算 3、业务流程分析 从BPR…...
【计算机网络】万字详解 UDP 和 TCP
🥰🥰🥰来都来了，不妨点个关注叭！ 👉博客主页：欢迎各位大佬!👈 文章目录 1. UDP1.1 UDP 报文格式1.1.1 源端口/目的端口1.1.2 报文长度1.1.3 校验和 2. TCP2.1 TCP 报文结构2.2 TCP 特…...
创建者模式之【建造者模式】
建造者模式 概述 将一个复杂对象的构建与表示分离，使得同样的构建过程可以创建不同的表示。 分离了部件的构造(由Builder来负责)和装配(由Director负责)。 从而可以构造出复杂的对象。这个模式适用于：某个对象的构建过程复杂的情况。由于实现了构建和…...
电商系统中，如何解决部分商品在短时间大量访问的单一热点问题？------Range范围分片
在电商系统中，部分商品在短时间内遭受大量访问的单一热点问题，可能引发服务器压力增大、响应速度变慢、甚至系统崩溃等问题。为了解决这一问题，可以采取以下策略： 一、增加服务器容量和带宽 提升硬件性能：为了应对高…...
利用VMware workstation pro 17安装 Centos7虚拟机以及修改网卡名称
通过百度网盘分享的文件：安装虚拟机必备软件 链接：https://pan.baidu.com/s/1rbYhDh8x1hTzlSNihm49EA?pwdomxy 提取码：omxy 123网盘 https://www.123865.com/s/eXPrVv-UsKch 提取码:eNcy 先自行安装好VMware workstation pro 17 设置虚拟机…...
前端 性能优化 （图片与样式篇）
文章目录 前端能够做哪些图片优化?1、减小图片体积2、图片缓存服务工作线程 (Service Workers)缓存IndexDB缓存图片LocalStorage缓存 3、图片懒加载使用 loading"lazy" 属性 4、不同分辨率下使用不同的图片5、使用webp格式的图片6、配置图片CDN7、减少图片和动图的使…...