css3
indd
csdn 广告太多
展开
-
content: ""乱码问题
I am using a unicode escape in my .sass file and I want to preserve it, but sass is creating a weird character in the output. How to solve this?解决sass 编译后特殊字符在页面上显示乱码的问题@function unicode($str...){...原创 2018-12-04 13:25:25 · 1694 阅读 · 0 评论 -
纯CSS3使用vw和vh视口单位实现自适应
纯CSS3使用vw和vh视口单位实现自适应前端博客•2017-07-02•前端开发教程•CSS3 | 自适应•19407View0文章目录认识视口单位( Viewport units )兼容性利用视口单位适配页面做法一:仅使用vw作为CSS单位做法二:搭配vw和rem,布局更优化小结后语编者注:在移动端中利用rem的相对于根HTML进行改变,通过一段JS实现了移动端自适应,本文则使用纯CSS视口单...转载 2018-07-30 14:09:06 · 711 阅读 · 0 评论 -
css常用技巧
概述相信大家在写css属性的时候,会遇到一些问题,比如说:垂直对齐,垂直居中,背景渐变动画,表格宽度自适应,模糊文本,样式重置,清除浮动,通用媒体查询,自定义选择文本,强制出现滚动条,固定头部和页脚,自己在网上看到的一篇关于css的文章,感觉这里边一些常用的css代码片段...转载 2018-06-26 14:35:12 · 160 阅读 · 0 评论 -
巧用占位图开发
巧妇难为无米之炊,对于我们前端开发没有设计稿没有图片去搞什么页面啊用用占位图吧:http://via.placeholder.com/350x150原创 2018-03-27 20:48:25 · 1867 阅读 · 0 评论 -
常见css布局图片垂直居中
实现水平居中的方案很多详细请移步:http://www.51xuediann <div> <img src="1.jpg" alt="haha"> </div><style type="text/css"> *{margin: 0;padding: 0;} div{原创 2018-03-20 19:30:50 · 161 阅读 · 0 评论 -
prefixStyle()函数使用
最近在做vue 项目音乐webApp时 遇到需要操作css3的一些属性,当然为了浏览器的兼容性,有时我们需要加上一些前缀。 如果是在css中,编辑器自带的功能一般可以实现,或者通过gulp、webpack打包时也都有插件实现自动添加 如果是在js中,可以用下面的代码:封装成一个prefixStyle()函数复用//dom.js文件let elementStyle = documen原创 2018-01-18 20:12:16 · 1038 阅读 · 0 评论 -
css3新特性总结
1.前言css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3转载 2018-01-11 09:13:27 · 365 阅读 · 0 评论 -
好好再整理一下Less知识吧
一、什么是Less css的Less好比是js的Jquery,可以让人们更方遍快捷的使用css,使css代码更简洁,可以减少重复的代码,减少开发人员的工作量。 Less CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 Less中文手册:less.bootcss.原创 2016-09-03 22:24:49 · 742 阅读 · 0 评论 -
css中px,em和rem的区别要弄清楚
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pixel)。相对长度单位。像素px是相转载 2016-07-24 21:44:35 · 320 阅读 · 0 评论 -
CSS 两列布局---左侧固定,右侧自适应
前端一个小面试题总结如下: 1、方法一,高度100%,左侧float,右侧自动宽度(会自动占满剩余宽度)。 2、方法二,绝对定位absolute,使用方法一的HTML结构,左侧绝对定位,拉出文档流,高度100%并设置一定宽度400px。右侧自动宽度(将占100%)并设置margin-left:400px。 3、方法三, 右侧宽度与高度均100%,左侧部分float,使左侧部分被包含到右侧部分,原创 2016-08-11 09:30:36 · 5056 阅读 · 0 评论 -
css sprite
CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。简介CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允原创 2016-08-19 23:46:18 · 537 阅读 · 0 评论 -
margin 负值之美
负值转载 2016-07-18 21:12:21 · 733 阅读 · 0 评论 -
推荐大家使用的CSS书写规范、顺序
推荐大家使用的CSS书写规范、顺序 2016-07-19 标签:CSS原创 2016-07-19 19:54:53 · 682 阅读 · 0 评论 -
css引入外部字体
.TTF或.OTF,适用于Firefox 3.5、Safari、Opera .EOT,适用于Internet Explorer 4.0+ .SVG,适用于Chrome、IPhone 比如: @font-face { font-family: ‘HansHandItalic’; src: url(‘fonts/hanshand-webfont.eot’); src: url(‘font原创 2016-07-27 19:23:05 · 714 阅读 · 0 评论 -
清除浮动的三种方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。下面看今天的教程,此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景。原创 2016-07-17 10:06:17 · 670 阅读 · 0 评论 -
每天为自己充点电还是好的虽然前期的知识有点乏味,但走一步是一步的心态不能变。嗯,加油!If you find a path with no obstacles, it probably doesn’t
学习提高css技术的法则,本文是从前端早读课上看到的 正文从这开始~首先让我提醒你,css是极其简单的一门语言,简单到可以用三个词概括:选择器,属性以及属性的值。这也是一些人不喜欢css的原因:他们觉得写css像孩子玩乐高玩具一样简单。是这样的。。如果你给一个9岁的孩子介绍css的基本原理,他就会搭建一个网站。不过这个网站不会很复杂,也就是一些包含头部,链接,内容图片的页面而已。事实上,css是一转载 2016-07-27 15:37:07 · 626 阅读 · 0 评论 -
flex 布局华为meta8 自带浏览器兼容
现在的手机有很多的需要垂直居中和水平居中,还要和能够很完美的配合适屏的需求,css3中出现了完美的盒模型box-flex和flex弹性布局,网上能找到各种关于这两种布局的资料,用法也不难;哈哈昨天上线突然发现华为note8 浏览器不兼容flex 布局,只需要一招变解决了问题,最好还是记录一下。兼容问题现在大多数的手机都是能够兼容flex布局的,而且我们主要用的也是flex更多一些,所以...转载 2019-03-01 08:48:00 · 597 阅读 · 0 评论