div+css 技巧大全

121212 css 计数 css 代码 .choose{ counter-reset:fruit; } .choose input:checked{ counter-increment: fruit; } .count:before{ content:counter(fruit); } HTML 代码 <div class="choose"> <label><input type="checkbox">1</label> <label><input type="checkbox">2</label> </div> <p><span class="count...

2018
06-16

link 和 @import 引入样式表你真的了解吗?

前言 样式表的引入相信你已经不陌生,link 姿势引入你早已用得炉火纯青,虽然这样,但关于 link 和 import 之间的关系或者说区别你又知道多少?这篇文章就是要把它们之间的细微差别给挑出来,让你过目的。 link 是 html 中的语法,而 import 是样式表中的语法,两者虽然作用一样,但使用的场景有所不同。 还有一个就是加载时机的不同,如果 import 是写在样式表中的,那么 impot 命令就会等到父样式表加...

2018
03-26

文字换行处理 word-wrap word-break white-space 用法及区别

作为前端的你,浏览器默的文字处理方式估计不用我再多说一句了。这里有两种情况我们需要知道的,但在实际中出现的机率不大,请看图: 前面的换行是因为我加了<br>标签,第一行我们不用管,只需关注第二行文字,第二行文字为什么会超出盒子? 我猜:在处理文字的时候浏览器会把它们看成一个整体(如:单词),并且不会拆分它们,一行又显示不完全,那怎么办呢?只能像上面那样处理了。于是就会出现了...

2017
03-08

移动端用滚动条属性实现左右滚动效果

前言 移动端左右滚动,不是我们常说的图片切换,只是实现了通过手指实现内容的左右滚动。现在很多app 都会有这样的效果。在线 Demo :http://yunkus.com/demo/mobile-use-scroll-bar-property-realize-horizontal-scroll/。注意:浏览器得切换到手机模式查看效果哦! 入门代码 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2017
03-06

CSS 水平垂直居中方法大全

前言 居中一个极其常见的需要,你应该绝不会陌生,但下面将要说的方法可能会有你不知道的。 下面的方法统一的HTML代码如下: <div class="demo-wrap"> <div class="demo-center"></div> </div> position+auto .demo-wrap{ width: 300px; height: 300px; background: #eee; position: relative } .demo-center{ width: 200px; height: 2...

2016
10-31

CSS:清除浮动的方法(技巧)有哪些?

前言 浮动相信在平时的项目开发当中你一定用了不少,也遇到了不少。也知道有可以清除浮动的最常用的方法。那么下面我就给大家分享下我所知道的可清除浮动的方法。 清除浮动方法 float 法 也就是给父元素一个浮动,以达到清除浮动的效果。 /* 样式 */ .wrap-clear{border:1px solid #ccc;float: left;} .left-column{float: left;border:1px solid teal;} <div class="wrap-clear"> <div...

2016
10-19

Meta标签里的 apple-mobile-web-app-capable 作用

apple-mobile-web-app-capable的存在让本来屏幕就小的移动设备来说,可谓是福音呀。他可以让用户的屏幕变得“更大”。其实他就是通过删除苹果默认的工具栏和菜单栏,来给用户腾出更多的空间从而让网页得到更好的展现,让iphone达到屏幕增大的效果。 他的用法也好简单: <meta name=”apple-mobile-web-app-capable” content=”yes” /> 其实针对iphone的meta标签属性不仅仅就只有这个,下面我们再来看别外...

2015
09-22

Meta 标签里的 format-detection 含义及作用

format-detection 翻译成中文就是格式检测的意思,他是用来检测页面里的一些格式。如果你是做移动开始的应该常常会遇到这种情况,明明就是一串数字,没添加点击拔号的,但当你用 iphone 时默认给你加上了,明明就是一个邮箱地址,没点击发送邮件的,明明是个地址,点击却跟到一个一地图中,那么 format-detection 正好是为你解决这些问题的好帮手,不信?请往下看! meta的format-detection属性主要是有以...

2015
09-22