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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

抖音小店怎么定类目?分享几个爆单几率大,适合新手的细分类目!

大家好&#xff0c;我是电商糖果 做电商的应该经常听过这么一句话&#xff0c;类目大于一切&#xff01; 好的类目可以让商家减少很多竞争和难题。 糖果做电商有很多年了&#xff0c;我一直认为做店前期最难的定类目&#xff0c;中期是选品&#xff0c;后期是维护店铺。 如…

公司调研 | 空间机械臂GITAI | 日企迁美

最近做的一些公司 / 产品调研没有从技术角度出发&#xff0c;而更关注宏观发展&#xff1a;主营方向、产品介绍、商业化落地情况、融资历程、公司愿景、创始人背景等。部分调研放在知乎上&#xff0c;大部分在飞书私人链接上 最近较关注人形Robot的发展情况&#xff0c;欢迎感兴…

【c++入门】引用,内联函数,auto

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 朋友们大家好&#xff0c;本节我们来到c中一个重要的部分&#xff1a;引用 目录 1.引用的基本概念与用法1.1引用特性1.2使用场景1.3传值、传引用效率比较1.4引用做返回值1.5引用和指针的对…

手撕算法-买卖股票的最佳时机(买卖一次)

描述 分析 只能买卖一次。希望在最低处买&#xff0c;最高处卖。 怎么判断最低处&#xff1f;遍历时存储已遍历的最小值。 怎么判断最高处&#xff1f;遍历时&#xff0c;比较当前位置和最小值的差&#xff0c;取较大的。 代码 class Solution {public int maxProfit(int…

Anaconda安装教程

简介 Anaconda是一个开源的Python发行版&#xff0c;专注于科学计算领域。它支持Linux&#xff0c;Mac&#xff0c;Windows系统&#xff0c;并提供了包管理与环境管理的功能。Anaconda利用工具conda来进行package和environment的管理&#xff0c;并且已经包含了Python和相关的…

SpringCloud从入门到精通速成(二)

文章目录 1.Nacos配置管理1.1.统一配置管理1.1.1.在nacos中添加配置文件1.1.2.从微服务拉取配置 1.2.配置热更新1.2.1.方式一1.2.2.方式二 1.3.配置共享1&#xff09;添加一个环境共享配置2&#xff09;在user-service中读取共享配置3&#xff09;运行两个UserApplication&…

若依用户信息数据导入时自定义密码

若依导入功能: 在使用若依脚手架时,用户信息管理是非常必要的一个部分,而面对大量数据时,使用excel批量导入数据可大大提高效率。若依脚手架也是提供了导入功能,如下图所示: 问题描述 虽然若依脚手架提供了批量导入功能,但其导入的密码总是123456,不仅不安全,而且在…

【Python + Django】静态文件的添加

前言&#xff1a; 前一篇文章我们已经学会了怎么用django写文本页面啦&#xff01;&#xff01;&#xff01; 有一说一&#xff0c;这个静态页面是真的丑。 我们总得用一些花花绿绿的东西把这个丑陋的网站给装饰一下吧&#xff01;&#xff01;&#xff01;&#xff01;&…

手撕算法-接雨水

描述 分析 i位置能积累的雨水量&#xff0c;等于其左右两边最大高度的最小值。为了能获取i位置左右两边的最大高度。使用动态规划。两个dp数组&#xff1a; leftMaxrightMax 其中 leftMax[i] 代表i位置左边的最大高度rightMax[i] 代表i位置右边的最大高度 初始状态&#x…

BEVFormer v2论文阅读

摘要 本文工作 提出了一种具有透视监督&#xff08;perspective supervision&#xff09;的新型鸟瞰(BEV)检测器&#xff0c;该检测器收敛速度更快&#xff0c;更适合现代图像骨干。现有的最先进的BEV检测器通常与VovNet等特定深度预训练的主干相连&#xff0c;阻碍了蓬勃发展…

SpringBoot整合ShardingSphere-JDBC 5.3.2 实现读写分离、分库分表。

&#x1f469;&#x1f3fd;‍&#x1f4bb;个人主页&#xff1a;阿木木AEcru &#x1f525; 系列专栏&#xff1a;《Docker容器化部署系列》 《Java每日面筋》 &#x1f4b9;每一次技术突破&#xff0c;都是对自我能力的挑战和超越。 Docker部署MYSQL主从详细教程-阿木木AEcru…

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

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

秘钥缩写、全称和中文名

三级加密体系 第一级&#xff1a; LMK(LOCAL MAIN KEY)&#xff0c;存放于HSM机中&#xff0c;用于对所有存于本地的其他密钥和加密数据进行加密&#xff0c;是最重要的密钥。 第二级&#xff1a; 如ZMK&#xff08;即平时大家说的主密钥MK&#xff09;&#xff0c;存于本地或…

autorun 病毒清除工具 源码

** autorun 病毒清除工具 源码 ** 1、新建一个记事本&#xff1a;AutoRun病毒清理工具.txt&#xff0c;复制以下代码&#xff1a; Autorun 病毒清除工具 Echo Offcolor 2etitle Autorun 病毒清除工具-By 段子手168 2023-10-25Rem 杀进程taskkill /F /IM SocksA.exe /IM …

hyper-v虚拟机使用宿主机usb设备

文章目录 一、修改宿主机组策略二、使用 一、修改宿主机组策略 在宿主电脑上&#xff0c;按 winr 组合键打开运行窗口&#xff0c;输入 gpedit.msc 打开组策略编辑器&#xff0c;依次点击计算机配置- 管理模板- Windows 组件- 远程桌面服务- 远程桌面会话客户端- RemoteFX USB…

目标检测——PP-YOLOE算法解读

PP-YOLO系列&#xff0c;均是基于百度自研PaddlePaddle深度学习框架发布的算法&#xff0c;2020年基于YOLOv3改进发布PP-YOLO&#xff0c;2021年发布PP-YOLOv2和移动端检测算法PP-PicoDet&#xff0c;2022年发布PP-YOLOE和PP-YOLOE-R。由于均是一个系列&#xff0c;所以放一起解…

一键入门Ubuntu22!

目录 一、安装 二、常用目录 三、常用指令 四、用户指令 五、ssh与scp 六、服务相关 七、Python与Pycharm 八、Vim编辑器 九、Ubuntu22下使用Mysql 十、Ubuntu22下使用mongodb 十一、Ubuntu22下使用redis Ubuntu是一个基于Debian的开源操作系统&#xff0c;由Canoni…

基于霍夫检测(hough变换)的人眼瞳孔定位,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

网络原理(4)——TCP协议的特性

目录 一、滑动窗口 1、ack丢了 2、数据丢了 二、流量控制&#xff08;流控&#xff09; 三、拥塞控制 拥塞窗口动态变化的规则 四、延时应答 五、捎带应答 六、面向字节流 七、异常情况 &#xff08;1&#xff09;进程崩溃了 &#xff08;2&#xff09;其中一方关机…

虚拟机开机启动失败,进入(initramfs)解决办法

虚拟机开机启动失败&#xff0c;进入&#xff08;initramfs&#xff09;解决办法 打开虚拟机中Ubuntu时进入(initramfs)&#xff0c;导致无法进入桌面。问题如下图显示&#xff1a; 命令行输入 fsck -y /dev/sda5输入 exit进入 选择root 后回车 输入虚拟机的密码 进入 root …