蓝戒的博客
您当前位置 :
蓝戒的博客 » 所有属于 "xhtml+css" 分类的文章
Jan 09 2016
写在前面
近年前端知识技术更新迭代加速，作为一名前端汪，你是否停留在刀耕火种的时代？让我们带着极客的精神去发现更好的，更优雅的编码之旅吧！兵欲善其事必先利其器，选择一个好的工具，认识它，了解它，用它更好的为我们解决问题。废话不多说，下面我们一起进入css的新世界PostCSS。
一. PostCSS是什么？
1. 初识PostCSS
PostCSS在以惊人的速度发展，而且越来越受人欢迎。越来越多的... 阅读全文
Dec 28 2015
网页顶部加载进度条仿智能手机上浏览网页一样，手机上的浏览器进度条一般都在屏幕顶部，一条极细的小线条，当页面加载的时候，它就不断的加载显示进度。这样做的目的与页面中加载提示及软件应用中的进度提示的目的都是一致的为了优化用户体验。
首先介绍一下css3的实现方法：
<style type="text/css">
body{ margin:0; padding:0;}
@-moz-keyframes progressing {
0% {width:0px;}
10... 阅读全文
Nov 25 2015
javascript中的事件
javascript程序使用的是事件驱动的设计模式，为一个元素添加事件监听函数，当这个元素的相应事件被触发那么其添加的事件监听函数就被调用：事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 所有浏览器都支持DOM0级事件处理程序，且使用该方式时，事件处理程序是在元素的作用域中运行，因此程序中的this都是指向元素。
如... 阅读全文
Aug 10 2015
导语：
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了众多主流浏览器的支持，这意味着，flex有了更多的用武之地。
Flex布局是什么？
Flex是Flexible Box的缩写，意为"弹性布局"... 阅读全文
Jul 29 2015
nec更好的css解决方案之自适应布局
两列右侧自适应布局 [ 兼容 ]:
两列左侧自适应布局 [ 兼容 ]:
See the Pen VLVMow by cywcd (@webzsky) on CodePen.
三列中间自适应布局 [ 兼容 ]:
See the Pen mJQqbP by cywcd (@webzsky) on CodePen.
三列左侧自适应布局 [ 兼容 ]:
See the Pen zGMPOy by cywcd (@webzsky) on CodePen.
三列右侧自适应布局 [ 兼容 ]:
See the Pen GJwOjN by cywcd... 阅读全文
Jul 27 2015
Normalize.css 简介
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
官方网站：http://necolas.github.io/normalize.css/
浏览器支持情况：Chrome, Firefox, Opera, Safari 6+, IE 8+
一般前端工程师都会使用 reset.css 去处理不同浏览器的默认样式，这里推荐使用Normalize.css
Normalize.css有哪些优点
1)不像其他CSS resets，normalize.css... 阅读全文
Jun 06 2015
1、placeholder是什么？
placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字消失。
例如下文本框文字效果
2、placeholder的浏览器兼容性和在不同浏览器下的表现
由于placeholder是个新增属性，目前只有少数浏览器支持，如何让更多的浏览器支持它呢？
目前最新的firefox、chrome... 阅读全文
May 04 2015
最近做移动端页面，优化UI的时候发现，苹果手机浏览页面中设置的css伪类：active失效。查找资料发现要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。
:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点<a href="#">这种情况，一般主流浏览器下也支持其他元素。在多按键的鼠标系统中，：active只适用于主... 阅读全文
May 02 2015
为了确保各个浏览器初始化时页面布局一致，需要使用css在重置以下页面标签:
@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, th, td, pre, blockquote, fieldset, lengend, input, button, textarea, form{margin: 0; padding: 0;}
body, input, button, textarea, select{font-size:12px; font-family: "Microsoft YaHei", Helvetica,... 阅读全文
Apr 04 2015
inline|block|inline-block整体上的区别
1、在概念上说：inline和block完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满；inline-block为内联块元素，既可以不产生换行，还保留块元素宽高和边距的属性。
2、布局级别上说... 阅读全文
来自的朋友,欢迎您
点击这里 订阅我的博客 o(∩_∩)o~~~
网页顶部加载进度条仿智能手机上浏览网页一样，手机上的浏览器进度条一般都在屏幕顶部，一条极细的小线条，当页面加载的时候，它就不断的加载显示进度。这样做的目的与页面中加载提示及软件应用中的进度提示的目的都是一致的为了优化用户体验。 首先介绍一下css3的实现方法： <style type="text/css"> body{ margin:0; padding:0;} @-moz-keyframes progressing { 0% {width:0px;} 10...阅读全文
javascript中的事件 javascript程序使用的是事件驱动的设计模式，为一个元素添加事件监听函数，当这个元素的相应事件被触发那么其添加的事件监听函数就被调用：事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 所有浏览器都支持DOM0级事件处理程序，且使用该方式时，事件处理程序是在元素的作用域中运行，因此程序中的this都是指向元素。 如...阅读全文作者：cywcd | 分类：javascript, 网页兼容性 | 阅读： 5,881 次 |
导语： 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了众多主流浏览器的支持，这意味着，flex有了更多的用武之地。 Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"...阅读全文
nec更好的css解决方案之自适应布局 两列右侧自适应布局 [ 兼容 ]: 两列左侧自适应布局 [ 兼容 ]: See the Pen VLVMow by cywcd (@webzsky) on CodePen. 三列中间自适应布局 [ 兼容 ]: See the Pen mJQqbP by cywcd (@webzsky) on CodePen. 三列左侧自适应布局 [ 兼容 ]: See the Pen zGMPOy by cywcd (@webzsky) on CodePen. 三列右侧自适应布局 [ 兼容 ]: See the Pen GJwOjN by cywcd...阅读全文
Normalize.css 简介 Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。 官方网站：http://necolas.github.io/normalize.css/ 浏览器支持情况：Chrome, Firefox, Opera, Safari 6+, IE 8+ 一般前端工程师都会使用 reset.css 去处理不同浏览器的默认样式，这里推荐使用Normalize.css Normalize.css有哪些优点 1)不像其他CSS resets，normalize.css...阅读全文
1、placeholder是什么？ placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字消失。 例如下文本框文字效果 2、placeholder的浏览器兼容性和在不同浏览器下的表现 由于placeholder是个新增属性，目前只有少数浏览器支持，如何让更多的浏览器支持它呢？ 目前最新的firefox、chrome...阅读全文
最近做移动端页面，优化UI的时候发现，苹果手机浏览页面中设置的css伪类：active失效。查找资料发现要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点<a href="#">这种情况，一般主流浏览器下也支持其他元素。在多按键的鼠标系统中，：active只适用于主...阅读全文
为了确保各个浏览器初始化时页面布局一致，需要使用css在重置以下页面标签: @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, th, td, pre, blockquote, fieldset, lengend, input, button, textarea, form{margin: 0; padding: 0;} body, input, button, textarea, select{font-size:12px; font-family: "Microsoft YaHei", Helvetica,...阅读全文
inline|block|inline-block整体上的区别 1、在概念上说：inline和block完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满；inline-block为内联块元素，既可以不产生换行，还保留块元素宽高和边距的属性。 2、布局级别上说...阅读全文作者：cywcd | 分类：xhtml+css | 阅读： 1,920 次 |