布局技巧及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 网络拦截器统一处理请求参数和返回值加解密实现
前言 项目中遇到参数加密和返回结果加密的业务 这里写一下实现 一来加深记忆 二来为以后参考铺垫 需求 项目在开发中涉及到 登陆 发验证码 认证 等前期准备接口 这些接口需要单独处理 比如不加密 或者有其他的业务需求 剩下的是登陆成功以后的业务需求接口 针对入参和返回值…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...
Python 实现 Web 静态服务器（HTTP 协议）
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1）下载安装包2）配置环境变量3）安装镜像4）node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1）使用 http-server2）详解 …...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
 error)
【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error
在前端开发中，JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作（如 Promise、async/await 等），开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝（r…...
springboot 日志类切面，接口成功记录日志，失败不记录
springboot 日志类切面，接口成功记录日志，失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
「Java基本语法」变量的使用
变量定义 变量是程序中存储数据的容器，用于保存可变的数据值。在Java中，变量必须先声明后使用，声明时需指定变量的数据类型和变量名。 语法 数据类型 变量名 [ 初始值]; 示例：声明与初始化 public class VariableDemo {publi…...