xmlovecss

摘要： 写css hack 时，由于hack主要针对的是个别浏览器，hack的书写顺序应当是从一般到特殊的写法。如：.box { width:200px; height:200px; position:fixed; left:0; top:0; _position:absolute; }如果颠倒顺序，从特殊到一般，就失效了。但是，对于高级浏览器支持的一些属性，低级版本和升级版本支持的可能不一样，为了都支持，该怎么写？看如下代码：div { height:30px; width:60px; border-radius:3px; -webkit-border-radius:3px; -moz-border 阅读全文

摘要： 第二节讲了模块化的一个实例，给出了常见的三种设计方式。而推荐的也就后面两种。这次，我们讲讲第四种设计方式。这是从鬼哥的css森林中此文章：http://www.cssforest.org/blog/index.php?id=167中扒出的图。此设计模式是把复杂版作为基类，简化版就只是覆盖某些属性而已。这样，复杂版的html中就只有一个类，而简化版有两个类。相对之前说的提取一个基类作为两种设计的共有类，然后彼此再设计扩展类，复杂版就少了一个class。事实上，我对此示例有疑问的。因为示例给出的可以看做是同一个东西。就好像复杂版的模块html中少了图像和回复而已。简单版的扩展类只是覆盖复杂版中的某 阅读全文

摘要： 上一篇讲了几个概念，这次，我们讲讲实例，描述常见的一些设计模式。如果熟读了鬼哥的css模块化的内容，你就会发现，他的文章系列中的好几篇我们之前就已经讲过，所以就不赘述了。那么，我们为毛要进行模块化呢？肯定是有好处的，没好处，追求它干啥？在研究这个问题之前，我们先看问题，思考问题，然后解决问题。如下图：像这样的设计，你该怎么办？我们尽可能给出所有的正经的css+html设计方案。方案一：基类和原子类（面向属性）的拼接html:<div id="wrapper"> <div class="module w240"> <heade 阅读全文

摘要： 第一篇，讲讲模块化的概念吧。模块化css就是把页面样式进行划分整理，最终实现灵活拆装各种页面的需求。模块化的css，网上的认识无非两种，我只推荐正确的这种，可以参考就职于腾讯的鬼哥的css森林中的模块化系列文章：http://www.cssforest.org/blog/index.php?id=134http://www.cssforest.org/blog/index.php?id=161http://www.cssforest.org/blog/index.php?id=162http://www.cssforest.org/blog/index.php?id=165http://www 阅读全文

摘要： 这算是对前面两篇html语义培训的补充，昨天晚上想了想课程，觉得还有未说的。一.挖掘隐藏语义什么是隐藏语义？可能它并不会呈现在页面中，但是在裸奔的页面中，它却让页面结构清晰，内容合理丰富。比如，我觉得某个某块部分，它应当有个标题，对此模块进行描述，但是实际的页面中不会把它显示出来。连替换图片都不存在。css要做的事情就是，h3{display:none;}，仅此而已。这个示例，可以查看网易前端技术博客的页面例子：再看看mediamax首页： 阅读全文

摘要： 见蓝色理想此篇文章：http://bbs.blueidea.com/thread-2985630-1-1.html只取其中这段：思考下这东东：#main-navigation li a { font-family: Georgia, Serif; }你可能不需要从 a 选择器开始（如果你只是想换个字体）。下面这个可能更高效些：#main-navigation { font-family: Georgia, Serif; }其它建议只做参考，在浏览器效率越来越高的年代，我们要做的是使用高级选择器，规避多class病症，让html标签更加干净清爽。还有此文，更加详细：http://www.99cs 阅读全文

摘要： 详见此文：css box-flex介绍文档：https://developer.mozilla.org/en-US/search?q=box，我还是喜欢火狐开发社区的文档。display:box有以下比较有意思的属性：box-flex:number,其实就是计算占父元素（或者剩下的宽度）宽度的比例 ，请点击此处demobox-align:start | center | end | baseline | stretch，就是对齐方式，子元素相对父元素的边界进行对齐的方式，请点击此处demobox-orient:horizontal | vertical | inline-axis | bloc 阅读全文

摘要： 上一节讲的是大的布局。这次讲讲一些小地方的布局。包括：垂直居中一个模块最小一屏布局居中浮动模块负边距应用先说第一个问题，如何垂直居中一个模块。首先，模块的宽度和高度固定吗？固定的情况下：html:<div id="wrapper"> <div id="mod"> <h1>我是盒子</h1> </div></div>css：* { margin:0; padding:0; }body { font:12px/1.5 arial; }#wrapper { position:relativ 阅读全文

摘要： 演示示例，可以采用liveweave工具。地址：http://liveweave.com更多牛逼的布局思想，可以参考老外的一个demo：http://blog.html.it/layoutgala/一.列等高布局。1.伪列布局看看国内的w3school 首页：http://www.w3school.com.cn/，代码示例：html：<div id="wrapper"> <div id="navsecond"><h1>左侧栏</h1><p style="height:500px;" 阅读全文

摘要： 常见的选择器：通配符选择器 ：*标签选择器: bodyid：#headerclass : .headercss选择器知识见阮一峰：css选择器笔记其他高级选择器见：征服css高级选择器。我们通常会使用标签选择器，id，class选择器进行配合使用。由于IE6-7对大多数高级选择器的不支持，所以目前见到的样式表中选择器还是很基本的。但是过度考虑IE6-7，会让你对css的认识降低。优雅降级的思路才是根本。熟悉了css高级选择器，你就会明白，你的html中多余的class，多余的无语义标签都可以去掉。比如：:after,:before。再比如:first-child和:last-child。所以， 阅读全文