fifthThirteen-- A Rookie Web Front-end development

CSS选择器-属性选择器简单属性选择h1[class] {color: red;}<h1 class="hoopla">Hello</h1><h1 class="severe">Serenity</h1> 在XML文档中，属性原则器相当有用，因为XML语言主张要针对元素和属性的用途指定元素名和属性名。 选择以后moons属性的所有planet元素，使之显示为粗体，以便能更关注有moon

转载链接：http://www.imooc.com/qadetail/129282&lt;!--html--&gt;&lt;body&gt;&lt;div&gt;这是用来测试的&lt;/div&gt;&lt;/body&gt;/*CSS*/div{position:absolute;top:50%;left:50%; /*如果把这几行删掉，不可以居中 */border...

 规定两个并排的带边框的框：div{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left;}box-sizing: content-b...

html { /*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none; } /*Chrome下隐藏滚动条，溢出可以透明滚动*/ html::-webkit-scrollbar{width:0px;display:none} 谷歌自定义滚动条样式代码：/*----- 滚动条 -------*/::-webkit-scro...

.box{ width: 300px; height: 300px; text-align: center; font-size: 0; } .box:before{ ...

水平居中：给div设置一个宽度，然后添加margin:0 auto属性div{ width:200px; margin:0 auto; }让绝对定位的div居中div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; r...

.finally-solve { letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整兼容safari*/ word-spacing: -4px; font-size: 0;/*兼容Chrome*/}.finally-solve li { font-size: 16px; letter-spacing: normal; word-spaci...

1. 如何声明变量:root { --margin: 20px; --font-size: calc(20px * 2); --color: black; --background-color: #FFF;}变量声明的时候，在变量名之前加两根连词线(--)；它们与color、font-size等正式属性并无不同，只是没有默认含义。所以CSS变量又被称为“C...

CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类：用于向某些选择器添加特殊的效果伪元素：用于将特殊的效果添加到某些选择器讲道理，可能我语文不好，我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的CSS 引入伪类和伪元素的概念是为了实现基于文...

    在各个不同游览器内核渲染引擎的作用下，对于html标签纷纷定义了它们自己的样式，为了方便开发，使制作的网页效果能在不同的游览器上呈现出相同的效果，一般会在页面中引入初始化样式文件表(reset.css);以下是在网上收录的各大知名网站的初始化样式：腾讯：body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input...

说明本文适合知道HTML 与 CSS基础知识的读者，或者想要了解清除浮动背后原理的读者！1.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照从左到右的方式逐个排列 但是如何让多个块级...

什么是 NoFollow？NoFollow 是 Google 曾经提出的一个新标签，目的是减少垃圾留言，解释当前页面与此链接指向页面之间的关系。使用了此标签表明链接与网站作者无关，也就是说搜索引擎不会用这个链接计算网站的 PR 值。很多博客程序都会自动在评论链接中加上 nofollow 标签。现在主流的 Blog 程序，如 WordPress 和 MovableType 均默认为 其留言与

转至：http://blog.youkuaiyun.com/chuyuqing/article/details/37561313所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要

移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。 1 2 3 4 5 6 @mixin bg-image($url) {     background-image: url($ur...