dingpai6527-CSDN博客

转载书写HTML+CSS的好习惯（二）

避免全局变量冲突　　　　a) 将脚本用匿名函数包起来，控制变量作用域　　　　b) 不用匿名函数之间的通行，可以使用全局变量　　　　c) 但是b) 会产生大量全局变量，违反了我们控制全局变量数量的初衷　　　　d) 解决办法：在全局变量上设置一个json数据，例如Global={}　　　　e) 但是，Global上可能绑着太多变量，也...

2017-08-18 16:49:00 117

转载书写HTML+CSS的好习惯（一）

1. 使用带有语义的标记2. 创建良好的标记a) 选择合适的DOCTYPE，这是一个健壮文档所必须的b) 指定语言和字符集，一些搜素引擎会根据搜索请求的语言来过滤搜索结果c) 指定标题，无论是收藏还是搜索引擎对标题中的内容都有偏爱d) 选用恰当的元素e) 避免过...

2017-08-18 09:58:00 111

转载怪异模式

怪异模式与DTD 要了解怪异模式，首先先来看看和怪异模式对应的标准模式是什么，在标准模式中，网页元素的宽度是由padding/border/width三者相加决定的，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用了一种技术，这就是怪异模式，在怪异模式中，width本身就包括了padding和border的宽度，也就是说，怪异模式下，盒模型是有所变化...

2017-08-11 14:16:00 321

转载我不知道的CSS

近期，有一些闲暇时间，可以让我支配，本来想做些项目，练练手，但是，后来还是决定先夯实基础，所以就在网上找了大量的资料开始查漏补缺。标题是--我不知道的CSS，所以这里写的东西，都是我在之前没想到或不知道的东西：压缩文件大小，利用样式分组，去掉很多不需要的标签，这样可以减小，然后尽量使用压缩语法来表示这些规则，这样就可以保障下载时间缩短。表示颜色的RGB表示法...

2017-08-10 16:52:00 85

转载 echarts简单用法介绍

这几天，公司要求利用echarts做一些图表，在这之前，我只是听说过这个东西，但是从来没有拿上这个库写过项目，只是听说过这个库其实挺简单的，是完全傻瓜式的开发库，接下这个项目后，开始上网看api学着看看怎么用。我来简单的说一下这个库的用法（这里只介绍最基本的用法，便于入门）：第一步，下载：先把需要的文件下载好，可以下载完整的库...

2017-08-10 09:03:00 95

转载 CSS3 常用属性（五）-- 2D、3D

2D转换 – transform 　　transform：转换属性　　transform-origin：转换的原点，可以是left、right、bottom、top、px、%。 2D转换就是平面上的旋转（rotate）、拉伸（skew）、缩放（scale）、位移（translate）等。可以赋值如下情况：...

2017-04-15 01:04:00 96

转载 CSS3 常用属性（四）-- 过渡、动画

过渡--transition 过渡这个属性的作用是当元素的样式发生变化时，使用动画的效果进行变化。有了过渡属性后，很多情况下，写一些简单效果，将不需要再借助 javascript 去计算。 transition 过渡属性简写，可以设置四个值 transition-property 过渡的CSS的名字，或是all tra...

2017-04-14 11:53:00 165

转载 CSS3 常用属性（三）-- 用户界面、文字、两种盒模型

　　用户界面--column　　关于用户界面，我们先了解一下在块元素中写文字时，浏览器中的呈现情况，这个其实很明显，所有的文本内容会在块元素内从左到右一个个字排列，排满后，从上到下一排排渲染……然而，有些时候，页面需求的呈现方式是，类似于报纸似得，将一段文本内容，分成多列布局显示。　　用户界面使用的示例如下：.font{ width:300px; he...

2017-04-12 23:24:00 83

转载 CSS3 常用属性（二）-- 常用颜色、渐变、倒影

颜色--rgba（0,0,0,1）　　CSS3之前的颜色表示法有三种：　　第一种、表示颜色的单词，例如“red”、“green”等。第二种、以“#”开头后面是六个十六进制的数字，例如“#ffffff”，前两个数字代表红，中间两个数字代表绿，后面两个数字代表篮。第三种、rgb(0,0,0) 表示，括号中的每个数取值范围都是0-255，其结果与第二种表示方法类似，第一个值...

2017-04-12 18:31:00 109

转载简单了解十二栅格

　　十二栅格是一种响应式布局方式，它的大体思想是，将父元素的宽度等性的分成12栏，利用 @media 去给每一个元素在不同屏幕下设置为占据不同栏数宽度，例如，某个元素，在大屏是占整个父元素的3栏（一行有4个相同元素），在中屏占整个父元素的6栏（一行有2个相同元素），在小屏占整个父元素的12栏（独占一行）。下面是我模仿bootstrap自己写的一个简易十二栅格系统：...

2017-04-12 17:01:00 747

转载响应式和@media的简单用法

　　本文不会详细去说@media的各种用法，只是简单的描述一下PC端的响应式是什么，如何去实现。　　响应式是指：在不同宽度的屏幕下，都可以看到完整的页面内容，只不过，在宽度较小的屏幕下，可能内容会有删减，布局可能会有些改变等。　　响应式一般会使用 CSS3 媒体查询 @media 来实现。　　具体使用如下所示：　　.box{ width: 1024px;...

2017-04-12 11:58:00 124

转载字体图标的用法

　　第一次听说字体图标--iconfont，感觉是：哇，好高大上的样子，会不会很难啊。然而当真正去用的时候，才发现，网上的字体图标库为我们做了太多工作，我们只需要傻瓜式的挑选自己需要的图标，傻瓜式的复制粘贴就可以将各种的小图标以字体的方式加入到我们的页面中了。　　本文为大家讲述的是如何使用阿里巴巴字体图标库：　　第一步：在百度或其他搜索引擎中搜索“iconfont”，如果是百度的...

2017-04-11 15:50:00 80

转载 CSS3 常用属性（一）-- 边框、背景

现今，界面极大的丰富，传统的 HTML+CSS 已经跟不上时代的步伐，在 CSS3 中，有太多非常好用的属性，可以很方便的做出种种炫酷的效果，接下来，我将例举一些常用的 CSS3 的属性。　　border-radius：圆角。border-radius : 50px ; /*四个角的圆角均为50px*/border-radius : 50px 100...

2017-04-08 17:19:00 143

转载 CSS的四大布局层级和 HTML标签的‘生态系统’（四）------定位层

　　定位层，在一些情况下，元素随机摆放，在文档层和浮动层中布局已经远远无法满足需求，这时，我们将会使用定位属性。　　在一般的页面中，常用到的定位有三种----相对定位、绝对定位、固定定位。接下来我们一一了解一下这三种定位。　　相对定位（position:relative;），当一个元素具有相对定位时，该元素将可以设置以下五个属性，即top、left、right、bottom、z-...

2017-04-08 17:07:00 156

转载 CSS的四大布局层级和 HTML标签的‘生态系统’（三）------文档层和浮动层

　　文档层，每一个放置内容的元素内部都会有一个文档流的规则，即内部的内容若不是浮动或定位的元素，将会按照从左到右，从上到下的规则来排列，块元素将会独占一行，剩下文本或是行内元素则排满一行，再排下一行。　　在文档层中，元素或内容摆放位置，主要是通过padding、margin属性来移动位置，其中margin有很多的重点难点，需要去注意，比如marign-top的bug，margin可以...

2017-04-08 16:44:00 106

转载简述历代CSS选择器及其优先级

　　CSS 中最重要的两部分，一部分是 CSS 选择器，另一部分是 CSS 属性，本文将重点描述 CSS 选择器。CSS 的工作流程本质上就是利用选择器选择到 HTML 中的元素，然后赋予他们样式规则，让每一个元素都变成我们想要的样子，都出现在我们想让它去的位置。　　CSS到目前位置已经扩充到第三版了，每扩充一版，它的选择器和属性都会有很多的扩展，这里，我将把三个版本的选择器一一进行...

2017-04-08 01:01:00 537

转载 CSS的四大布局层级和 HTML标签的‘生态系统’（二）------背景层

　　背景层，顾名思义，就是一个元素的背景，背景是用 CSS 属性中的 background 来实现的。background 属性是个缩写属性，其展开后包含很多分支属性：　　background-color : 背景色，使用该属性可以为一个元素添加一个背景色，添加背景颜色的取值大致可分为4种。background-color : red ;background-color ...

2017-04-08 00:57:00 130

转载 CSS的四大布局层级和 HTML标签的‘生态系统’（一）------总述

　　事实上，网页布局只要能懂得 CSS 的四大布局层级和 HTML 标签的 ‘生态系统’，那么布局就会慢慢从脑力劳动，逐渐过渡为体力劳动了。下面，我将详细的解释一下，何为 CSS 的四大布局层级，何为 HTML 标签的 ‘生态系统’。　　就我看来，初学时，布局基本可以分为四大层级，在布局一张页面时，我们不能单纯的认为他是一张平面，除了横向和竖向，还应该把页面想象成一个有纵深的立体...

2017-04-02 23:45:00 189

转载 HTML+CSS 新手快速入门

本篇文章，严格意义上来说，这是我的第一篇技术博客，我将写一些有关HTML+CSS 的基础。我有过前端布道师的经历，带过的学生到目前为止至少在1000+，所授课程基本都会有HTML+CSS布局，所以我对这个技术点，应该可以说是比较熟悉的了。首先，我个人是比较赞同内容（HTML）和样式（CSS）分离的思想，在页面中呈现的内容使用HTML插入，内容的样式使用CS...

2017-04-01 16:57:00 137