CSS
freedom_文
这个作者很懒,什么都没留下…
展开
-
CSS设置 浏览器滚动条(IE / Chrome)
备忘记录:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t原创 2018-10-06 20:09:35 · 764 阅读 · 0 评论 -
【CSS3动画】简单实现背景闪烁,文字闪烁 兼容IE11
相关配置兼容性属 教程 等参考这个就够了:https://www.w3school.com.cn/css3/css3_animation.asp以下示例测试了chrome / IE11 / 火狐浏览器背景闪烁:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2019-11-25 21:06:40 · 3500 阅读 · 1 评论 -
【CSS】相对长度单位 绝对长度单位,vw/vh , rem等
相对单位: (一般用于对屏幕分辨率兼容较高的项目,可以使用不同设备的大小) 单位 描述 em ems始终相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px; ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 ...原创 2020-01-29 18:07:08 · 3379 阅读 · 0 评论 -
【CSS】验证表单元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{width: 200px;margin:100px auto;} ...原创 2019-08-12 14:33:18 · 232 阅读 · 0 评论 -
CSS3动画(一)、transition过渡效果; + 示例
支持 transition 的浏览器,兼容性图表:transition 是简写属性,可以一次同时写下面4个属性的值;一般也推荐直接简写;transition-property 规定应用过渡的 CSS 属性的名称。(宽、高、边距、颜色等)默认值:alltransition-duration 定义过渡效果花费的时间。默认值: 0transition-timing-function 规定过...原创 2019-04-10 17:36:33 · 3887 阅读 · 0 评论 -
[CSS] ul列表 水平X轴 滚动,各种元素水平滚动 (兼容IE)
备忘:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1,#d2{width: 800px;margin: 100px auto;}...原创 2019-03-25 18:37:12 · 2084 阅读 · 0 评论 -
css 清除浮动元素影响的几个常用简单的方法
1、 写在 :after 伪元素 里面 (最推荐) <style> div{width: 500px;margin: 50px auto;} ul{border: 1px solid #ccc;} ul:after{display: table;content: " ";clear: both;} //关键 li{f...原创 2019-02-26 17:50:24 · 335 阅读 · 0 评论 -
prefixfree.min.js 解决大部分CSS兼容性问题,免写前缀
由于各浏览器的生产厂商不一样,也没有统一使用W3C的标准,因此很多CSS3样式属性都需要添加前缀才得以识别:-khtml- Konqueror-rim- RIM-ms- Microsoft(IE)-0- Opera-moz- Mozilla(如Firefox)-webkit- Webkit所以就有牛人开发出...转载 2018-10-26 16:36:09 · 1496 阅读 · 0 评论 -
input 纯CSS 自定义 单选框/多选框 样式
备忘,直接上代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;样式&lt;/ti原创 2018-10-19 09:25:19 · 1334 阅读 · 0 评论 -
input [type=number] 各主流浏览器上隐藏/去掉右侧箭头、x号、小眼睛 及 maxlength设置
备忘,直接上代码:&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;U原创 2018-08-30 20:48:35 · 3889 阅读 · 0 评论 -
简单的自定义select 下拉框,兼容IE
IE浏览器下 的select 实在是各种…… 不好看……,可是项目要求至少兼容IE11 , 为了长得好看些,只能手动去编辑一个类似 select 的存在了, 测试过IE9 以上,有不对的欢迎指出备忘,直接上代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;me原创 2018-07-25 21:40:35 · 2905 阅读 · 0 评论 -
html/CSS 字体样式表 font-family:中文字体的英文名称
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312转载 2017-12-22 15:24:13 · 4907 阅读 · 0 评论 -
html / CSS 自定义字体font 自己设置好看的特效字体
这篇文章的主题是CSS3属性 : @font-face楼主很喜欢CSS3的一些新增属性,给我们前端程序员带来了非常很多福利,我们的页面也可以做的更加的美观。直接放效果图吧,因为代码较长,放在最下面了;关于浏览器的兼容性问题Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。Int原创 2017-12-25 16:16:07 · 30239 阅读 · 6 评论 -
html动态添加需要显示的内容/文字过多,超出部分以省略号显示,鼠标移入时全部显示
表格中有时某个元素里内容会很多,多到影响了整个页面布局的情况,除了写死在html中的内容,只要是动态添加的数据都很有可能会发生这种情况,举个例子简单说一下自己目前的处理方法,写的不好的请大神多多指教!先说一下会出现的一些情况: 在CSS样式中我设置的很明确,后面两个 列 的宽度是 40% 不过现在这种情况明显已经超过了40%,甚至已经将前面两列挤得变形了 ; 造成这样的原因是因为第二行中原创 2017-12-31 12:39:45 · 5173 阅读 · 0 评论 -
CSS3 + JavaScript原生 实现翻转特效
利用CSS3 动画:@keyframes 具体在这里就不详细解释了,想要详细了解的可以访问下面这个网址:http://www.w3school.com.cn/css3/css3_animation.asp 理论上来说就是先定义好想要的动画效果,在用JS 将写好的效果用鼠标移入移出的事件来配合: 废话不多说,直接上代码:<!DOCTYPE html><html l原创 2017-12-20 15:41:05 · 1349 阅读 · 0 评论 -
CSS各种选择器 【一】
CSS3 的 匹配属性选择器 : 以开头名称的一份来设置的选择器: ^=div[id^=”pri”]设置以 id 属性值 以“pri”开头的所有div元素 的样式p[class^=”abc”]{ color:#faf;}设置以 class 属性值 以 “abc”开头的所有p元素 的样式[d原创 2017-11-14 16:06:58 · 454 阅读 · 0 评论