[CSS] The :empty Pseudo Selector Gotchas

The :empty pseudo selector selects empty elements. We can use this to display useful messages instead of the empty content or hide the content completely. However, the :empty pseudo selector comes with a couple of potentially confusing behaviors when…

【CSS】Intermediate7:Pseudo Elements

1.selector:pseudo element{property:value;} 2.first-letter first-line CSS3:: 与pseudo class 区别 old browser not do well 3.before after property=content 4.…

【CSS】Intermediate2:Pseudo Classes

1.specify a state or relation to the selector selector:pseudo_class { property: value; } 2.Link 3.Dynamic Pseudo Classes apply styles when something happens to something. active:when a link is clicked on hover:when a cursor moves over a link focus:wh…

[CSS] Target empty elements using the :empty pseudo-class

You can target an element that has no child elements by using the :empty pseudo-class. With browser support down to IE9, it's solid, easy way to select empty elements without any additional markup. Be aware that whitespace is considered a "child"…

[CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use :nth-child to target custom element patterns, like every other element. <!doctype html>…

CSS元素选择器 element selector(type selector)

http://www.w3school.com.cn/css/css_selector_type.asp 元素选择器最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p.h1.em.a,甚至可以是 html 本身: 设置html黑色,h1蓝色,h2银色 html {color:black;} h1 {color:blue;} h2 {color:silver;} <!DOCTYPE html>…

阅读jQuery源码的18个惊喜

注释:本文使用$.fn.method指代调用一系列选中的元素的方法.例如,$.fn.addClass,指代$('div').addClass(‘blue’) 或 $('a.active’).addClass(‘in-use’)这些用法.$.fn指代jQuery对象. 1.Sizzle’s weight:Sizzle 是jQuery基于CSS选择器的DOM查找引擎.它可以将$(‘div.active’)转换成一个可操作的元素数组.Sizzle是jQuery很大的一个组成部分,但是它的规模之大的确令…

Django项目：CRM(客户关系管理系统)--81--71PerfectCRM实现CRM项目首页

{#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.html' %}#} {#{% block right-container-content %}#} {#<div class="container col-lg-offset-3">#} {# <h2><a class="form-signin-he…

Django项目：CRM(客户关系管理系统)--57--47PerfectCRM实现CRM客户报名流程02

图片另存为 16*16 名字修改为 bpm_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under the MIT license */ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScri…

Django项目：CRM(客户关系管理系统)--47--38PerfectCRM实现全局账号登录注销02

图片另存为 16*16 名字修改为 global_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under the MIT license */ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaS…

Django项目：CRM(客户关系管理系统)--05--02PerfectCRM创建ADMIN页面03

/*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under the MIT license */ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') } +function ($) {…

Bootstrap popover源码分析

/* ======================================================================== * Bootstrap: popover.js v3.3.7 * http://getbootstrap.com/javascript/#popovers * ======================================================================== * Copyright 2011-2016…

CSS Questions:Front-end Developer Interview Questions

Describe what a "reset" CSS file does and how it's useful. What Is A CSS Reset? A CSS Reset (or "Reset CSS") is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline…

SMACSS:一个关于CSS的最佳实践-2.Base Rules

回顾在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories: Base Layout Module State Theme 本篇我们将介绍Base Rules.你可以将所有Base Rules放在一个文件,比如 base.css :当然,也可以不这么做.区分Category的作用是帮助我们区分出不同功能的CSS,提高可重用性,可维护性. 哪些CSS属于Base Rules? Base Rules指的是所有元素的默认s…

jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器掌握过滤选择器掌握表单选择器 RIA技术常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又一个功能进行封装,供其他人使用的程序组件,了解为模板而已.我们使用框架是为了简化开发进程. jQuery库文件导入: <script src="js/jquery-1.11.3.js" type="text/javascript&qu…

我对CSS选择器的认识

我对CSS选择器的认识一.简述 CSS选择器是对HTML元素进行选择的筛选条件,大概可以分为两类: 特征选择器——根据元素自身所具有的某种特征进行筛选,比如名称.ID.属性等: 关系选择器——根据元素与其他元素的关系进行筛选,比如子元素.兄弟元素等: 在真正使用的时候,几个简单的选择器可以组合成更复杂的选择器,所以谁也说不上CSS选择器有多少.还有两个选择器是功能性的,它们可以给元素已有内容之前或之后添加新内容. 我做了一个项目,里面包含一个测试CSS选择器的小功能,请看这里. 二.归纳下文…

智能选择器和语义化的CSS

本文由白牙根据Heydon Pickering的<Semantic CSS With Intelligent Selectors>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/,以及作者相关信息 ——作者:Heydon Pickering ——译者:白牙 “结构…

HTML、CSS、Javascript、jQuery、Xml

HTML HTML简介 Hyper Text Markup Language (超文本标记语言)简写:HTML.通过标签来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等) 代码示例: <!DOCTYPE html>  <html lang="en"> <!--htmL标签表示htmL的开始,lang=&…

css（一）

CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head…

CSS知识回顾--读《CSS 那些事儿》笔记

由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开,以做记录和日后翻查之用. 1.CSS的基本结构 Selector {property:value;} 由选择符(Selector ),声明({}),属性(property),属性值(value)组成: 2.CSS的简写颜色的简写: 有以下几种形式: #RRGGBB(16进制),RGB(125,0,255)…

【荐】说说CSS Hack 和向后兼容

人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,CSS HACK自然而然地被我们想起.今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护.而解决兼容的方法就是(必须是,因为这才最容易有问题的)其中一个最重要的.要解决的规范之一. 在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面3点为基本原则: 权衡成本…

主流浏览器css兼容问题的总结

最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,firefox,ie8.9.11,360浏览器. 一.基本的css兼容: 1.可能很多人喜欢用css hack的形式去兼容ie浏览器,但是我自己用起来感觉其实不好使 .ie7-就不考虑了,问题在哪呢,就在ie8的甑别上,你怎么让样式只对ie8起作用.上网搜你可能会得到这样的答案: .selector { c…

CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）

Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS Syntax CSS Comments A CSS comment…

CSS第二天总结更多的选择符

CSS的选择符非常多,今天继续总结后面的选择符 1.id和class选择符某些情况下我们用关系选择符或者伪类选择符无法选中一些元素时,我们可以给这些元素起个名字或者分类,这就是id和class属性.下面给出一个id为xxx,class为yyy的a链接: <a href="" id="xxx" class="yyy">链接</a> CSS代码: #xxx{color: red} /*用#选择id(井号)*/ .yyy{te…

JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用

html方法,给元素添加html代码或者清空html代码(参数为空字符串): append向元素的末尾添加html代码: appendTo这个方法跟append方法的很像,只是要添加的html代码的目标有所不一样: after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入: before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插入: insertAfter将JQuery封装好的元素插入到指定元素的后…