随笔分类 - DIV+CSS
摘要：
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统，基于element-ui很丰富的组件生态，我们可以很快速的开发管理后台系统的页面（管理后台系统的页面也不复杂，大多都是分页查询类需求和增删改查）。但一个前端框架有优点，就必然会有一些缺点或bug存在，element-ui框架也不例外，甚至elementui框架的缺点或bug还很多，这里就不一一列举了，相信使用它的我们都心知肚明。
今天，本篇文章就针对element-ui的一个组件——select选择器进行一些改进，以达到我们实际的项目开发中想要实现的一个效果，或者说完善该组件的一些功能。当然了，还是在select选择器的基础上改进，不会对它的源代码做任何修改。
阅读全文
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统，基于element-ui很丰富的组件生态，我们可以很快速的开发管理后台系统的页面（管理后台系统的页面也不复杂，大多都是分页查询类需求和增删改查）。但一个前端框架有优点，就必然会有一些缺点或bug存在，element-ui框架也不例外，甚至elementui框架的缺点或bug还很多，这里就不一一列举了，相信使用它的我们都心知肚明。
今天，本篇文章就针对element-ui的一个组件——select选择器进行一些改进，以达到我们实际的项目开发中想要实现的一个效果，或者说完善该组件的一些功能。当然了，还是在select选择器的基础上改进，不会对它的源代码做任何修改。
阅读全文
摘要：
一开始看到这个功能需求，我也很懵逼，因为从来没有做过啊，哈哈。。。但转念一想既然产品能提出这个需求，想必会有人实现过，就去网上查了查资料，果不其然，还真有人做过，但离我想要的效果还是差着十万八千里，所以按照网上大神的思路，结合我司的实际需求，自己就把它给捣鼓出来了。
其实刚做好的效果还是能实现产品的需求的，我就让同事帮忙测试一下看看有没有什么bug，因为我司对bug的要求以及对用户体验的要求还是很严格的，所以在同事的实际测试以及提醒下，后面我又参照电脑上基于ctrl、shift键来选中文件的实际效果做了改进，算是不给测试提bug的机会吧。
阅读全文
一开始看到这个功能需求，我也很懵逼，因为从来没有做过啊，哈哈。。。但转念一想既然产品能提出这个需求，想必会有人实现过，就去网上查了查资料，果不其然，还真有人做过，但离我想要的效果还是差着十万八千里，所以按照网上大神的思路，结合我司的实际需求，自己就把它给捣鼓出来了。
其实刚做好的效果还是能实现产品的需求的，我就让同事帮忙测试一下看看有没有什么bug，因为我司对bug的要求以及对用户体验的要求还是很严格的，所以在同事的实际测试以及提醒下，后面我又参照电脑上基于ctrl、shift键来选中文件的实际效果做了改进，算是不给测试提bug的机会吧。
阅读全文
摘要：
目前大多数的网站都很少会出现“一个超链接被点击后改变其颜色”的需求，但也还是有一部分网站有这样的实际需求，也是为了能够让用户更容易区分哪些标题是被点击访问过了，这类需求大多在新闻类网站上很常见，比如新浪网目前还是有这样的效果的。以前也本人也碰到过这样的需求，也查过资料，说是需要按照顺序来设置a标签几个伪类的顺序。这可能也是其中的一个原因，但至少我来尝试的时候，这个解决办法貌似没有任何卵用！！！
阅读全文
目前大多数的网站都很少会出现“一个超链接被点击后改变其颜色”的需求，但也还是有一部分网站有这样的实际需求，也是为了能够让用户更容易区分哪些标题是被点击访问过了，这类需求大多在新闻类网站上很常见，比如新浪网目前还是有这样的效果的。以前也本人也碰到过这样的需求，也查过资料，说是需要按照顺序来设置a标签几个伪类的顺序。这可能也是其中的一个原因，但至少我来尝试的时候，这个解决办法貌似没有任何卵用！！！
阅读全文
摘要：
前端技术更新迭代的速度令人咂舌，互联网+的风头刚起那几年，前端技术大多还停留在jquery阶段，按需加载还停留在seajs和requirejs的阶段，css3和H5也不过才崭露头角，但经过几年的飞速发展，Angular、Vue和React俨然已形成前端框架的三足鼎立之势，且风头正劲，各领风骚！看惯了css、sass、less的容颜，惊艳于css3的神奇，向往着下一代css的传奇。今天就简单玩玩下一代的css传奇cssnext(据说阿里早几年前就开始玩cssnext了)。
阅读全文
前端技术更新迭代的速度令人咂舌，互联网+的风头刚起那几年，前端技术大多还停留在jquery阶段，按需加载还停留在seajs和requirejs的阶段，css3和H5也不过才崭露头角，但经过几年的飞速发展，Angular、Vue和React俨然已形成前端框架的三足鼎立之势，且风头正劲，各领风骚！看惯了css、sass、less的容颜，惊艳于css3的神奇，向往着下一代css的传奇。今天就简单玩玩下一代的css传奇cssnext(据说阿里早几年前就开始玩cssnext了)。
阅读全文
摘要：
今天在做H5的水平滑动卡片时用到了`display:inline-block;`却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度才能实现水平左右滚动，这样又增加了代码量，因为卡片的个数不固定，需要实时设置其父元素的宽度，就要用到js，所以代码量增加了，也不是最好的选择。看来最好的解决办法就是用到`display:inline-block;`了，于是缝隙的问题就出现了。
阅读全文
今天在做H5的水平滑动卡片时用到了`display:inline-block;`却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度才能实现水平左右滚动，这样又增加了代码量，因为卡片的个数不固定，需要实时设置其父元素的宽度，就要用到js，所以代码量增加了，也不是最好的选择。看来最好的解决办法就是用到`display:inline-block;`了，于是缝隙的问题就出现了。
阅读全文
摘要：
在做h5移动端时候，发现`overflow: hidden;`在安卓微信页面失效问题，经研究和实验，用第三种方法和第四种方法可以解决！
1、完全隐藏
在`
阅读全文
在做h5移动端时候，发现`overflow: hidden;`在安卓微信页面失效问题，经研究和实验，用第三种方法和第四种方法可以解决！
1、完全隐藏
在`
阅读全文
摘要：
以前，我实现这个自适应的搜索表单，都是苦于一点一点的给input输入框设置宽度来达到和搜索按钮恰好在同一行且铺满屏幕的实现方法，结果做下来在不同大小屏幕的设备上可能输入框的宽度加上搜索按钮（由于搜索按钮宽度很小，所以一般都是设置的固定宽度）的宽度不一定就是100%的情况，但勉强能用。今天，在各种浏览网页时突然发现了一个好的解决办法，终于解开了我多年的困扰，就立马当成笔记写在了我的博客里。方法如下：
阅读全文
以前，我实现这个自适应的搜索表单，都是苦于一点一点的给input输入框设置宽度来达到和搜索按钮恰好在同一行且铺满屏幕的实现方法，结果做下来在不同大小屏幕的设备上可能输入框的宽度加上搜索按钮（由于搜索按钮宽度很小，所以一般都是设置的固定宽度）的宽度不一定就是100%的情况，但勉强能用。今天，在各种浏览网页时突然发现了一个好的解决办法，终于解开了我多年的困扰，就立马当成笔记写在了我的博客里。方法如下：
阅读全文
摘要：
cursor属性规定要显示的光标的类型（形状），该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
不过，整个属性用在PC端没有任何问题，但是用在移动端就有问题了。
有人说，移动端用不上这个属性，PC端才有可能用的上。是，说的没错，PC端能用得上，移动端确实用不上，因为移动端都是手指直接触摸屏幕，点击过后就直接出现了我们想要的效果，根本就用不上这个属性。不过，我们在开发移动端时，难免会在有些地方（除了a标签）用到点击事件，因此就会在css中习惯地加上一个`cursor:pointer`的样式，但项目结束后，我们可能会忘记删除这个样式，此时，问题就来了。
阅读全文
cursor属性规定要显示的光标的类型（形状），该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
不过，整个属性用在PC端没有任何问题，但是用在移动端就有问题了。
有人说，移动端用不上这个属性，PC端才有可能用的上。是，说的没错，PC端能用得上，移动端确实用不上，因为移动端都是手指直接触摸屏幕，点击过后就直接出现了我们想要的效果，根本就用不上这个属性。不过，我们在开发移动端时，难免会在有些地方（除了a标签）用到点击事件，因此就会在css中习惯地加上一个`cursor:pointer`的样式，但项目结束后，我们可能会忘记删除这个样式，此时，问题就来了。
阅读全文
摘要：以前在做图片滚动时，在双击左右箭头，快速切换图片滚动时，会选择附近区域的文字，感觉不是很好，今天在查资料时，讲到了这个问题， 试了一下，不错，解决了问题。
IE及Chrome下的方法一样，对相应的元素添加`onselectstart="return false;"`但是，这个在火狐下不起作用，但是火狐下可以用css样式来达到这个效果，即添加`-moz-user-select:none;`就可以兼容ie，google，firefox了，即代码如下所示：
```屏蔽双击选中文字的区域```
这样这个区域的文字都不能选中了，就也不会出现在双击左右箭头快速切换图片滚动时会选择附近区域文字的情况了
阅读全文
以前在做图片滚动时，在双击左右箭头，快速切换图片滚动时，会选择附近区域的文字，感觉不是很好，今天在查资料时，讲到了这个问题， 试了一下，不错，解决了问题。
IE及Chrome下的方法一样，对相应的元素添加`onselectstart="return false;"`但是，这个在火狐下不起作用，但是火狐下可以用css样式来达到这个效果，即添加`-moz-user-select:none;`就可以兼容ie，google，firefox了，即代码如下所示：
```屏蔽双击选中文字的区域```
这样这个区域的文字都不能选中了，就也不会出现在双击左右箭头快速切换图片滚动时会选择附近区域文字的情况了
阅读全文
摘要：
复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般就像下面这样：
这取决于操作系统和浏览器，有些时候，这种样子并不能满足设计要求，这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式，比如拿到这样一张设计图：blue.png
在过去，想要通过简单地修改样式达成这种设计效果根本不行，不过，现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能力：
阅读全文
复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般就像下面这样：
这取决于操作系统和浏览器，有些时候，这种样子并不能满足设计要求，这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式，比如拿到这样一张设计图：blue.png
在过去，想要通过简单地修改样式达成这种设计效果根本不行，不过，现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能力：
阅读全文
摘要：Document Popover on 左侧 Popover on 顶部 Popover on 底部 Popover on 右侧在代码中加入data-trigger="hover"即可
阅读全文
摘要：
定义和用法
clip 属性剪裁绝对定位元素。
说明
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
描述
设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)。
浏览器支持
所有主流浏览器都支持 clip 属性。
阅读全文
定义和用法
clip 属性剪裁绝对定位元素。
说明
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
描述
设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)。
浏览器支持
所有主流浏览器都支持 clip 属性。
阅读全文
摘要：
在我们写网页的时候，超链接是链接各个页面的桥梁，也是搜索引擎爬虫（spider）收录网站页面的关键，因此，在每个网页中会有许多的超链。
今天，一个同行妹妹在使用了bootstrap框架来搭建自己的网站时遇到了打印网页时在带有超链接文字的旁边出现了超链，然后问我如何解决，我一时头大，从来没有遇到过这样的问题撒，该如何解决呢？
后来还是同行妹妹聪明，经过网上的一番查资料后，终于找到了解决问题的办法，原来，bootstrap.css在超链接的后边生成了一个超链接，代码就是这个a[href]:after { content:" (" attr(href) ")"}。找到了问题所在，解决办法随之而来：
阅读全文
在我们写网页的时候，超链接是链接各个页面的桥梁，也是搜索引擎爬虫（spider）收录网站页面的关键，因此，在每个网页中会有许多的超链。
今天，一个同行妹妹在使用了bootstrap框架来搭建自己的网站时遇到了打印网页时在带有超链接文字的旁边出现了超链，然后问我如何解决，我一时头大，从来没有遇到过这样的问题撒，该如何解决呢？
后来还是同行妹妹聪明，经过网上的一番查资料后，终于找到了解决问题的办法，原来，bootstrap.css在超链接的后边生成了一个超链接，代码就是这个a[href]:after { content:" (" attr(href) ")"}。找到了问题所在，解决办法随之而来：
阅读全文
摘要：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
阅读全文
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
阅读全文
摘要：a { outline: none; } 或者缩小范围： a:focus { outline: none; }
阅读全文
摘要：方法一：new document内容内容内容内容内容内容sfds内容内容内容内容内容内容内容内容内容内容内容内容 方法二：无标题文档 111111111111111111222222222222 2222 方法三：Document 红色 蓝色 带有更多内容的绿色 div注意：Saf...
阅读全文
摘要：导航页档 军事历史新闻 军事 历史新闻
阅读全文
摘要：
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同。
下面我们通过对主要CSS属性的支持，打造全兼容select。
对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情 况：height.100.padding.0、height.no.padding.100、no.height.no.padding
阅读全文
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同。
下面我们通过对主要CSS属性的支持，打造全兼容select。
对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情 况：height.100.padding.0、height.no.padding.100、no.height.no.padding
阅读全文
摘要：在火狐、苹果、谷歌、欧鹏等主流浏览器中，select下拉表单的文字能够垂直居中，如图：而在ie8中，select下拉表单的文字基本就是靠底部显示，如图：那么，如何使得ie8下的select文字垂直居中呢？答案就是设置select{padding:5px 0;}，如图：如果想使得select有一定的高
阅读全文
在火狐、苹果、谷歌、欧鹏等主流浏览器中，select下拉表单的文字能够垂直居中，如图：而在ie8中，select下拉表单的文字基本就是靠底部显示，如图：那么，如何使得ie8下的select文字垂直居中呢？答案就是设置select{padding:5px 0;}，如图：如果想使得select有一定的高
阅读全文
摘要：
本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也慢慢登上了前端技术的舞台。
本文内容大部分属于翻译性质内容，因此，会不那么通俗易懂。不过，你是做手机开发的，或是有意向的，本文的内容如果细细读来，还是有些收获的。
一、定义
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备
阅读全文
本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也慢慢登上了前端技术的舞台。
本文内容大部分属于翻译性质内容，因此，会不那么通俗易懂。不过，你是做手机开发的，或是有意向的，本文的内容如果细细读来，还是有些收获的。
一、定义
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备
阅读全文
浙公网安备 33010602011771号