css
文章平均质量分 63
Maci_yera
这个作者很懒,什么都没留下…
展开
-
写页面常用的css特性:calc() vh vw ch和ex
vh与vw calc() 与 less技巧原创 2017-08-02 13:54:04 · 2661 阅读 · 1 评论 -
css伪类hover新的应用技巧思考+fixed屏幕居中
1.写在前面 之前的理解是hover伪类是写在某个元素上,鼠标移到上面就可以修改此元素的样式,可不可以改变另一个非hover元素样式呢?在使用less的时候,可以这么写:.nav:hover{ color:red; .block{ color:blue; }}含义是hover到nav元素时,既改变nav样式又改变另一个任意block元素样式。那么在css里原创 2017-12-04 15:29:40 · 858 阅读 · 0 评论 -
css 属性选择器学习+css3 混合模式+css background
1.css [attribute]选择器[attribute] [target] 选择带有 target 属性所有元素。 [attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 [attribute~=value] [title~=flower] 选择 title 属性包原创 2017-12-19 14:18:17 · 804 阅读 · 0 评论 -
http://nian.so/#网站的拓展工具编写
这个网站叫做念我用了很久,有安卓和ios版本,我对网页版进行了处理; 写了此社交网站的一个拓展工具。 功能–:对自己或者他人的进展页面内容进行处理,可以筛选关键字。不需要可以隐藏。简单有效。其他页面无法使用。 使用方法–:打开登录个人账户,进入进展页面,如上, 按下F12打开控制台,在console下面,复制我所有的代码,回车即可,直到关闭页面或者刷新都不会消失。 效果展示: 代码:原创 2017-10-05 14:31:10 · 1125 阅读 · 0 评论 -
position:absolute的深入学习
可以参考这位大神文章: http://www.jianshu.com/p/a3da5e27d22b 1.包裹性 一旦给元素加上absolute或float就相当于给元素加上了display:block;内联元素span默认宽度是自适应的,你给其加上width是不起作用的。要想width定宽,你需要将span设成display:block。但如果你给span加上absolute或float,那s原创 2017-09-22 16:30:43 · 607 阅读 · 0 评论 -
js原生图片轮播
上代码: <style type="text/css"> div{ width: 200px; height: 200px; border: 1px solid blue; overflow: hidden; /*overflow:hidden;这个很关键*/原创 2017-09-28 23:22:38 · 457 阅读 · 0 评论 -
js操作dom节点,创建,复制,删除,添加,查找等操作总结
1.创建节点 document.createElement(“div”);//创建一个div元素,参数需要是标签名; document.createTextNode(“233”);//创建一个文本节点内容是“233”; 2.添加节点 var myli = document.createElement(“li”); dom.appendChild(myli); //父节点下面添加一个子原创 2017-09-28 20:44:40 · 968 阅读 · 0 评论 -
多标签点击排序问题(获取点击标签的顺序等)
1.问题描述: 有n个同样的标签,随便点击一个如何确定点击的是哪个标签? 进一步问题: 来自百度笔试 2.解决多标签点击获取顺序问题,<ul> <li>5</li> <li>2</li> <li>3</li> <li>88</li> <li>00</li></ul>var li = document.getElementsByTagName('l原创 2017-09-27 16:43:21 · 1912 阅读 · 0 评论 -
移动端网页事件以及屏幕适应
1.事件 touch触摸事件: touchstart 当手指放在屏幕上触发 touchmove 当手指滑动时触发 touchend 当手指离开时候触发 touchcancel: 当系统停止跟踪时触发; 该事件一般使用不到; 触摸具有的属性如下: touches :跟踪的触摸操作的touch对象的数组,当一个手指在屏幕上,event.touches.length==1;当两个手指时,ev原创 2017-09-27 15:03:28 · 385 阅读 · 0 评论 -
带箭头的对话框实现(百度笔试题)
需要的样式数据: 下面是我实现的代码:<style type="text/css"> #demo{ width: 100px; height: 100px; border-radius: 1px; border:2px solid #000; position原创 2017-09-27 13:54:43 · 742 阅读 · 0 评论 -
css3 伪类伪元素使用技巧
1.之前学习过css3的伪元素::before和::after,可以做很多事情。一个是可以做一些css3图标,功能异常强大;另外是可以配合:hover做一些按钮效果(参考https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-21)。 2.对于伪类需要注意常用伪类的使用顺序,参见之前的文章,关于伪类与伪元素的配合使用:<sty原创 2017-09-11 12:14:13 · 980 阅读 · 0 评论 -
原生实现一个toast组件;ul下li点击确定是哪个
1.简单的一个toast组件 首先贴上代码:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .toast-wrap{ position: fixed; top:0px; bottom: 0px;原创 2017-09-25 19:07:59 · 389 阅读 · 0 评论 -
js操作tranform与transition动画问题
1.要实现一个div点击旋转的功能,要怎样实现?比较简单的方法有:点击添加一个className,class写好一个动画效果animation.还有一个办法就是使用dom.style.transform = 'rotateX('+90+'deg)'; 如果再在div的样式里面写好transition: transform 1s.就会有延迟效果而不是瞬间旋转。2.完整的一个实现过程如下:原创 2017-09-13 22:14:51 · 2867 阅读 · 0 评论 -
github404背景随着鼠标移动的样式实现
git地址:https://github.com/Macixsq1/github404.git 开始学前端的时候,发现了github的页面非常有趣,当时觉得很神奇,一直不明白怎么实现的呀,最近又看到,随便想了一下,发现其实并不复杂,动手写了一个demo. 使用angularjs搭建了初步页面,实际上核心使用了原生js的操作,效果不错。 核心代码如下: con1.jsangular.modul原创 2017-08-27 23:50:59 · 772 阅读 · 0 评论 -
前端散乱笔记汇总
散乱笔记原创 2017-08-15 14:19:34 · 346 阅读 · 0 评论 -
css3 加载loading图标实现
常见的loading图标,大概的样子是这样:(录制的gif,比较卡) 看到大牛的面试中被问到这个问题,我就想自己动手实现一下。我们来用20行代码实现一下。 代码如下:<!DOCTYPE html><html><head> <title>加载效果</title> <style type="text/css"> .loading{ wi原创 2017-08-27 00:34:00 · 7760 阅读 · 2 评论 -
使用less处理重复性background-image定位问题
1.问题描述 使用angular的列表循环解释问题,其他框架类似。 css上面使用flex布局index.html代码:<div class='container'> <div ng-repeat='list in itemlists' class='item'> <div class='icon{{$index}}'></div> <p class='itemName'>{{list原创 2017-08-03 19:36:20 · 2247 阅读 · 0 评论