随笔分类 - Css

摘要:vue中使用less 安装less依赖,npm install less less-loader --save vue中使用sass npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev 阅读全文
posted @ 2019-06-13 11:05 对方屌丝正在输入中 编辑
摘要:1. 基础前端开发者 1.1 HTML & CSS 最基础的知识: 语义化的HTML元素 基础的CSS语法 Flexbox & Grid CSS变量 浏览器开发者工具 1.2 响应式布局 响应式设计将不再是网页的加分项, 而是必须的 设置viewport 非固定宽度 媒体查询 使用 rem 替代 p 阅读全文
posted @ 2019-06-12 11:51 对方屌丝正在输入中 编辑
摘要:(一)-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜 阅读全文
posted @ 2019-06-12 10:26 对方屌丝正在输入中 阅读(288) 评论(0) 推荐(0) 编辑
摘要:https://blog.csdn.net/px01ih8/article/details/80780470 一、区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画)、transition(过渡)、transform(变形)、translate(移动)。 CSS3中的 阅读全文
posted @ 2019-04-19 16:20 对方屌丝正在输入中 阅读(858) 评论(0) 推荐(0) 编辑
摘要:纯CSS3项目价格表切换代码 - 站长素材 Basic $5 per month Pro $10 per month Premium $20 per month 5 Users ... 阅读全文
posted @ 2018-12-10 10:11 对方屌丝正在输入中 阅读(127) 评论(0) 推荐(0) 编辑
摘要:垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。 方法1:table-cell html结构: ? 1 2 3 <div class="box box1"> <sp 阅读全文
posted @ 2018-06-20 14:21 对方屌丝正在输入中 阅读(177) 评论(1) 推荐(0) 编辑
摘要:纯CSS实现图片水平垂直居中于DIV(图片未知宽高) 阅读全文
posted @ 2018-01-24 09:47 对方屌丝正在输入中 阅读(112) 评论(0) 推荐(0) 编辑
摘要:基础说明: 外阴影:box-shadow: X轴 Y轴 Rpx color; 属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色 内阴影:box-shadow: X轴 Y轴 Rpx color inset; 默认是外阴影 内阴影:ins 阅读全文
posted @ 2017-12-29 10:32 对方屌丝正在输入中 阅读(192) 评论(0) 推荐(0) 编辑
摘要:? 1 2 3 4 5 6 7 8 前提修改文档声明,如有疑问,请看文章手机web2.0网页文档属性 @media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}} @media screen and 阅读全文
posted @ 2017-12-22 14:29 对方屌丝正在输入中 阅读(715) 评论(0) 推荐(0) 编辑
摘要:input::-webkit-input-placeholder{color: #7f7f7f;} select{color: #7f7f7f} option{color: #7f7f7f;} 阅读全文
posted @ 2017-10-11 15:58 对方屌丝正在输入中 阅读(2154) 评论(0) 推荐(0) 编辑
摘要:rem是根据网页效果图的尺寸来计算的,当然还要借助媒体查询来完成。例如你的设计稿如果是宽720px的话,那你的文字就要以原始大小除以11.25,就是对应下面媒体查询720px;例如16px的话就要16/11.25这样来计算。用之前要把下面这段代码放到你css文件里:@media only scree 阅读全文
posted @ 2017-09-26 12:01 对方屌丝正在输入中 阅读(1531) 评论(0) 推荐(0) 编辑
摘要:word-wrap是控制换行的。 使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。 word-break是控制是否断词的。 break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。 阅读全文
posted @ 2017-08-07 09:26 对方屌丝正在输入中 阅读(151) 评论(0) 推荐(0) 编辑
摘要:http://www.cnblogs.com/xiaohuochai/p/5202761.html 前面的话 display属性在网页布局中非常常见,但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值,本文将详细介绍display属性的各个方面 定义 di 阅读全文
posted @ 2017-08-03 10:12 对方屌丝正在输入中 阅读(233) 评论(0) 推荐(0) 编辑
摘要:解决方案 1、弹出时给html标签追加height:100% 2、弹出父级元素追加overflow:hidden 3、弹出和遮罩 position:absolute 4、在页面顶部增加fixed ios会固定在顶部,不会出现系统下拉 demo 阅读全文
posted @ 2017-07-19 16:20 对方屌丝正在输入中 阅读(138) 评论(0) 推荐(0) 编辑
摘要:中文版Chrome浏览器不支持12px以下字体的解决方案 http://blog.csdn.net/freshlover/article/details/9746821Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12 阅读全文
posted @ 2017-07-19 11:20 对方屌丝正在输入中 阅读(276) 评论(0) 推荐(0) 编辑
摘要:行内元素,图片和文字中间有缝隙,需要给父元素设置font-size:0; 图片和文字不对齐,给图片设置vertical-align:top 文字行高有缝隙 设置vertical-align:top 阅读全文
posted @ 2017-07-07 09:49 对方屌丝正在输入中 阅读(152) 评论(0) 推荐(0) 编辑
摘要:http://www.w3cplus.com/blog/tags/136.html http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page .masklayer{width: 100%; height: 100%; posit 阅读全文
posted @ 2017-07-07 09:48 对方屌丝正在输入中 阅读(111) 评论(0) 推荐(0) 编辑
摘要:http://www.w3cplus.com/blog/tags/136.html http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page body { display: flex; flex-flow: column; mi 阅读全文
posted @ 2017-06-26 13:54 对方屌丝正在输入中 阅读(130) 评论(0) 推荐(0) 编辑
摘要:去除ios输入框阴影 input,textarea{-webkit-appearance:none; outline: none; } ios有边框时设置boder-radius:0; 去除默认圆角问题 阅读全文
posted @ 2017-06-23 17:22 对方屌丝正在输入中 阅读(157) 评论(0) 推荐(0) 编辑
摘要:原理就是利用 overflow:hidden; 阅读全文
posted @ 2017-06-22 12:36 对方屌丝正在输入中 阅读(244) 评论(0) 推荐(0) 编辑