css三角,鼠标样式,溢出文字

news2024/11/23 6:22:09

                 目录

css三角

鼠标样式

例子:页码模块

溢出文字表示方式

margin负值运用

css三角强化


css三角

css三角中:line-height:0和font-size:0是防止兼容性的问题

jd {
    position: relative;
    width: 120px;
    height: 249px;
    background-color:pink;
}

.jd span {
    position:absolute;
    right:15px;
    top:-10px;
    width:0;
    height:0;
    line-height:0;
    font-size:0;
}

鼠标样式

1 更改用户鼠标样式:

<ul>
<li style="cursor:default;"></li>
<li style="cursor:pointer;"></li>
<li style="cursor:move;"></li>
<li style="cursor:text;"></li>
</ul>

2 去除输入框表格蓝色边框outline
 

input,textarea {
    outline: none;
}
<input type="text">

3 让textarea无法修改大小

textarea {
    resize:none;
}
<textarea name="" id=""></textarea>

4 vertical-align 设置图片或者表单和文字垂直对齐

vertical-align:baseline默认父元素基线对齐;

top,middle,bottom

5 vertical-align: bottom

vertical-align只针对行内或者行内块元素有效
文本域属于行内块元素

textarea {
    vertical-align: middle;
    默认是基线对齐

}

这样能使得当左边是图片右边是文字时候,文字在左边图片中间的位置

bug:图片底侧会有空白缝隙,由于行内块元素和文字基线对齐
解决: 1 给图片添加vertical-align:middle,top,bottom
2 display: block

例子:页码模块

<!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>
        .box a {
            /* 必然有大小但是只有行内块才有大小 */
            display: inline-block;
            width: 36px;
            height: 36px;
            background: color #f7f7f7;
            /* 里面文字水平居中垂直居中去掉下划线 */
            border: 1px solid #ccc;
            text-decoration: none;
            line-height: 36px;
            text-align: center;
            color: black;
            font-size: 14px;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current {
            border: none;
            background-color: #fff;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;

        }

        .box button {
            height: 40px;
            width: 45px;
            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">7</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>



</body>

</html>

溢出文字表示方式

溢出的文字省略号显示:
1 单行文本溢出显示省略号

white-space: nowrap;
强制一行内显示文本
overflow:hidden
超出部分隐藏
文字用省略号替代超出的部分
text-overflow:ellipsis;
 

<style>
        .ti {
            width: 40px;
            height: 40px;
            background-color: pink;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <div class="ti">
        abcddddddddddddddd
    </div>


2 多行文本溢出显示省略号

display: -webkit-box;
弹性伸缩盒子模型显示
-webkit-line-clamp: 2;这表示省略号出现在第二行
设置或检索伸缩盒对象的子元素排列方式
-webkit-box-orient: vertival;

overflow:hidden;
text-oveflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

margin负值运用

后面盒子压住前面盒子

ul>li{$}*5

<style>
        ul li {
            float: left;
            list-style: none;
            width: 200px;
            height: 200px;
            border: 2px solid red;
            margin-left: -2px;
            /* 这里是-2,因为边框是2px */
        }
    </style>

鼠标经过某个盒子后提高当前盒子的层级:

没有定位加相对定位,只能相对定位,其他定位不占位置,有定位,加z-index
position: relative;
border: 1px solid blue;
z-index:1;压住别的盒子

<style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 200px;
            height: 200px;
            border: 2px solid red;
            margin-left: -2px;
            /* 这里是-2,因为边框是2px */
        }

        ul li:hover {
            border: 2px solid blue;
            z-index: 1;

        }
    </style>

 水平居中:行内块的父亲添加text-align:center

那么这个盒子里所有行内元素和行内块元素都会水平居中

css三角强化

.box {
    把上边框宽度调大
	border-top: 100px solid transparent;
	border-right: 50px solid blue;
	border-bottom: 0 solid blue;
	border-left:0 solid green;
	左边和下边边框宽度为0
}
简写:
width:0
height:0
border-color: transparent red transparent transparent
上右下左
border-style: solid;
border-width: 22px 8px 0 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>
        /* .box {
            border-top: 100px solid transparent;
            border-right: 50px solid blue;
            border-bottom: 0 solid blue;
            border-left: 0 solid green;
            /* margin: 0 auto; */
        /* } */

        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            line-height: 24px;
            text-align: center;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 80px;
            height: 100%;
            background-color: palevioletred;
            text-align: center;
        }

        .miaosha i {
            position: absolute;
            right: 0;
            /* top: 0; */
            bottom: 0;


            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            /* 上右下左 */
            border-style: solid;
            border-width: 24px 12px 0 0;
        }

        .origin {
            text-decoration: line-through;
            font-size: 12px;
            color: gray;
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
    <div class="price">
        <span class="miaosha">$100<i></i></span>
 <!--这个三角差点因为没放span里所以无法显示,而且想让三角贴着父容器即span显示,需要span加上relative而i加上absolute-->


        <span class="origin">$200</span>
        <!-- line-height继承的,两个span都要垂直居中,直接给他们父元素添加line-height -->
    </div>


 

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

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

相关文章

数据库基础知识小结

数据库基础知识小结 什么是数据库&#xff0c;数据库管理员&#xff0c;数据库管理员&#xff0c;数据库系统&#xff1f; 数据库: 数据库(DataBase 简称 DB)就是信息的集合或者说数据库是由数据库管理系统管理的数据的集合。 数据库管理系统: 数据库管理系统(DataBase Mana…

Oracle SQL 注入上的 Django GIS 函数和聚合漏洞 (CVE-2020-9402)

漏洞描述 Django 于2020年3 月4日发布了一个安全更新&#xff0c;修复了 GIS 函数和聚合中的 SQL 注入漏洞。 参考链接&#xff1a; Django security releases issued: 3.0.4, 2.2.11, and 1.11.29 | Weblog | Django 该漏洞要求开发者使用 JSONField/HStoreField;此外&…

【matlab程序】图像最大化填充画布

【matlab程序】图像最大化填充画布 不做任何修饰&#xff1a; 修饰&#xff1a; 图片 往期推荐 图片 【python海洋专题一】查看数据nc文件的属性并输出属性到txt文件 【python海洋专题二】读取水深nc文件并水深地形图 【python海洋专题三】图像修饰之画布和坐标轴 【Pytho…

flutter之graphic图表自定义tooltip

renderer graphic中tooltip的TooltipGuide类提供了renderer方法&#xff0c;接收三个参数Size类型&#xff0c;Offset类型&#xff0c;Map<int, Tuple>类型。可查到的文档是真的少&#xff0c;所以只能在源码中扒拉例子&#xff0c;做符合需求的修改。 官方github示例 …

在 Python 的 requests 二进制数据的传输方式发生了变化

在Python编程中&#xff0c;requests库是一个非常有用的工具&#xff0c;用于发送HTTP请求。由于其简单易用的API和广泛的兼容性&#xff0c;requests库已经成为Python开发者中最常用的网络请求库之一。 然而&#xff0c;最近在requests 0.10.1版本中&#xff0c;POST二进制数据…

力扣学习笔记——239. 滑动窗口最大值

力扣学习笔记——239. 滑动窗口最大值 题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输…

php高级工程师范文模板

以下简历内容以php高级工程师招聘需求为背景&#xff0c;我们制作了1份全面、专业且具有参考价值的简历案例&#xff0c;大家可以灵活借鉴&#xff0c;希望能帮助大家在众多候选人中脱颖而出。 php高级工程师简历在线制作下载&#xff1a;百度幻主简历 求职意向 求职类型&…

带submodule的git仓库自动化一键git push、git pull脚本

前言 很久没写博客了&#xff0c;今天难得闲下来写一次。 不知道大家在使用git的时候有没有遇到过这样的问题&#xff1a;发现git submodule特别好用&#xff0c;适合用于满足同时开发和部署的需求&#xff0c;并且结构清晰&#xff0c;方便我们对整个代码层次有一个大概的了…

[Docker]十.Docker Swarm讲解

一.Dokcer Swarm集群介绍 1.Dokcer Swarm 简介 Docker Swarm 是 Docker 公司推出的用来管理 docker 集群的工具&#xff0c; 使用 Docker Swarm 可以快速方便的实现 高可用集群 ,Docker Compose 只能编排单节点上的容器, Docker Swarm 可以让我们在单一主机上操作来完成对 整…

万字解析设计模式之模板方法与解释器模式

一、模板方法模式 1.1概述 定义一个操作中算法的框架&#xff0c;而将一些步骤延迟到子类中&#xff0c;模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 例如&#xff0c;去银行办理业务一般要经过以下4个流程&#xff1a;取号、排队、办理具体业…

分布式数据恢复-hbase+hive分布式存储误删除如何恢复数据?

hbasehive分布式存储数据恢复环境&#xff1a; 16台某品牌R730XD服务器节点&#xff0c;每台物理服务器节点上有数台虚拟机&#xff0c;虚拟机上配置的分布式&#xff0c;上层部署hbase数据库hive数据仓库。 hbasehive分布式存储故障&初检&#xff1a; 数据库文件被误删除…

RPCS3(PlayStation 3游戏模拟器)汉化教程

RPCS3 RPCS3 是一款PlayStation 3 模拟器&#xff0c;可让 Windows、Linux 或 BSD 系统的用户运行索尼 PlayStation 3 游戏。 安装教程 包含 Windows/Linux版本 详细安装汉化教程请查看文章 RPCS3&#xff08;PS3模拟器&#xff09;安装及汉化教程 1.首先下载最新版 RPCS3模…

智能汽车的山海之盾

最近一段时间&#xff0c;关于汽车数字化、智能化进程中的安全问题引发了一系列行业讨论。这个话题也得到了行业更广泛的认识与关注。 汽车智能化是大势所趋&#xff0c;而智能化带来了复杂的系统架构与多样化的功能模块&#xff0c;势必会加大安全隐患&#xff0c;但汽车本身又…

npm WARN npm npm does not support Node.js v13.9.0

Microsoft Windows [版本 10.0.19045.2965] (c) Microsoft Corporation。保留所有权利。C:\Users\Administrator>node -v v13.9.0C:\Users\Administrator>npm -v npm WARN npm npm does not support Node.js v13.9.0 npm WARN npm You should probably upgrade to a newe…

LeetCode Hot100 101.对称二叉树

题目&#xff1a; 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 代码&#xff1a; class Solution {public boolean isSymmetric(TreeNode root) {if(rootnull || (root.leftnull && root.rightnull)) {return true;}//用队列保存节点LinkedList<…

ArcGis如何用点连线?

这里指的是根据已有坐标点手动连线&#xff0c;类似于mapgis中的“用点连线”&#xff0c;线的每个拐点是可以自动捕捉到坐标点的&#xff0c;比直接画精确。 我也相信这么强大的软件一定可以实现类似于比我的软件上坐标时自动生成的线&#xff0c;但是目前我还没接触到那里&a…

Spring Boot + hutool 创建海报图片

Spring Boot hutool 创建海报图片 /*** 分享,生成图片* param id* return*/GetMapping("/getShareImg")public void getShareImg(String id,HttpServletResponse response) throws IOException {CouponConsignSaleClassify byId couponConsignSaleClassifyService…

DevEco Studio安装

HUAWEI DevEco Studio For OpenHarmony&#xff08;以下简称DevEco Studio&#xff09;是基于IntelliJ IDEA Community开源版本打造&#xff0c;面向OpenHarmony全场景多设备的一站式集成开发环境&#xff08;IDE&#xff09;&#xff0c;为开发者提供工程模板创建、开发、编译…

医保线上购药系统:引领医疗新潮流

在科技的驱动下&#xff0c;医疗健康服务正经历一场数字化的革新。医保线上购药系统&#xff0c;不仅是一种医疗服务的新选择&#xff0c;更是技术代码为我们的健康管理带来的全新可能。本文将通过一些简单的技术代码示例&#xff0c;深入解析医保线上购药系统的工作原理和优势…

Vue框架学习笔记-Object.defineproperty函数

文章目录 前文提要Object.defineProperty作用Object.defineProperty参数使用例图getter&#xff0c;也就是get函数setter&#xff0c;也就是set函数 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包涵 Object.defineProperty作用 当在js中声明了一个变…