《DOM编程艺术》中CSS—DOM的总结（一）

前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－1.元素节点的style属性HTML文档中每个元素节点都有一个style属性，style属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个style属性里。一个Demo:可以弹出弹窗，返回标

业界 2016年07月06日

纯CSS实现下拉菜单导航

前言：本题是网易云课堂的前端微专业《页面制作》课程的作业题，当时对题意理解错误没有实现题目要求，成了心中永远的痛，所谓念念不忘必有回响，在学校图书馆花了几个小时做出来并对相关知识点进行了总结，写了这篇博文。好，进入正题。1.需求：当鼠标hover到按钮上时，出现下拉菜单导航条。2.HTML结构按钮 1. 下拉菜单项 1. 下拉菜单项

业界 2016年07月06日

svg click事件失效（仅限edge浏览器）

1、重现问题:如果直接在svg绑定click事件，在edge内核中是不灵敏的，在edge内核中只有点击svg边缘部分才会触发click事件 2、解决方法然后在a标签上绑定click事件即可。 3、关于pointer-events: none;介绍 pointer-events: none; Note:如有更好的解决方案请大家一起分享噢 关键字：css, html, html

业界 2016年07月06日

工作中碰到的一些小问题汇总（持续更新）

从一开始工作到现在，陆陆续续碰到了很多大问题小问题，有时候自己闷头研究，一个“小问题”可能要研究很久，所以现在汇总一下，给自己做个笔记，如果大家也有类似问题，也可以省省填坑的时间，因为是遇到什么问题就写了什么问题，可能有些乱……见谅…… Html:Css: -webkit-appearance:none;/*去掉默认样式（button,input等等）*/ outline:

业界 2016年07月06日

三栏布局的n种实现

本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。至于其他类型，基本上也就是半斤和八两。每一种布局都会有个Demo，个人依然认为文章里帖代码并没有Demo来的直接。所以正文负责解释，源码参见Demo。其中讨论了这么多种（6种）布局，有以下理由：1是每种布局也都有他的毛病，没有十全十美的，每种布局也都有人在用。2是虽然有相对优秀的方案，但是不优秀的方案也有有用的东西在里

业界 2016年07月06日

（一）选择器和选择器的优先级

本来想把标题写成css不得不说的那些事之选择器和选择器的优先级，但是为了本篇文章能被更多的人阅读，还是把名字改得老套一点。好了，废话不多说了，下面开始css不得不说的那些事的第一篇，选择器和选择器的优先级。一、选择器更加专业性的介绍，来看一下w3school中的描述，网址为：http://www.w3school.com.cn/cssref/css_selectors.as

业界 2016年07月06日

瞅瞅Facebook是怎么保证CSS代码质量的

原文地址系列文章地址在Facebook里，上千名工程师工作在不同的产品线上，为全世界的用户提供可靠优质的服务，而我们在代码质量管理方面也面临着独一无二的挑战。不仅仅是因为我们面对的是一个庞大的代码基库，还有日渐增加的各种各样的特性，有时候如果你想去重构提高某一个模块，往往会影响到其他很多模块。具体在CSS而言，我们需要处理上千份不停变化的CSS文件。之前我们着力于通过Cod

业界 2016年07月06日

Material Design for Bootstrap

简单几行代码，就可以给bs框架添加Material Design风格效果图：这是常见的btn加了Material Design效果这里采用的是bootstrap4引入：bs.cssMaterial Design for Bootstrap你可能看到上面多了一个materialDesign属性，对，等下我们就通过这个属性来实现material Design效果css:[mat

业界 2016年07月06日

图片放大镜注释详解

今天的练习是做一个网购网站常见的图片详情介绍的放大镜效果，简单来说就是图片中有对应的区域让你看到放大后的效果。关于布局：就是两组div，第一组大div放图片，小的是遮盖层。第二组是大图div显示框，里面放大张图片，超过部分隐藏，可以想象下是透过窗户看外面，你看到的只是一部分。思路：就是两边的比例，重点，比例，话不说，直接上代码。 *{margin:0

业界 2016年07月06日

CSS基础知识之float

前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的学习，在此把学习心得分享给大家。浮动的基础知识浮动有4个属性：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承）。浮动元素的包含块是其最近的块级祖先元素。浮动元素会左偏移（或右偏移

业界 2016年07月06日