java 返回一个对号_CSS 实现对号效果
实现对号效果,一种思路是利用现成的符号,直接在网上搜索到 √,插入页面。另一种思路是本文要介绍的用 CSS 实现,思路是:
给块级元素设置宽度和高度
设置元素相邻的两个 border
旋转元素
HTML
解析
此处需要使用块级元素
不需要设置元素内容
CSS
.check-style-unequal-width {
width: 8px;
height: 16px;
border-color: #009933;
border-style: solid;
border-width: 0 3px 5px 0;
transform: rotate(45deg);
}
解析
设置宽度和高度,得出一个矩形效果,并且矩形中没有内容
设置相邻 border 的样式,得到对号的大体轮廓
使用旋转属性,成功得到对号
解析
如上图,第一个为两条线等宽的对号效果,第二个为两条线不等宽的对号效果;第三个为两条线等宽等长的对号效果。详细实现请参见 check 源码。
注意事项
行级元素直接设置宽度和高度没有用,需要设置其 display 使其变为块级元素。例如:span 需要设置 display 为 inline-block 才能适用于本例效果
可以根据实际需求调整元素宽度和高度
可以根据实际需求设置不同的 border,以及相邻 border 的宽度
可以对此效果做简单的修改,作用于伪元素 ::before 和 ::after。可参考 ::before & ::after
-——————–
作者:南张人
来源:CSDN
原文:https://blog.csdn.net/u011848617/article/details/82824054
https://www.cnblogs.com/xiaoshen666/category/1433991.html
java 返回一个对号_CSS 实现对号效果相关推荐
- java返回一个布尔值_关于java:返回布尔值的方法
好的,所以我的问题是关于布尔值的回报. 对于我的Comp Sci作业,我必须使用方法制作课程注册程序,其中之一是添加课程方法. 基本上,您在目录中搜索该班级,如果匹配,则将其添加到学生时间表中,并返回 ...
- java中的replace用法_java中replace用法举例:replace(char oldChar, char newChar)返回一个新的字符串...
1.JAVA中,char占2字节,16位.可在寄存汉字 2.java中replace用法举例:replace(char oldChar, char newChar)返回一个新的字符串,它是经过用 ne ...
- 返回数组个数Java_用java实现返回一个整数数组中最大数组的和
今天研究了一下如何返回一个整数数组中最大数组的和,具体要求如下: 分析: 对于这个问题可以设定一个整型max,让他来充当子数组的和的最大值,之后就需要让他和所有的子数组进行比较,这里可以用两个for循 ...
- Java黑皮书课后题第10章:*10.15(几何:边框)边框是指包围一个二维平面上点集的最小矩形,编写一个方法,为二维平面上一系列点返回一个边框
*10.15编写一个方法,为二维平面上一系列点返回一个边框 题目 程序 代码 Test15.java Test13_MyRectangle2D.java 运行结果 题目 点击这里跳转编程练习题10.1 ...
- Java黑皮书课后题第8章:*8.32(几何:三角形面积)编写一个方法,使用下面的方法头,返回一个三角形的面积。编写一个程序,提示用户输入三角形的三个点,然后显示三角形的面积
*8.32(几何:三角形面积)编写一个方法,使用下面的方法头,返回一个三角形的面积.编写一个程序,提示用户输入三角形的三个点,然后显示三角形的面积 题目 题目描述与运行示例 破题 代码 题目 题目描述 ...
- Java黑皮书课后题第7章:**7.34(对字符串中的字符排序)使用以下方法头编写一个方法,返回一个排序好的字符串。编写一个测试程序,提示用户输入一个字符串,显示排序好的字符串
**7.34(对字符串中的字符排序)使用以下方法头编写一个方法,返回一个排序好的字符串.编写一个测试程序,提示用户输入一个字符串,显示排序好的字符串 题目 题目描述 破题 代码 运行实例 题目 题目描 ...
- java定义一个方法,返回一个整数数组的元素平均值
java定义一个方法,返回一个整数数组的元素平均值 /*** 定义一个方法* 返回一个整数数组的元素平均值*/ public class Test25 {public static double av ...
- java义一个方法,返回一组双色球票数
java义一个方法,返回一组双色球票数 import java.util.Arrays;/*** 定义一个方法,返回一组双色球票数* 双色球规则* 前六位,红球 1-33 不能重复,升序排列* 最后一 ...
- java定义一个方法,返回一个整数数组的元素最小值
java定义一个方法,返回一个整数数组的元素最小值 /*** 定义一个方法* 返回一个整数数组的元素最小值*/ public class Test24 {public static int minAr ...
最新文章
- 虚拟示波器OSC802介绍、拆机
- 六行代码安装 GPU版本的TensorFlow
- 通过Excel访问Kylin
- 详解协同感知数据集OPV2V: An Open Benchmark Dataset and Fusion Pipeline for Perception with V2V Communication
- Python删除文件夹和建立文件夹
- python怎么重复程序_利用Python程序完成ABAQUS中的一些重复性操作
- php中案值传递和安引用传递,PHP里的值传递与引用传递
- Visual Studio 2008 Service Pack 1 - BETA发布
- Unity3D中背景音乐和相关音效的添加,背景音乐暂停、停止和播放的设置
- java查询城市区号_城市查区号示例代码
- 改变蜡笔小新的眼睛颜色(对bmp图像的部分更改)
- python 修图_拿到一张图怎么后期才能更好一点啊?告诉你具体的修图思路
- 简单粗暴PyTorch之transforms详解(一)
- 使用trickle限制网络上传和下载速度
- precede和previous_preceding,previous,prior辨析.ppt
- Linux开启root用户
- 2300专项:D. Stressful Training(二分 充电)
- Python爬取古诗词
- c语言自动安装打印机驱动,安装自定义的即插即用打印机驱动程序
- INSPIRED启示录 读书笔记 - 第17章 产品人物角色
热门文章
- win8通过u盘装linux系统,如何通过U盘装机大师进行U盘安装win8.1系统
- 机器学习元老之间的关系图
- ASEMI大功率LED驱动器整流桥KBP210
- 大电流dcdc降压芯片20a_关于LED驱动电源那些常见的十款经典LED驱动芯片
- 激活函数ReLU、Leaky ReLU、PReLU和RReLU
- 网络信息安全管理之资产、脆弱性、威胁、风险
- 机器视觉光源选择方案
- 《剑指offer》NO40 最小的K个数 大顶堆实现 详解 <Java实现>
- c语言程序设计教程刘三满答案,清华大学出版社-图书详情-《C语言程序设计教程》...
- vue3学习笔记(ref, reactive, setup, hook...)