布局技巧及CSS初始化
一，margin负值巧妙应用
二，文字围绕浮动元素
三，行内块
四，CSS三角强化
五，CSS初始化
一，margin负值巧妙应用
制作盒子的细线边框：
鼠标经过li后变色：
二，文字围绕浮动元素
三，行内块
<style>* {margin: 0;padding: 0;}.box {text-align: center;}.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none;}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}</style>
</head>
<body><div class="box"><a href="#"class="prev"><<上一页</a><a href="#"class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="elp">...</a><a href="#"class="next">>>下一页</a>到第<input type="text">页<button>确定</button></div>
</body>
</html>四，CSS三角强化
.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style>
</head>
<body><div class="box1"></div><div class="price"><span class="miaosha">1650<i></i></span><span class="origin">5650</span></div>
</body>
</html>五，CSS初始化
CSS初始化是指重设浏览器的样式。每个网页必须首先进行CSS初始化
/* 把所有标签的内外边距清零 */
* {margin: 0;padding: 0
}
/* em和i斜体的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li的小圆点 */
li {list-style: none
}img {/* 照顾低版本浏览器 如果图片外面包含了链接会有边框问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle
}button {/* 当鼠标经过button按钮的时候，鼠标变成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* \5B8B\4F53宋体的意思，这样浏览器兼容性较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}
/* 伪元素清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}相关文章：
布局技巧及CSS初始化
一，margin负值巧妙应用 二，文字围绕浮动元素 三，行内块 四，CSS三角强化 五，CSS初始化 一，margin负值巧妙应用 制作盒子的细线边框： 鼠标经过li后变色： 二，文字围绕…...
excel怎么设置密码？轻松保护您的工作表
在数字化时代，数据的安全性显得尤为重要。excel作为我们日常工作中广泛使用的办公软件，其中可能包含了大量的敏感数据。为了确保这些数据不被未授权的人访问，本文将为您详细介绍excel怎么设置密码，从而有效地保护您的数据安全。 方…...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TimePicker组件
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TimePicker组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、TimePicker组件 TextClock组件通过文本将当前系统时间显示在设备上。支持不…...
Springboot集成Camunda并完成一条流程实例
💖专栏简介 ✔️本专栏将从Camunda(卡蒙达) 7中的关键概念到实现中国式工作流相关功能。 ✔️文章中只包含演示核心代码及测试数据，完整代码可查看作者的开源项目snail-camunda ✔️请给snail-camunda 点颗星吧😘 💖设计流程定…...
宠物用品/宠物自动饮水机方案
宠物自动饮水机方案原理 宠物自动饮水机，也叫做智能宠物饮水机，是一种为宠物设计的智能化饮水器。应用核心主要在于智能化水泵控制，以及外围传感器电路。 宠物自动饮水机使用方便，不用频繁的换水。另外，自来水的水质可…...
git小白进阶之路
git是最常用的版本控制工具，我对其进行了整理后续补充，这个文档欢迎大家来讨论，当前我的视频梳理： git小白进阶之路_哔哩哔哩_bilibili，非常希望大佬们能够批评指正，并多多交流。 目录 初始配置 配置账号…...
哈希表——C++
目录 一、首先使用拉链法： 二、开放寻址法 三、字符串哈希 1.具体如何使用进制的方式来存储字符前缀的可以看这个y总的这个图 2.接下来说一说算某个中间的区间的字符串哈希值 哈希表是一种数组之间互相映射的数据结构，比如举个简单的例子一个十个的数…...
LabVIEW叶片厚度远程监控
LabVIEW叶片厚度远程监控 随着网络技术的高速发展，远程监控广泛应用在各个领域。本文介绍了一种基于LabVIEW的植物叶片厚度远程监控系统，旨在实现对植物生长状况的精准监测和分析。 该系统利用LabVIEW软件开发工具，通过TCP网络协议实现数据…...
el-table动态合并
废话就不多说了，直接上代码！！！ 合并行 // 方法一 <template><div class"container"><el-table :data"dataSource" :border"true":header-cell-style"{ font-weight: normal,…...
【DevOps】产品需求文档（PRD）与常见原型软件
文章目录 1、PRD介绍1.1、概述1.2、前提条件1.3、主要目的1.4、关键内容1.5、表述方式1.6、需求评审人员1.7、一般内容结构 2、需求流程3、常见原型软件3.1、Word3.2、Axure3.2.1、详细介绍3.2.2、应用分类3.2.3、优缺点 3.3、摹客RP3.4、蓝湖3.5、GUI Design Studio 1、PRD介绍…...
【QT+QGIS跨平台编译】之十八：【Expat+Qt跨平台编译】（一套代码、一套框架，跨平台编译）
文章目录 一、Expat介绍二、文件下载三、文件分析四、pro文件五、编译实践一、Expat介绍 Expat库最初由James Clark创建，已经成为许多编程语言中常用的XML解析工具。它以其简单、快速和可靠的特点而受到广泛的认可和使用。 Expat库的优点包括： 快速：Expat的解析速度非常快…...
20240203
1.项目经理正在为新项目制订进度计划，项目的成功取决于使用需要政府颁发特殊环境许可证的设备，在网络图的设计过程中，项目经理应该做什么以确保正确的活动排序？ A.使用滚动式规划考虑项目不确定性 B.分析外部依赖关系，…...
【Spark实践6】特征转换FeatureTransformers实践Scala版--补充算子
本节介绍了用于处理特征的算法，大致可以分为以下几组： 提取（Extraction）：从“原始”数据中提取特征。转换（Transformation）：缩放、转换或修改特征。选择（Selection&…...
【知识点】设计模式
创建型 单例模式 Singleton：确保一个类只有一个实例，并提供该实例的全局访问点 使用一个私有构造方法、一个私有静态变量以及一个公有静态方法来实现。私有构造方法确保了不能通过构造方法来创建对象实例，只能通过公有静态方法返回唯一的私…...
WPS WORD 宏导出高亮文本
WPS手机版可以直接导出高亮文本，但只能导出手机编辑的部分，如果同时在电脑上编辑过，电脑上高亮的无法导出，因为作者不一样。 但WPS电脑版没有这个功能，只能通过宏编程实现。 这里利用了审阅模式，在文字高亮…...
python 基础知识点（蓝桥杯python科目个人复习计划32）
今日复习内容：基础算法中的位运算 1.简介 位运算就是对二进制进行操作的运算方式，分为与运算，或运算，异或运算，取反，左移和右移。 （1）与运算 xyx&y000010100111 (2)或运算 …...
（算法二）滑动窗口
滑动窗口：既一块区域进行滑动，且不回退 往往解决的是一段连续空间中满足条件的最长或者最短子数组（串） 是由暴力解法（优化）——>不回退的滑动窗口解法 长度最小的子数组 无重复字符的最长子数组 此类题…...
【Go语言成长之路】Hello Go
文章目录 Hello Go一、建立工程目录二、开启代码追踪三、编写代码四、测试代码 Hello Go 一、建立工程目录 pzspzs-ubuntu22:~$ mkdir go_study/hello -p pzspzs-ubuntu22:~$ cd go_study/hello 在hello目录下，我们会编写属于自己的第一个Go demo例子࿰…...
大数据应用开发3-Scala笔记1
一、编程框架 Scala语言是在JVM上运行的，兼容Java语法 区分大小写 - Scala是大小写敏感的，这意味着标识Hello 和 hello在Scala中会有不同的含义。 类名 - 对于所有的类名的第一个字母要大写。 如果需要使用几个单词来构成一个类的名称，每个…...
android 网络拦截器统一处理请求参数和返回值加解密实现
前言 项目中遇到参数加密和返回结果加密的业务 这里写一下实现 一来加深记忆 二来为以后参考铺垫 需求 项目在开发中涉及到 登陆 发验证码 认证 等前期准备接口 这些接口需要单独处理 比如不加密 或者有其他的业务需求 剩下的是登陆成功以后的业务需求接口 针对入参和返回值…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化（Gradient Normalization） (2) 判别器梯度间隙正则化（Discriminator Gradient Gap Regularization） (3) 自注意力机制（Self-Attention） 3. 完整损失函数 二…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...