CSS的特殊技巧

1.精灵图

使用精灵图核心总结:
1. 精灵图主要针对于小的背景图片使用。
2. 主要借助于背景位置来实现--- background-position 。
3. 一般情况下精灵图都是负值。(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y轴同理。)

2.字符图标

使用:

1. 字体图标的下载
2. 字体图标的引入 (引入到我们html页面中)
3. 字体图标的追加 (以后添加新的小图标)
下载:
icomoon 字库 http://icomoon.io
阿里 iconfont 字库 http://www.iconfont.cn/
引入:
在 CSS 样式中全局声明字体: 简单理解把这些字体文件通过css引入到我们页面中。
一定注意字体文件路径的问题。
@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?7kkyc2');src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon.woff?7kkyc2') format('woff'),url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;
}

复制此代码

Css三角

<!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>.div1 {width: 0;height: 0;border-top:10px solid pink;border-left: 10px solid red;border-right: 10px solid blue;border-bottom: 10px solid greenyellow;}.div2 {width: 0;height: 0;border: 10px solid transparent;border-top-color:pink ;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>

京东三角

 .jd {position: relative;width: 120px;height: 249px;background-color: pink;}.jd span {position: absolute;width: 0;height: 0;right: 15px;top: -10px;line-height: 0;font-size: 0;border: 5px solid transparent;border-bottom-color: red;}

3.界面样式

1 鼠标样式 cursor
li {cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
2 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。
input {outline: none;}
3 防止拖拽文本域 resize
实际开发中,我们文本域右下角是不可以拖拽的。
textarea{ resize: none;}
起始:

取消拖拽:

4.vertical-align

用于设置一个元素的 垂直对齐方式 ,但是它只针对于行内元素或者行内块元素有效。
转化为行内块元素:
display:inline-block
图片、表单和文字对齐
解决图片底部默认空白缝隙问题
bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
主要解决方法有两种:
1. 给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)
2. 把图片转换为块级元素 display: block;

5.溢出的文字省略显示

1.单行

2.仅作了解

6.常见布局技巧

1.margin负值应用

中间的因为重叠而变得比较粗

清除技巧:让每个盒子margin 往左侧移动 -1px(边框的宽度) 正好压住相邻盒子边框。

鼠标点上去,不能完全变成别的颜色。

清除技巧:

鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)

2.文字围绕浮动元素

需要这种文字围绕这图片的效果,让图片成为浮动元素,利用浮动不会压住文字的特点

<!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: 0;padding: 0;}.box {width: 300px;height: 70px;background-color: pink;margin: 0 auto;padding: 5px;}.pic {float: left;width: 120px;height: 60px;margin-right: 5px;}.pic img {width: 100%;}</style>
</head>
<body><div class="box"><div class="pic"><img src="pic.jpeg" alt=""></div><p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦,真惨啊,我的母校</p></div>
</body>

3.行内块巧妙运用

行内块元素中间有缝隙,行内块可以设置行高和宽高,

页码在页面中间显示 :
1. 把这些链接盒子转换为行内块 display:inline-block, 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙,并且给父级添加 text-align:center; 行内块元素会水平会居中
<!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: 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;}.box .prev,.box .last{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">&lt;&lt;上一页</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="last">&gt;&gt;下一页</a>到第<input type="text">页<button>确定</button></div>
</body>
</html>

4.css三角强化

只保留右有颜色

上边框宽度要大,右边框宽度稍小,其余为0;

<!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>
.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;font-weight: 700;color: #fff;margin-right: 8px ;
}
.miaosha i {right: 0;top: 0;position: absolute;width: 0;height: 0;border-color: transparent white 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="price"><span class="miaosha">$1650<i></i></span><span class="origin" >$5650</span></div>
</body>
</html>

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

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

相关文章

海康威视-AIOT的业务转型

海康威视的转型和定位为智能物联网&#xff08;AIoT&#xff09;解决方案和大数据服务的提供商。 公司不仅仅聚焦于其核心的视频监控业务&#xff0c;而且正在积极拓展到新的技术领域和市场。通过专注于物联感知、人工智能、大数据等技术的创新&#xff0c;对未来技术发展方向的…

生产计划数据模型,实现能源企业数字化高效管理

随着市场经济的快速发展&#xff0c;能源企业在经济发展中的地位也随之提高。但由于能源企业在生产计划经济管理上存在指标不平衡、市场观念落后和环保意识欠缺等问题&#xff0c;导致企业的经济效益降低。目前&#xff0c;提高企业的生产计划管理是改善能源企业现状最有利的途…

计算机网络:物理层下的传输媒体概览

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

MySQL---视图

目录 一、介绍 二、语法 三、视图的更新 四、视图作用 一、介绍 视图&#xff08;View&#xff09;是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询中使用的表&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#…

Ambari——编译——解决解决windows和linux下phantomjs链接超时问题

您的支持是我继续创作与分享的动力源泉!!! 您的支持是我继续创作与分享的动力源泉!!! 您的支持是我继续创作与分享的动力源泉!!! 错误日志: [INFO] Copying extracted folder C:\Users\LENOVO\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1786692…

『K8S 入门』三:资源调度

『K8S 入门』三&#xff1a;资源调度 一、Label 和 Selector 可以通过 Selector 基于 Label 匹配需要的资源 Label 标签 配置文件中&#xff08;metadata.labels&#xff09;配置 metadata: # Pod相关的元数据&#xff0c;用于描述Pod的数据name: nginx-demo #Pod的名称lab…

后端Jwt实现Token编码、解码以及axios的request请求头的Token传输方式

目录 一、什么是JWT&#xff1a; 二、Jwt的使用&#xff1a; 第一步&#xff1a;引入依赖&#xff1a; 第二步&#xff1a;配置拦截器&#xff1a;JwtInterceptor.java&#xff1a; 其中异常文件ServiceException配置如下&#xff1a; 全局异常文件GlobalException.java文…

利用Base64加密算法将数据加密解密

1. Base64加密算法 Base64准确来说并不像是一种加密算法&#xff0c;而更像是一种编码标准。 我们知道现在最为流行的编码标准就是ASCLL&#xff0c;它用八个二进制位&#xff08;一个char的大小&#xff09;表示了127个字符&#xff0c;任何二进制序列都可以用这127个字符表…

逻辑 | 逻辑先修营

学习到更新日期逻辑先修营-3常见逻辑连词及逻辑表达2024-3-23 1.形式逻辑基础1 2.形式逻辑基础2 3.常见逻辑连词及逻辑表述 4.OR相关考点 5.AND相关考点 6.逻辑箭头基本考点1 7.逻辑箭头基本考点2 8.代入逻辑推理事实真1 9.代入逻辑推理事实真2 10.形式逻辑四大基本考点…

【Entity Framework】 EF中DbContext类详解

【Entity Framework】 EF中DbContext类详解 一、概述 DbContext类是实体框架的重要组成部分。它是应用域或实例类与数据库交互的桥梁。 从上图可以看出DbContext是负责与数据交互作为对象的主要类。DbContext负责以下活动&#xff1a; EntitySet&#xff1a;DbContext包含…

Web前端—事件循环

事件循环 事件循环浏览器的进程模型何为进程&#xff1f;何为线程&#xff1f;浏览器有哪些进程和线程&#xff1f; 渲染主线程是如何工作的&#xff1f;若干解释何为异步&#xff1f;面试题&#xff1a;如何理解JS的异步&#xff1f;JS会阻碍渲染任务有优先级吗&#xff1f;面…

宜搭低代码高级认证实操题2 faas连接器加密解密

密钥维护页-保证有一条数据 敏感信息提交页 存档页&#xff0c;只是用来存数据的审批的时候不用这个表提交数据不然会出两条 授权查看页 FaaS连接器先下载好他的示例代码然后按照要求配置好参数直接拷贝进去就行 然后需要在云开发环境里面先new一个terminal然后跑一下./builde…

Leetcode - 周赛389

目录 一&#xff0c;3083. 字符串及其反转中是否存在同一子字符串 二&#xff0c;3084. 统计以给定字符开头和结尾的子字符串总数 三&#xff0c;3085. 成为 K 特殊字符串需要删除的最少字符数 四&#xff0c;3086. 拾起 K 个 1 需要的最少行动次数 一&#xff0c;3083. 字符…

如何在没有备份的情况下恢复 Android 上已删除的照片?

丢失 Android 设备上的珍贵照片可能是一场噩梦&#xff0c;尤其是在没有备份的情况下。无论是意外删除图像还是由于Android 崩溃而丢失图像&#xff0c;一想到它们可能会永远消失就令人沮丧。幸运的是&#xff0c;有多种方法可以在 Android 上恢复已删除的照片。 如何在没有备份…

一文打尽分布式系统中的事务处理!

之前分享了分布式事务的实现方案&#xff0c;今天我们来对比总结一下&#xff1a; 如何使用最大努力通知实现分布式事务&#xff1f;与本地消息表区别&#xff1f; 如何通过本地消息表实现分布式事务 用二阶段三阶段提交实现分布式事务 如何用TCC实现分布式事务&#xff1f…

上海晋名室外危化品暂存柜助力医药制造行业安全

近日上海晋名又有两台室外危化品暂存柜项目通过验收&#xff0c;此次项目主要用于医药制造行业次氯酸钠、乙醇消毒剂、甲醛等化学品的室外暂存安全。 用户单位创立于2003年&#xff0c;是一家以从事医药制造业为主的企业。用户在日常工作运营中涉及到次氯酸钠、乙醇消毒剂、甲…

MT2191 整数大小比较(高精度)

给出两个正整数&#xff0c;判断他们的大小。 输入格式&#xff1a; 两个正整数。 输出格式&#xff1a; 若前者大&#xff0c;输出>&#xff1b; 若后者大&#xff0c;输出<&#xff1b; 若一样大&#xff0c;输出。 输入&#xff1a; 1412894619244619891 23762842…

Matlab|基于条件风险价值CVaR的微网动态定价与调度策略

目录 1 主要内容 模型示意图 电能交易流程 模型亮点 2 部分代码 3 程序结果 4 下载链接 1 主要内容 程序复现文章《A cooperative Stackelberg game based energy management considering price discrimination and risk assessment》&#xff0c;建立基于主从博弈的考虑…

面试算法-78-两两交换链表中的节点

题目 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4] 输出&#xff…

Filter介绍使用案例

文章目录 一、Filter概念二、Filter快速入门定义类&#xff0c;实现Filter接口&#xff0c;并重写其所有方法 三、Filter执行流程四、Filter使用细节1、Filter拦截路径配置2、过滤器链 五、案例 一、Filter概念 二、Filter快速入门 定义类&#xff0c;实现Filter接口&#xff0…