CSS
关注
分享
扫一扫
chelen_jak
这个作者很懒，什么都没留下…
展开
-
标题吸顶、吸附（赞、实用）
position: sticky 详解（防坑指南）转载 2023-02-17 14:18:48 · 304 阅读 · 0 评论 -
Css之 table表格 实现表头滚动固定并且固定最后一列在右侧 (实用、赞）
原文出处：Css之 table表格 实现表头滚动固定并且固定最后一列在右侧_灼灼桃花夭的博客-优快云博客固定表头https://blog.youkuaiyun.com/qq_36939013/article/details/108101677固定最后一列在最右侧https://blog.youkuaiyun.com/weixin_39884872/article/details/117763346纯css 实现 table固定首行、首列以及最后一列冻结https://www.cnblogs.com/a87转载 2022-05-14 09:48:16 · 3138 阅读 · 1 评论 -
CSS中英文和中文高度不一样问题的解决办法 (实用)
现状： 一样的字体，一样的大小。中文行高要比数字的要高，如下图：方法一： 改用等中、英文等高字体定例如宋体，如下图： font-family: "宋体",Simsun;方法二： 使用line-height固定高度，如下图：line-height: 19px;想进步了解可以参考资料：1、css中英文字母和汉字行高不同解决方法2、【css】探究font-size、文本实际高度、line-...原创 2022-03-01 14:52:18 · 5647 阅读 · 1 评论 -
white-space属性表 (实用）
摘自：css white-space属性详解_正在崛起的博客-优快云博客转载 2022-02-07 10:36:04 · 261 阅读 · 0 评论 -
css实现保持div的等宽高比例(缩放）(实用、赞）
原文出：css实现保持div的等宽高比 - 情三 - 博客园这篇文章主要为回答这个问题：“做响应式网页，如何让一个div的高和宽保持比例放大或是缩小？”，这里不介绍媒体查询的实现。那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例，通过2种方式来实现这种效果。方式一：利用定位实现.wrapper{ position : relative.转载 2022-01-21 10:44:01 · 10819 阅读 · 0 评论 -
CSS实现进度条和订单进度条 (实用、赞）
原文出处：CSS实现进度条和订单进度条 - 郭锦荣 - 博客园效果图如下：转载 2021-10-08 18:22:43 · 503 阅读 · 0 评论 -
使用contenteditable+div模拟textarea文本域实现高度自适应
原文出处：https://blog.youkuaiyun.com/weixin_34297300/article/details/88947042?utm_medium=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-OPENSEARCH-1.add_param_isCf开发过程中由于需要在发送消息的转载 2020-11-16 11:35:25 · 690 阅读 · 0 评论 -
苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑
原文出处：https://www.cnblogs.com/xiangsj/p/6084844.html问题： 在苹果手机IOS中 contenteditable="true" 做文本域输入，点击可以弹出键盘但是无法输入，安卓都正常。 经测试后，记得加一个样式 -webkit-user-select:text 就可以了。...转载 2020-11-16 09:54:49 · 1238 阅读 · 0 评论 -
进阶篇之纯css+字体实现五角星（半颗星）评分 (实用）
原文：https://www.cnblogs.com/sxs161028/p/7249966.html转载 2020-08-17 09:53:25 · 1100 阅读 · 0 评论 -
【前端】ionic--星级评价半颗星实现方法 （实用）
原文：https://blog.youkuaiyun.com/m18633778874/article/details/85336363效果图：转载 2020-08-17 09:04:52 · 379 阅读 · 0 评论 -
css清除浮动，自动撑大外层盒子 （实用、赞）
原文出处：https://blog.youkuaiyun.com/samcphp/article/details/79691189?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158710422819725211946450%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fb...转载 2020-04-17 15:01:07 · 581 阅读 · 0 评论 -
HTML中的& nbsp; & ensp; & emsp;等6种空格标记 (实用）
原文出处：https://www.cnblogs.com/Salicejy/p/css.html代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML中的& nbsp...转载 2020-01-06 11:47:30 · 3193 阅读 · 0 评论 -
彻底搞懂word-break、word-wrap、white-space (实用）
原文出处:https://www.cnblogs.com/dfyg-xiaoxiao/p/9640422.html延伸阅读：你真的了解word-wrap和word-break的区别吗？word-wrap:break-word与word-break:break-all共同点:是都能把长单词强行断句;word-wrap:break-word与word-break:break-all 不...转载 2020-01-06 11:06:56 · 696 阅读 · 0 评论 -
CSS Overflow Hidden在iPhone & Safari不起作用 （实用）
原文出处：https://blog.youkuaiyun.com/u010394015/article/details/51097629overflow hidden在iPhone和Safari上不起作用！其他浏览器和手机都可以，唯独iPhone和Safari不行方法一：网上找到的一种方法，在body上添加下面的CSS：body { position:relative; overf...转载 2019-12-18 15:41:56 · 2795 阅读 · 0 评论 -
CSS3实现的player播放按钮 （实用）
原文出处：https://blog.youkuaiyun.com/iteye_18428/article/details/82324472 （详见原文）html<section class="playContainer"> <li class="playBtn"> <a href="#" title="start">Sta...转载 2019-12-17 18:19:56 · 1461 阅读 · 0 评论 -
CSS动画效果——语音播放小喇叭 （实用，赞）
原文出处：https://www.jianshu.com/p/5a3cfcc764f5写业务代码经常会碰到要自己实现一些设计交给的小动画，今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果：语音播放效果对于这个有几种实现方案：一种是直接把图标.png文件放在下面，然后再在上面覆盖一层跟它弧度相似的圆形div，通过css的animation去控制那个覆盖的div从左向...转载 2019-12-17 18:04:51 · 6292 阅读 · 0 评论 -
span标签间距 （实用）
原文出处：https://www.cnblogs.com/chargeworld/p/10270515.html最近在做的一个项目里面碰到这么一个问题： 1 2 3 4 <p> <span>块1</span> <span>块2</span> </p&...转载 2019-11-28 15:35:16 · 5780 阅读 · 0 评论 -
利用 Css 制作精美的卡片UI （赞）
原文出处：https://segmentfault.com/a/1190000009388832效果图，鼠标移彩色，移出黑白 本教程将会告诉你如何用 Html 和 Css 实现卡片界面。教程会重点使用 Css filter 属性处理图片，以便给它添加一些过渡效果。第一步：确定 HTML 代码结构在创建 HTML 代码前，你首先应该想象它的结构。...转载 2019-11-13 18:28:03 · 5095 阅读 · 0 评论 -
9种样式CSS3 渐变按钮集 (实用）
原文出处：https://blog.youkuaiyun.com/life66881/article/details/46440345效果图：html|<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div><h1>Cross-browse...转载 2019-11-08 18:31:37 · 1115 阅读 · 0 评论 -
一个漂亮的渐变按钮（实用）
参考：CSS3之渐变色按钮效果图：html<button class='my_btn'> abc </button>css.my_btn { background: linear-gradient(right,#FE48D3,#BF3DC9); background: -ms-linear-gradient(right,#FE...原创 2019-11-08 18:12:27 · 4324 阅读 · 0 评论 -
在div底部显示背景图片实现代码
原文出处：http://www.3lian.com/edu/2013/08-16/89839.htmldiv层背景图片在底部显示，貌似有很多的朋友都不会吧，下面为大家简单介绍下具体的实现方法，感兴趣的朋友可以参考下 下面代码实现div层背景图片在底部显示： 代码如下:div { background:url(/images/bg.jpg) no-转载 2014-01-04 14:36:27 · 1974 阅读 · 0 评论 -
JavaScript刮奖效果(jquery图片刮奖插件)
原文出处：http://www.codefans.net/jscss/code/4593.shtmljquery.scratchie.js图片刮奖插件实例演示代码，可实现类似刮奖的效果，刮刮乐中的基本效果。引用了google的API，jquery版本1.4.4，需要几张图片配合，已附在代码里，运行效果后右键-->图片另存为下载素材图片。本效果兼容性也不错，可用于网页刮奖游戏中。jQue转载 2014-01-04 10:12:56 · 7562 阅读 · 1 评论 -
JS星级评分，带提示
原文出处：http://www.codefans.net/jscss/code/3458.shtmlJS仿淘宝网的星级评分系统，鼠标放在上边可以显示星级代表的评分级别，鼠标点击时会选中当前的星级，目前此功能在网页上十分流行，虽然是仿做的，但已经很不错的功能了，希望大家喜欢！星级评分系统 body,div,ul,li,p{margin:0;padding:0;}body{col转载 2014-01-04 10:19:47 · 1000 阅读 · 0 评论 -
CSS中伪类的使用
原文出处：http://hszy00232.blog.163.com/blog/static/43022753201131641141494/何为伪类？也就是实际实现了类的效果，但是并没有实际添加到标签中的类，这样的就是伪类。伪类的典型构成就是使用了（:）冒号。1.先说最常用的a链接的伪类，目前市场上的主流浏览器都支持。:link 链接样式:visited转载 2014-02-12 16:26:38 · 800 阅读 · 0 评论 -
CSS3 @font-face 显示特殊字体
原文出处：http://www.cnblogs.com/rubylouvre/archive/2011/06/19/2084875.html转载 2014-02-12 17:34:30 · 12559 阅读 · 1 评论 -
CSS3 animate实现图片墙3D翻转效果
原文出处：http://www.html5china.com/CSS3/20101226_729.html一、前面的唠叨（注意浏览器支持哦） 老实讲，起初研究CSS3的一些东西真是很兴奋的，哇塞，这效果，太酷了，酷得就像超人的三角裤。但是最近，淡了。为什么呢？不是因为百度今天…一、前面的唠叨（注意浏览器支持哦）老实讲，起初研究CSS3的一些东西真是很兴奋的，哇塞，这效果，太转载 2014-02-14 10:49:22 · 4731 阅读 · 0 评论 -
WebKit CSS3 动画基础
原文出处：http://www.html5china.com/CSS3/20110507_1562.html前几天在Qzone上看到css3动画，非常神奇，所以也学习了一下。 首先看看效果 http://www.html5china.com/css3demo/base1 很悲剧的是css3动画现在只有WebKit内核的浏览器（Safari和Chrome）支持，虽然应… 前几天在转载 2014-02-14 10:23:31 · 745 阅读 · 0 评论 -
css清除浮动大全，共8种方法
原文出处：http://hi.baidu.com/jinhui04/item/c339d046e852b304c016133f清除浮动 是每一个 web前台设计师 必须掌握的机能。 为什么浮动这么难？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果转载 2014-02-14 15:22:03 · 653 阅读 · 0 评论 -
HTML5实现网页元素的拖动操作
原文出处：http://zzstudy.offcn.com/?p=8152HTML5之前，要实现网页元素的拖动操作，需要依靠mousedown、mousemove、mouseup等API，通过大量的JS代码来实现； HTML5 中引入了直接支持拖动操作的API，大大简化了网页元素的拖动操作编程难度，并且这些API除了支持浏览器内部元素的拖动外，同时支持浏览器和其它应用程序之间的数据互相拖动转载 2014-02-14 16:29:05 · 1779 阅读 · 0 评论 -
块对象与内联对象（行内元素）
转自：http://zhidao.baidu.com/link?url=kgO0dzlwF1_2UGlp6tLmOHU6SiksdSP2ocmejvROK2kbgIxTENmxlC6a-NfiCLbhfHegXW3aknAVraUZUTT_t_问：什么是内联对象？答：我这里把内联对象和块对象做了一个比较 希望你能对彼此有更深的理解块对象块对象默认宽度是100%（继转载 2014-02-27 15:27:38 · 1349 阅读 · 0 评论 -
一个jQuery+CSS 很好的网站
前端博客公共静态资源Author：云淡然Website： ydr.mehttp://static.qianduanblog.com/转载 2014-02-13 16:04:37 · 908 阅读 · 0 评论 -
30 个 jQuery & CSS3 加载动画和进度栏插件
转自：http://www.oschina.net/news/49287/30-jquery-css3-loading-animation-progress-bar-plugins喜欢哪个赶紧带走，过期不候。Animated Progress Bars with CSS3[ Demo | Download ]Spin JS Bar[ Demo |转载 2014-03-01 12:59:37 · 1647 阅读 · 0 评论 -
:after伪类+content内容生成经典应用举例
转自：http://www.zhangxinxu.com/wordpress/?p=1136一、简单说说content内容生成content内容生成就是通过content属性生成内容，content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持： (Firefox 1.5+, Safari 3.5+,转载 2014-03-05 15:41:10 · 4062 阅读 · 0 评论 -
无JavaScript实现选项卡轮转切换效果
转自：http://www.zhangxinxu.com/wordpress/?p=1108一、效果展示12341 2 3 4如果您觉得此页面上看此效果有干扰，可以狠狠地点击这里：无JavaScript实现的切换效果demo二、关于实现原理：下面的1-2-3-4链接锚点是指向box中的各个id的，当点击这些链接转载 2014-03-05 14:24:19 · 808 阅读 · 0 评论 -
浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)
转自：http://www.kuqin.com/webpagedesign/20120205/317837.html经过测试的浏览器：IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon按钮的HTML代码：input id="btn_comment_submit" type="button" class="commen转载 2014-03-04 21:36:57 · 3658 阅读 · 0 评论 -
js和css的顺序关系
转自：http://www.kuqin.com/webpagedesign/20120205/317846.html1. head里的顺序如下，考虑会对请求有何影响：a. 外部js在css前面b. 外部js在css后面c. 内部js在css前面// do somethingd.转载 2014-03-04 21:39:23 · 638 阅读 · 0 评论 -
HTML 5 & CSS 3的新交互特性
转自：http://www.kuqin.com/webpagedesign/20111126/315413.html本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么，有没有一种新的方法可以避免这些缺点呢？转载 2014-03-04 21:29:35 · 1124 阅读 · 4 评论 -
小挖掘 伪类:before & :after
转自：http://moreimagination.diandian.com/post/2012-03-22/17003323 before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：#ex:before { content:"#"; color:red;}#ex:afte转载 2014-03-10 09:18:52 · 730 阅读 · 0 评论 -
:before和:after伪类元素创造神奇效果
转自：http://www.alixixi.com/web/a/2011090273706.shtml文章简介：伪类元素之美.通过使用:before和:after，你能创作出让人称奇的视觉效果。对页面中的每个元素，你都有两个额外的可以控制的元素，本来这些是需要额外的元素来实现。他们给设计带来了更多的趣味性的空间，而不是增加无语义的有负面影响的标签。这里给转载 2014-03-10 09:21:18 · 2251 阅读 · 0 评论 -
去除android浏览器中a、input获得焦点时的高亮边框（outline）
转自：http://www.ifrans.cn/remove-android-focus-highlight-outline/a,input等元素在android原生浏览器下获得焦点时，元素外围会出现一个橙色的高亮边框（如下图）。若要去除它，通常的办法是：1a:focus,input:focus{ -webkit-ta转载 2014-04-16 14:26:05 · 1524 阅读 · 0 评论