css和html
关注
分享
扫一扫
前端切图仔Zz
这个作者很懒，什么都没留下…
展开
-
css实现爱心点赞
点赞效果原创 2022-12-27 17:13:40 · 768 阅读 · 0 评论 -
修改input元素placeholder属性样式（多个浏览器兼容）
修改input元素placeholder属性样式（多个浏览器兼容）原创 2022-12-27 17:02:41 · 343 阅读 · 0 评论 -
transition属性
transition用于实现过渡效果。语法：transition: property duration timing-function delay;可见是个复合属性。用于设置四个过渡属性：原创 2022-10-11 15:45:13 · 289 阅读 · 0 评论 -
怎么禁止textarea拉伸
怎么禁止textarea拉伸。原创 2022-08-01 14:40:22 · 1794 阅读 · 0 评论 -
css怎么设置不让复制文字
一般网页上可复制的文字都会出现下面的I 状光标如果不想让复制文本，可设置样式如下：效果（现在是这种箭头光标）：原创 2022-06-09 15:09:46 · 1320 阅读 · 0 评论 -
iframe标签有什么用
iframe的定义：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）用处：可以用于嵌入第三方资源，比如广告、视频或音频等等，可以原封不动的把嵌入的网页显示出来。例子：mui前端框架首页的以上部分，其实就是用了...原创 2022-05-20 14:40:11 · 645 阅读 · 0 评论 -
2021-2022年前端面试题整理1（含答案）
1、如何实现bootrap？2、媒体查询分哪几个？具体宽度是多少？3、如何上传项目到github？用到什么命令？settimeout原创 2020-08-07 11:42:06 · 466 阅读 · 1 评论 -
css实现多行显示，超出部分以省略号代替
没处理之前设置样式给被包含元素设置以下样式（这里的案例是p元素）：p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}效果：明显，已经实现了只展示两行，超出部分以省略号代替其中：overflow: hidden;的作用是隐藏溢出部分display: -webkit-box;表示作为弹性伸缩盒子模型显示-webkit-原创 2022-03-08 09:58:12 · 1465 阅读 · 0 评论 -
css实现一行显示，超出部分以省略号代替
没处理之前设置样式给被包含元素设置以下样式（这里的案例是p元素）：p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}效果：明显，已经实现了只展示一行，超出部分以省略号代替其中：overflow: hidden;的作用是隐藏溢出部分text-overflow: ellipsis;表示当文本溢出包含元素时，显示省略符号来代表被修剪的文本。white-space: nowrap; 规定段落中的文本原创 2022-03-07 19:43:03 · 3063 阅读 · 0 评论 -
jq实现Input输入框的光标在初始值的后面
原始代码：<body style="background: purple;"> <input type="text" value="lyf" class="my-ipt" autofocus="autofocus"> <script src="jquery.js"></script></body>效果:此时光标默认是在前面的，明显是不太符合逻辑的。加两句jquery代码实现光标置后：<body style="backgro原创 2022-03-03 16:31:28 · 1149 阅读 · 0 评论 -
＜pre＞标签有什么用
概念：可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。应用：pre 标签的一个常见应用就是用来表示计算机的源代码。pre标签与code 标签结合起来使用，可以获得更加精确的语义。示例：效果：import link from '@my/components/link'...原创 2022-03-01 19:51:23 · 2923 阅读 · 0 评论 -
css隐藏移动端滚动条（兼容ios）
尝试过很多类似 .container ::-webkit-scrollbar {display: none;}操作会发现，这些在苹果浏览器根本就不起效果。既要隐藏滚动条、滑动流畅，还要兼容ios，可尝试以下思路：父元素设置内容溢出隐藏，使含滚动条元素的滚动条挤出可视区域，即实现了对滚动条的隐藏。示例代码：html:<div class="compatible-ios"> <ul> <li>第一个哈哈</li> <原创 2022-02-25 13:44:31 · 3793 阅读 · 0 评论 -
css中overflow-x:auto无效
css中overflow-x:auto无效原创 2022-02-25 09:36:26 · 5963 阅读 · 2 评论 -
css隐藏滚动条
css隐藏滚动条、移动端原创 2022-02-17 10:57:38 · 29357 阅读 · 4 评论 -
css改变input输入框光标颜色
输入框光标颜色原创 2022-02-16 10:59:40 · 811 阅读 · 0 评论 -
input输入框点击有边框
input标签输入框点击时出现默认边框原创 2022-02-16 10:37:01 · 2726 阅读 · 0 评论 -
css的居中方式
css居中方式、垂直居中、水平居中、垂直水平居中原创 2022-02-15 17:18:41 · 1007 阅读 · 0 评论 -
鼠标悬停后，块四周出现阴影的效果
这个效果其实很简单，只需要给元素添加一个:hover伪类，并给它加上css3的box-shadow属性，向外建立投影便能实现视觉上的悬空。话不多说，上干货：html:<div class="hh">小夭给你展示怎么出现阴影</div>css:.hh{ width: 300px;height: 100px; margin:30px;background: wheat;}.hh:hover{box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2原创 2021-09-09 15:50:31 · 4112 阅读 · 1 评论 -
怎么使用阿里巴巴矢量图标
1.打开阿里巴巴矢量图标库官网（https://www.iconfont.cn/），有账号的可以直接登录，没有账号的需要注册一个。2.查找想要的图标。简单使用如果只是需要一两个图标：例如想要倒三角，直接搜索“倒三角”，便出现相应的图标，点击所需图标的”下载“按钮然后会出现弹框，在这里可以选择想要的颜色可选择相应的下载格式：（1）若选择PNG格式，将图片下载下来直接html中插入。（图像文件的 URL视你图片的位置而定。以下是html和图片文件同一目录的情况）<img src="/1.原创 2021-09-08 11:06:43 · 2879 阅读 · 2 评论 -
css实现倒三角的最简单方法
css实现倒三角的最简单方法1. css边框：html <div class="h"></div>css:.h{ width: 0px; height: 0px; border: 50px solid transparent; border-top-color: red;}最终呈现结果：如果想要其它方向的三角，很简单，直接改成border-left-color，border-right-color或者border-bottom-c原创 2021-09-07 20:21:45 · 18199 阅读 · 1 评论