陌上花会开的博客_css3原创博文

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好，如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示，相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像。从本篇文章开始，我将带领大家，手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面。同时实战开发中的案例代码可以作为你项目中的精简框架了。当你学习完成《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》这个系列教程之后，相信你对目前比较

css

响应式布局

弹性布局

媒体查询

置顶原创 2014-08-06 00:47:46 494 阅读

CSS3中的弹性流体盒模型技术详解(二)

在上一篇文章《CSS3中的弹性流体盒模型技术详解(一)》里，我给大家列出了，从css1到css3各版本中盒子模型的基本元素。本篇我会把余下的属性进行详细讲解。box-pack 作用：用来规定子元素在盒子内的水平空间分配方式box-pack 语法：box-pack: start | end | center | justify;start对于正常方向的框，首个子元素的左边缘吸附在

css

盒模型

响应式布局

弹性布局

置顶原创 2014-08-06 00:44:06 629 阅读

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始，会利用几个篇幅，我将跟大家分享从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容 pc端浏览器和移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅

css

盒模型

响应式布局

弹性布局

置顶原创 2014-08-06 00:41:32 800 阅读

CSS3新增属性text-overflow(省略符)实战开发详解

有人会问，为什么我把text-overflow拿出来单独讲解。以前，当一行内容显示不完整的时候，想要显示省略符，需要通过javascript等手段。但是CSS3引入了text-overflow省略符属性，只需要短短一行代码就可以实现，开发方式的简洁强大不言而喻。这篇文章，我讲带领大家做一个《今日头条》新闻导航列表，带领大家领略text-overfow的强大魅力。先看一下效果：好了，看完了效果，现在

css

css3

text-overflow

省略符

原创 2014-08-05 01:48:55 532 阅读

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时，都感觉无从下手。一般有两种情况：1) 不知道关于文本到底有哪些样式属性；2) 即使借助开发工具的自动提醒，依然不清楚样式属性的具体意思，以及具体用法。今天这篇文章，我将带领大家一起来领受CSS3在文本样式应用方面的超强能力。通过精彩的实例，来使大家重新认识CSS3文本样式，真心希望大家通过此篇文章，即使不能做到精通CSS3的文本样式的应用，也会做到熟练应用。

css

css3

text-shadow

文字阴影

实战开发

原创 2014-08-05 01:45:15 396 阅读

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时，都感觉无从下手。一般有两种情况：1) 不知道关于文本到底有哪些样式属性；2) 即使借助开发工具的自动提醒，依然不清楚样式属性的具体意思，以及具体用法。今天这篇文章，我将带领大家一起来领受CSS3在文本样式应用方面的超强能力。通过精彩的实例，来使大家重新认识CSS3文本样式，真心希望大家通过此篇文章，即使不能做到精通CSS3的文本样式的应用，也会做到熟练应用。

css

css3

text-shadow

文字阴影

实战开发

原创 2014-08-05 01:43:32 774 阅读

CSS3属性选择器详解及双色球实战开发

在前面的章节中，我们了解了，可以使用行内样式，ID选择器，类选择器，以及标签选择器来给一个元素应用样式。如果我们想给定义了那些都定义了某一个属性的元素应用样式，这个时候我们该怎么做呢？这一节中，我将使用双色球案例和文档类型提示图标案例来引入和应用属性选择器。双色球案例：大家都知道，双色球共有7个球，6个红球，1个蓝球。首先我们先在页面上面定义7个sp

双色球

css3

属性选择器

置顶原创 2014-08-04 12:26:12 465 阅读

:link,:visited,:focus,:hover,:active详解

CSS 又名层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，各样式排列的顺序很有讲究。:link 与 :visited 在样式文件中的顺序可以随便放置。而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，下面会详细解释。:focus -> :hover ->&

超链接

优先级

选择器

原创 2014-08-04 10:57:33 1661 阅读

CSS中选择器优先级顺序实战讲解

我们有些程序猿在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？如果你在开发中也遇到同样的问题，即在给某一元素应用样式的时候（比如写在外部样式表中），写在后面的样式不能覆盖前面定义的样式。这个时候，你可能就得考虑是不是没考虑优先级问题了。当我们在给一个标签，比如div应用样式的时候，我们得考虑优先级问题。下面列出的就是是

优先级

选择器

css3

选择器优先级

置顶原创 2014-08-04 00:09:04 630 阅读 1点赞

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

陌上花会开

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

CSS3中的弹性流体盒模型技术详解(二)

CSS3中的弹性流体盒模型技术详解(一)

CSS3新增属性text-overflow(省略符)实战开发详解

CSS3新增属性text-shadow详解及燃烧的字体实战开发

CSS3新增属性text-shadow详解及燃烧的字体实战开发

CSS3属性选择器详解及双色球实战开发

:link,:visited,:focus,:hover,:active详解

CSS中选择器优先级顺序实战讲解

欢迎