用div+css解决VS2005中布局难的问题
Div+CSS布局入门教程 《转自 蓝色理想 http://www.blueidea.com/tech/site/2006/3574.asp》
页面布局与规划
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是� ......
类型选择符：单指元素的名字，而没有大于号和小于号
类选择符：选择所有赋有相同类的元素 一个点号后面跟类名，类选择符要跟着类名的后面。 可以把加在通配符*的后面来选择文档中所有赋予该类的元素，
Id 选择符
群组选择符：多个选择符用逗号连起来
后代选择符：多个选择符用空白连起来
子选择符：多个选择符用大于号连起来
首子选择符： 把:first-child加在任何选择符后。
兄弟选择符：多个选择符用加号连接起来
属性存在选择符：帮你选择含有某个属性的元素，用中括号包围的属性的名字。SELECTOR[title]
属性词汇选择符：帮你选择属性中包含了某个具体词汇的元素 SELECTOR[title = “WORD”]
属性值选择符： 帮你选择属性值中包含了某个具体值的元素 SELECTOR[ title =”EXACT_MATCH_OF_ENTIRE_VALUE”]
Ie6不支持，ie7支持较好
僞类元素选择符：
ELEMENT:first-letter {STYLES}
*.CLASS:first-letter {STYLES}
#ID:first-letter {STYLES}
ELEMENT:first-line {STYLES}
*.CLASS:first- line {STYLES}
#ID:first- line {STYLES}
注意：first-element, first-line只对终端块状元素相搭� ......
jQuery提供css()的方法来实现嵌入式改变元素样式，css()方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码：$("#61dh a").css('color','#123456');
//这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。
//.css(‘color’,'#123456');表示把颜色设为'#123456'
如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下：var divcss = {
background: '#EEE',
width: '478px',
margin: '10px 0 0',
padding: '5px 10px',
border: '1px solid #CCC'
};
$("#result").css(divcss);
//这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。
另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码：$("#61dh a").css("color")
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)
最后要介绍的是如何设置鼠标划过后的链接样式(比如 ......
今天下午，手头上没什么事做，于是就上网查看资料，看到很多人写的YUI Compressor的使用方法，大致写的都不详细，于是自己来做个总结。
（1）首先来看下，为什么要压缩js或css文件？
JS/CSS文件大，用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢，有的甚至由于CSS的文件而造成页面初始打开很凌乱。
（2）我们怎么提高用户下载JS/CSS的速度呢？
1、我们无法改变用户的网络状况，只有自己网站使用更快的带宽或者使用更强的服务器，使用户访问我们的时候感觉很快。
2、对JS/CSS文件进行压缩，由于文件较小，用户下载的时间就很短。
解决方案1，需要花费比较多的money,方案2实现比较简单，而且效果也明显。
下面我们介绍使用YUI Compressor进行JS/CSS压缩打包的方法，网上有人做了压缩大都没有讲打包（即使YUI Compressor GUI也是一样）。在这里我是用最土的办法批处理来做的。
1）前提是你的电脑上要有java 1.4以上的的环境
如果你没有安装JAVA环境的话，还需要安装一下JDK下载地址是：http://java.sun.com/javase/downloads/index.jsp 我们选择（Java SE Development Kit (JDK) 6 Update 14） ......
原文网址：http://www.complexspiral.com/publications
Containing Floats
As powerful and useful as they are, floats can make for tricky layout tools. Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it.
Figure 1. That's not right!
This is probably not what the author had in mind, but given the styles used, it's the correct layout. Here's how we created it:
div.item {border: 1px solid; padding: 5px;}
div.item img {float: left; margin: 5px;}
That's all it takes. The result seen in Figure 1 happens because the div elements don't "stretch" to contain the floated images within them. To look at the situation from the reverse angle, it happens because the floated images "stick out" of the bottom of the div elements.
This is not a bug. It's also not a flaw in CSS. It is, in fact, the behavior that most authors will want most of the time. It's just not what they would wa ......
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
In CSS 2.1, horizontal margins never collapse.
Vertical margins may collapse between certain boxes:
Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero. Note. Adjoining boxes may be generated by elements that are not related as siblings or ancestors.
Vertical margins between a floated box and any other box do not collapse (not even between a fl ......
最新文章 : css