c语言做项目网站csdn/色盲测试图第六版及答案大全
浮动设计初衷
类似报纸的布局栏,浮动是为了让图片嵌在文本流中,文本不会覆盖图片,但早期布局只有浮动,因此将浮动用于布局,后来才有了display:inline-block display: table flexbox和网格布局等
基本代码
<html><head><style>:root {box-sizing: border-box;}*,::before,:;after {box-sizing: inherit;}body {background-color: #eee;font-family: Helvetica, Arial, sans-serif;}body * + * {margin-top: 1.5em;}header {padding: 1em 1.5em;color: #fff;background-color: #0072b0;border-radius: .5em;margin-bottom: 1.5em;}.main {padding: 0 1.5em;background-color: #fff;border-radius: .5em;}</style></head><body><div class="container"><header><h1>TJH Special Club</h1></header><main class="main clearfix"><h2>Running Tips</h2><div><div class="media"><img class="media-image" src="runner.png"><div class="media-body"><h4>Strength</h4><p>Strength train is important</p></div></div><div class="media"><img class="media-image" src="shoes.png"><div class="media-body"><h4>Cadence</h4><p>cadence</p></div></div><div class="media"><img class="media-image" src="shoes.png"><div class="media-body"><h4>Transform it</h4><p>I like running</p></div></div><div class="media"><img class="media-image" src="runner.png"><div class="media-body"><h4>concentrate mind</h4><p>focus your mind</p></div></div></div></main></div></body>
</html>
双容器模式
将内容放入两个嵌套的容器总,通过设置内容器的外边距,让内容器左右居中
body是外层容器 container是内层容器,对内层容器按双容器模式设置样式。发现内容器宽度达到最大宽度,然后左右居中
.container {max-width: 1080px;margin: 0 auto;}
是否有必要学习浮动
有 贴近老代码,且让图片被文本环绕,浮动是少数能实现的方案
容器折叠和清除浮动
容器折叠
将四个media浮动到容器左侧。发现四个media好像跑到了容器外边,是因为浮动元素的高度不会加给父元素上,不过这恰恰符合浮动的初衷:浮动是为了让图片被文本环绕,所以图片高度不会加给父元素
.media {float: left;width: 50%;padding: 1.5em;background-color: #eee;border-radius: .5em;}
这并不是我们想要的,我们想要四个媒体元素都被包含在容器元素中
方法1
使用clear属性。需要将一个元素放到容器元素内的末尾元素,这会让容器元素扩展到该元素的下方
通俗理解,一个浮动图片会被文字环绕,如果清除浮动,则该图片自成一行,不再被文字环绕
理解清除浮动
可以用伪元素取代额外增加的div元素,清除浮动可以叫clearfix
伪元素是一种特殊的选择器,以双冒号::开头,最常用的伪元素是::before ::after
.clearfix::after {display: block;content: " ";clear: both;}
浮动元素外边距在容器内不会被折叠,而容器内非浮动元素外边距会被折叠(runnering tips紧贴最上边)
通过对容器内第一个和最后一个元素设置属性避免外边距折叠
.clearfix::before,.clearfix::after {display: table;content: " ";}
clear清除浮动只对块元素有效,所以可以用display: table但不能display:table-cell
相关文章:

深入解析css-浮动-学习小结
浮动设计初衷 类似报纸的布局栏,浮动是为了让图片嵌在文本流中,文本不会覆盖图片,但早期布局只有浮动,因此将浮动用于布局,后来才有了display:inline-block display: table flexbox和网格布局等 基本代码 <html&…...

【机器学习】机器学习的基本分类-无监督学习-K-Means聚类
K-Means 是一种基于划分的无监督学习算法,用于数据聚类任务,它通过迭代优化将数据分组为 k 个互斥的簇,使得每个簇内数据点的相似性最大化,而簇间的相似性最小化。它通过最小化簇内样本点到簇中心的距离平方和(即误差平…...

.NET for Android/iOS应用的如何在各自的系统运行
1. .NET for Android 上的运行机制 Android 应用使用 Mono 运行时 或 .NET 运行时 在 Android 设备上执行。具体过程如下: 编译过程: C# 代码编写:开发者使用 C# 编写业务逻辑代码。编译为 IL:C# 代码通过 Roslyn 编译器 转换为…...

访问django后台,提示CSRF验证失败. 请求被中断403
我的项目是在服务器部署添加ip后报错的这个错误是因为 Django 的 CSRF 验证机制检测到请求的 Origin 或 Referer 头部与受信任的域名不匹配。要解决此问题,可以将新域名添加到 Django 的 settings.py 中的 CSRF_TRUSTED_ORIGINS 设置里. 1.非debug模式看到的报错信…...

Scala的隐式转换(1)
package hfd //需求: //完成一个功能,让所有的字符串都能调用isPhone方法,来校验自己是不是一个手机号 object Test37_1 {class StrongString(val str: String) {//开始你的代码def isPhone(): Boolean {val reg "1[3-9]\\d{9}".…...

华为TaurusDB与GaussDB:信创改造的“降本提效”之路
近年来,信创(信息技术应用创新)已成为中国国央企数字化转型的关键词。伴随这一浪潮,众多企业面临一个迫切问题:如何在兼顾性能与成本的前提下,完成核心系统的迁移改造?华为TaurusDB和GaussDB的加…...

Linux网络编程---本地套接字
1.概述 本地套接字 1:作用:本地的进程间通信 2.有关系的进程间通信 3.没有关系的进程间的通信 本地套结字实现流程和网络套结字实现相似,一般采用tcp 二.通信流程 本地套结字通信的流程:1.服务器端:1.1 int fd socket(AF_UNIX/AF_LOCAL,…...

数据结构之四:堆和二叉树
堆的实现:SData/Heap/heap.c Hera_Yc/bit_C_学习 - 码云 - 开源中国 树 树的概念 树:是一个非线性数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合。 把它叫做树是因为它看起来像一棵倒挂的树,也就…...

【论文阅读】国际开源发展经验及其对我国开源创新体系建设的启示
作者:包云岗老师 包云岗老师是计算机体系结构方向的大牛,推动了体系结构方面的开源事业! 欢迎对本栏目感兴趣的人学习"一生一芯"~ 学习体会: 承接前文,唐志敏老师讲到已有的软硬件生态系统和开发成本制约了对新结构的探…...

redis击穿,穿透,雪崩以及解决方案
目录 击穿 解决方案一 解决方案二 穿透 解决方案 雪崩 解决方案 击穿 指的是单个key在缓存中查不到,去数据库查询,这样如果并发不大或者数据库数据量不大的话是没有什么问题的。 如果数据库数据量大并且是高并发的情况下那么就可能会造成数据库压…...

时频转换 | Matlab格拉姆角和场Gramian angular summation field一维数据转二维图像方法
目录 基本介绍程序设计参考资料获取方式 基本介绍 时频转换 | Matlab格拉姆角和场Gramian angular summation field一维数据转二维图像方法 程序设计 clear clc % close all load x.mat % 导入数据 x x(1:5120); % 本数据只选择5120个点进行分析 fs 6400 ; % 数据采样频…...

qt QCryptographicHash详解
1、概述 QCryptographicHash是Qt框架中提供的一个类,用于实现加密散列函数,即哈希函数。哈希函数能够将任意长度的数据转换为固定长度的哈希值,也称为散列值或数据指纹。这个哈希值通常用于数据的完整性校验、密码存储等场景。QCryptographi…...

亚马逊云科技大语言模型加速OCR应用场景发展
目录 前言Amazon Bedrock关于OCR解决方案Amazon Bedrock进行OCR关键信息提取方案注册亚马逊账号API调用环境搭建 总结 前言 大语言模型是一种基于神经网络的自然语言处理技术,它能够学习和预测自然语言文本中的规律和模式,可以理解和生成自然语言的人工…...

什么是分库?分表?分库分表?
分库分表,是企业里面比较常见的针对高并发、数据量大的场景下的一种技术优化方案,所谓“分库分表”,根本不是一回事,而是三件事,他们要解决的问题也都不一样。 这三个事分别是“只分库不分表”、“只分表不分库”、以…...

QT 中 sqlite 数据库使用
一、前提 --pro文件添加sql模块QT core gui sql二、使用 说明 --用于与数据库建立连接QSqlDatabase--执行各种sql语句QSqlQuery--提供数据库特定的错误信息QSqlError查看qt支持的驱动 QStringList list QSqlDatabase::drivers();qDebug()<<list;连接 sqlite3 数据库 …...

不一样的CSS(4)--icon图标系列之svg
序言 上一节内容我们讲解了如何利用css去画一个五角星,其中包括了使用svg的方法,有些小伙伴们对svg的使用不是很了解,那么本节内容我们主要来讲一下,关于svg标签的的使用。 目录 序言一、svg的介绍二、安装SVG扩展插件三、SVG基…...

Level DB --- Cache
class Cache是Level DB中的重要的数据结构,它是一个LRU(Least Recently Used) Cache的实现。这里面的判断条件主要是内存大小(而不是存储entry的个数)。当内存达到上界,会释放不被使用的entry(存…...

学在西电录播课使用python下载,通过解析m3u8协议、多线程下载ts视频块以及ffmpeg合并
本文涵盖的内容仅供个人学习使用,如果侵犯学校权利,麻烦联系我删除。 初衷 研究生必修选逃, 期末复习怕漏过重点题目,但是看学在西电的录播回放课一卡一卡的,于是想在空余时间一个个下载下来,然后到时候就…...

Springboot3介绍
一、Springboot3简介: https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html?spmwolai.workspace.0.0.68b62306Q6jtTw#getting-started.introducing-spring-boot 无论使用XML、注解、Java配置类还是他们的混合用法,配置文件过于…...

Oracle 11G DataGuard GAP 修复过程(通过主库scn增备恢复)
Oracle 11G DataGuard GAP 修复 (通过主库scn增备恢复) 介绍 DG GAP 顾名思义就是:DG不同步,当备库不能接受到一个或多个主库的归档日志文件时候,就发生了 GAP。 那么,如果遇到GAP如何修复呢?…...

WLAN AutoConfig服务假死?重启服务恢复网络连接!
目录 背景: 过程: 可能引起原因: 具体解决步骤: 方法一: 方法二: 总结: 背景: 这个问题困扰我好长一段时间了,每次下班将电脑关机后,次日早上电脑开机…...

【linux】(30)shell-条件判断
if 语句 if 语句是 Shell 脚本中用于条件判断的基本结构。 基本语法 if 语句的基本语法如下: if [ condition ] thencommands ficondition 是要测试的条件。commands 是在条件为真时要执行的命令。 示例 简单条件判断 #!/bin/bashif [ 1 -eq 1 ] thenecho &q…...

docker安装启动问题解决排查
一、安装docker报错 刚开始安装docker报这个错: Error: Transaction test error: file /usr/libexec/docker/cli-plugins/docker-buildx from install of docker-ce-cli-1:20.10.8-3.el8.x86_64 conflicts with file from package docker-buildx-plugin-0:0.14.0…...

《MySQL 查询进阶:复杂查询语句的魅力》
一、引言 MySQL 的复杂查询语句就像是一把神奇的钥匙,能够打开数据世界的大门,展现出数据的无限魅力。本文将带你深入探索 MySQL 查询进阶技巧,从常用查询到子查询,再到视图的运用,让你领略复杂查询语句的强大功能。 …...

OpenHarmony-3.HDF框架(2)
OpenHarmony HDF 平台驱动 1.平台驱动概述 系统平台驱动框架是系统驱动框架的重要组成部分,它基于HDF驱动框架、操作系统适配层(OSAL, operating system abstraction layer)以及驱动配置管理机制,为各类平台设备驱动的实现提供标准模型。 系统平台驱动(…...

人大金仓(KingBaseEs)数据库操作手册
人大金仓数据库(KingbaseES)是由北京人大金仓信息技术股份有限公司(简称人大金仓)自主研发的、具有自主知识产权的通用关系型数据库管理系统。 官方下载地址:KingbaseES 人大金仓数据库 KES技术文档在线手册…...

Flink+Paimon实时数据湖仓实践分享
随着 Paimon 近两年的推广普及,使用 FlinkPaimon 构建数据湖仓的实践也越来越多。在 Flink 实时数据开发中,对于依赖大量状态 state 的场景,如长周期的累加指标计算、回撤长历史数据并更新等,使用实时数仓作为中间存储来代替 Flin…...

w~深度学习~合集1
我自己的原文哦~ https://blog.51cto.com/whaosoft/12663254 #Motion Plan 代码 github.com/liangwq/robot_motion_planing 轨迹约束中的软硬约束 前面的几篇文章已经介绍了,轨迹约束的本质就是在做带约束的轨迹拟合。输入就是waypoint点list,约束…...

KVM 虚拟化
KVM(Kernel-based Virtual Machine)是一种基于内核的虚拟机技术,具有以下优势: 开源性:KVM是完全开源的,这意味着它没有许可费用,适合预算有限的用户。性能:KVM利用Linux内…...

MONI后台管理系统-数据库设计
前言:该文档纯属个人总结设计,如果雷同,纯属巧合,其中还有很不合理之处,请大家批评指正。如有应用于项目,请慎重。 注意: 如有需要该文件的sql脚本,请移步:资源下载 1. 表清单 序号…...