随笔分类 -  css

chrome的input输入框填充后背景颜色变成黄色 （input:-webkit-autofill 导致的）
摘要：填写form表单时发现chrome的一个好坑啊！ 当你之前有填写过表单，获取焦点时，input会有一个记录之前填写过的文本的下拉列表式的东东， 按理说，这没什么问题，很多时候为了方便，也需要它记录输入，但是，同时也发现，文本框变成了屎黄色了！而且当你选择其中的文本时它依然还是屎黄色！ 为什么会这样？ 阅读全文
posted @ 2018-11-30 14:23 SophiaLiu 阅读(2097) 评论(0) 推荐(0)
表格行与行的间距设置，通过margin无效，要这么设置
摘要：CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 border-collapse属性加上border-spacing属性就可以设置tr行间距 阅读全文
posted @ 2018-07-11 15:12 SophiaLiu 阅读(620) 评论(0) 推荐(0)
在项目中增加自定义icon图标
摘要：以MUI框架为例，内容来自于MUI官网。 mui如何增加自定义icon图标 mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体，至于为什么使用字体图标而不是图片，相信web开发者多少都有所了解，简单列举几条： 多个图标字 阅读全文
posted @ 2018-06-21 10:04 SophiaLiu 阅读(942) 评论(0) 推荐(0)
解决——CSS :before、:after ，当content使用中文时有时候会出现乱码
摘要：问题： 在进行页面开发时，经常会使用:before, :after伪元素创建一些小tips，但是在:before或:after的content属性使用中文的话，会导致某些浏览器上出现乱码。 例如我遇到一个分页的问题： 正常时这样的： 有时候会出现乱码变成这样子： 解决方案： 阅读全文
posted @ 2018-05-28 14:20 SophiaLiu 阅读(9059) 评论(0) 推荐(0)
史上最全的CSS hack方式一览
摘要：做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器 阅读全文
posted @ 2017-11-15 18:15 SophiaLiu 阅读(187) 评论(0) 推荐(0)
web常见几种处理图标方法 【转】
摘要：方法一： 用background制作小图标 像这样，拿到设计稿后把所有的图标放在一张图片上，利用background-position、width、height来控制图标的位置及大小。 代码： 引用时： 优点： 图片作为背景来显示图标，图标的效果好，不容易出现锯齿 缺点： 图标大小及颜色难以控制，特 阅读全文
posted @ 2017-08-29 14:47 SophiaLiu 阅读(542) 评论(0) 推荐(0)
去掉input框后边的叉号
摘要：::-ms-clear, ::-ms-reveal { display: none; }在样式里加上这句话即可 阅读全文
posted @ 2017-04-21 10:20 SophiaLiu 阅读(1757) 评论(0) 推荐(0)
自定义复选框样式
摘要：效果如下 通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。 1.css 如下 #rulelabel{ background-image:url(../static/image/unselected.png); background-re 阅读全文
posted @ 2017-02-08 09:24 SophiaLiu 阅读(298) 评论(0) 推荐(0)
flex-direction用法解释
摘要：语法： flex-direction：row | row-reverse | column | column-reverse 默认值：row 适用于：flex容器 继承性：无 动画性：否 计算值：指定值 flex-direction：row | row-reverse | column | colu 阅读全文
posted @ 2017-01-10 09:27 SophiaLiu 阅读(18166) 评论(0) 推荐(1)
CSS text-transform 属性——转换文本的大小写格式
摘要：可能的值 规定应该从父元素继承 text-transform 属性的值。 <html> <head><style type="text/css"> h1 {text-transform: uppercase} p.uppercase {text-transform: uppercase} p.low 阅读全文
posted @ 2016-07-11 09:49 SophiaLiu 阅读(3948) 评论(0) 推荐(0)
div嵌套内层div的margin-top转移给外层div的解决办法
摘要：在web开发过程中，有些情况下给内层ｄｉｖ设置的margin却被莫名奇妙的转移给了外层ｄｉｖ。百度之后，发现它竟然是ｃｓｓ２.１中盒模型中规定的内容： In this specification, the expression collapsing margins means that adjoin 阅读全文
posted @ 2016-04-27 16:28 SophiaLiu 阅读(682) 评论(0) 推荐(0)
实现在一个页面内，点击导航栏的不同链接，跳转到不同的页面
摘要：1.实现在一个页面内，点击导航栏的不同链接，跳转到不同的页面 <html><body><h1>HTML 教程目录</h1><ul><li><a href="#C1">第一章</a></li><li><a href="#C2">第二章</a></li><li><a href="#C3">第三章</a> 阅读全文
posted @ 2016-04-12 16:19 SophiaLiu 阅读(4603) 评论(0) 推荐(0)
网页中如何使用一些特殊字体
摘要：虽然我们可以通过图片，flash、SIFR等技术来实现网页使用特殊字体，有利于SEO网页中嵌入特殊字体方法，@font-face属性。 通常网页上不能使用一些特殊字体，否则浏览者可能无法正确浏览到，虽然我们可以通过图片，flash、SIFR等技术来实现网页使用特殊字体， 但是这都有个严重的缺点：不利 阅读全文
posted @ 2016-04-06 14:09 SophiaLiu 阅读(2748) 评论(0) 推荐(0)
css动画——transition和animation
摘要：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分：CSS Transition 在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时 阅读全文
posted @ 2016-03-11 09:52 SophiaLiu 阅读(247) 评论(0) 推荐(0)
7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
摘要：今儿，我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位，类似pixel 和 em 这样的，但是很有可能你之前从来就没听过这些家伙们！ rem 我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了fon 阅读全文
posted @ 2016-02-23 17:12 SophiaLiu 阅读(244) 评论(0) 推荐(0)
background不能填充margin的问题
摘要：CSS2 中有5个主要的背景(background)属性，它们是：background-color: 指定填充背景的颜色。background-image: 引用图片作为背景。background-position: 指定元素背景图片的位置。background-repeat: 决定是否重复背景图片... 阅读全文
posted @ 2016-01-06 15:20 SophiaLiu 阅读(1292) 评论(0) 推荐(0)
css布局模型之绝对定位与相对定位
摘要：1. 绝对定位，absolute 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含... 阅读全文
posted @ 2015-10-08 10:05 SophiaLiu 阅读(794) 评论(0) 推荐(0)
鼠标移到某个对象上，显示小手的形状
摘要：在该对象上加上一句样式：cursor：pointer即可 阅读全文
posted @ 2015-09-29 09:52 SophiaLiu 阅读(602) 评论(0) 推荐(0)