css

《DOM编程艺术》中CSS—DOM的总结(一)

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

纯CSS实现下拉菜单导航

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

svg click事件失效(仅限edge浏览器)

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

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

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

三栏布局的n种实现

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

(一)选择器和选择器的优先级

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

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

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

Material Design for Bootstrap

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

图片放大镜注释详解

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

CSS基础知识之float

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