http://zxh6655.cn/网站布局实录! - RainbowSoft Studio Z-Blog 1.8 Arwen Build 90619zh-CNCopyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号Mon, 06 Sep 2010 08:58:02 +0800zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/145.htmlFri, 05 Mar 2010 23:32:14 +0800http://zxh6655.cn/post/145.html网页流动与HTTP数据传输方式、浏览器接收、解析和显示数据的方式密切相联系。HTML源代码部是从上到下分步解析、显示的。自然网页元素也只能自上而下按顺序逐步分布。当在网页编器中删除上面的元素，我们会看到下面的元素自动回收，以填补删除的空间，这就是流动布局的一大特点，这对于绝对定位的层来说是做不到的。
流动(Flow)是默认的网页布局模式。任何没有具体定义position:absolute;或position: fixed；以及没有被定义浮动float:left;或float:right;的元素都将默认呈现流动布局模式。流动布局模型具有两个比较典型的特征：
...

]]>css盒模型http://zxh6655.cn/post/145.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=145http://zxh6655.cn/cmd.asp?act=tb&id=145&key=51975b9bzxh5566@tom.com (zxh5566)http://zxh6655.cn/post/144.htmlThu, 04 Mar 2010 23:04:00 +0800http://zxh6655.cn/post/144.html清楚了CSS盒模型的基本概念、盒模型类型，以及包含块后，我们就可以深入探讨天津网站建设和天津网站设计的模型了。布局模型与盒模型一样都是CSS最基本、最核心的概念。但布局模型是建立在盒基础之上，又不同于我们常说的CSS布局样式或CSS布局模板。如果说布局模型是本，那么cSS，布局模板就是末了，是外在的表现形式。CSS包含3种基本的布局模型，用英文概括为：Flow、Layer和Float。
...

]]>css盒模型http://zxh6655.cn/post/144.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=144http://zxh6655.cn/cmd.asp?act=tb&id=144&key=fef0d27czxh5566@tom.com (zxh5566)http://zxh6655.cn/post/134.htmlMon, 22 Feb 2010 15:29:37 +0800http://zxh6655.cn/post/134.html希腊神话中有一个Pandora's Box（潘多拉的盒子）的传说，说是潘多拉从天上来到人间，同时也带来了一个盒子，出于好奇她打开盒子想看个究竟，结果饥荒、疾病、贪婪、嫉妒、悲惨等邪恶一齐从盒子里跑了出来，从此也就开始了人类的灾难。1996年，W3C推出了CSS，同时也带来了一个盒子，盒子的名字叫Box Model 中文译为盒模型），根据这个盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示属性，这就是经典的CSS盒模型。盒模型给网页设计带来了创意和激情，但如潘多拉的盒子一样，它也让初学者和不少网页设计师为之愁眉和烦恼。盖模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。天津网站制作和天津网站建设将围绕盒模型的缘起、概念、结构、尺寸等基础知识展开研究，以便为后面的学习和日后网页设计奠定扎实的基础。
...

]]>css盒模型http://zxh6655.cn/post/134.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=134http://zxh6655.cn/cmd.asp?act=tb&id=134&key=e47587e3zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/71.htmlThu, 26 Nov 2009 19:28:27 +0800http://zxh6655.cn/post/71.html    margin可以使用任何长度单位，像素、磅、英寸、厘米、em、百分比等。margin属性默认值为0，如果没有定义margin的值，则意味着元素没有边界。但在实际应用中，各种浏览器都会为一些元素预定义边界样式，如p，hl-h6、ul等。这样即使设计师不定义它们的margin值，但在显示时浏览器也会自动显示一定的边界。因此，一些元素虽然没有定义margin，但并不意味它们没有边界。
     aotu是一个自动计算的值，这个值一一般为0，也可以为其他值，这主要由具体浏览器来确定。auto还有一个重要作用就是用来实现元素居中显示，如果想用这种方法使整个页面居中，建议不要把所有的模块都套在一个div元素里。读者可以根据上沘面示例的CSS布局代码定义，然后为每个模块的包含框元素div定义margin-right:auto;margin-left:auto,就可以实现该元素居中显示。医用灭菌袋 灭菌袋封口机  硅橡胶印模材  齿科针
...

]]>css盒模型http://zxh6655.cn/post/71.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=71http://zxh6655.cn/cmd.asp?act=tb&id=71&key=82a1bd1bzxh5566@tom.com (zxh5566)http://zxh6655.cn/post/70.htmlWed, 25 Nov 2009 21:18:36 +0800http://zxh6655.cn/post/70.html    这是一个比较有意思的话题，因为我们前面列举的代码都是基于块状元素进行说明的。能不能为段落中的几个文字添加边框呢？当然可以，根据盒模型基本规则，任何元素都可以定义自己的边框。但内联元素的边框显示效果有点特殊。联元素都是随行就市，因此它的上下边框高度不会影响行高，而且不受段落和行高的约束。下面，看一一个示例，请先输入下面的CSS布局代码。联元素总是随波逐流，因此它的左右边框宽度会挤占左右相邻文本的位置，而不是压住左两侧文本。左右边框会跟随文本流自由移动，移动时会紧跟内联元素前后，且不会出现断现象，也就是说单个边框不会被分开显示在2行内。
...

]]>css盒模型http://zxh6655.cn/post/70.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=70http://zxh6655.cn/cmd.asp?act=tb&id=70&key=63730e8fzxh5566@tom.com (zxh5566)http://zxh6655.cn/post/69.htmlTue, 24 Nov 2009 20:32:57 +0800http://zxh6655.cn/post/69.html   边框是网页布局中一个最活跃的分子，网页中很多修饰性线条都是由边框来实现的。元素的边框具有下面四个特征：
    ·每个元素都包含4个方向上的边框，如border-top（顶边）、border-right（右边）、border-bottom（底边）和border-let~（左边）。你可以单独定义它们的属性，单独定义时需要选用上面4个属性。也可以使用border属性统一定义边框显示效果。
    ·可独立定义边框的宽度，如border-width、border-top-width、border-fight-width、border-bottom-id伍和border-left-widt。也可以使用border-width属性统一定义边框的宽度。
...

]]>css盒模型http://zxh6655.cn/post/69.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=69http://zxh6655.cn/cmd.asp?act=tb&id=69&key=ed9de2e0zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/68.htmlMon, 23 Nov 2009 19:38:41 +0800http://zxh6655.cn/post/68.html    另外，当两多个元素并列分布时，设置它们之间的间距也是—个较复杂的问题，它需要由两个对象的多个参数共同控制。
如左图所示左右两个元素之间的实际间距应为：左边元素的右补白、右边界与右边元素的左补白、左边界的总和。如果左在右两边元素定义了边框宽度，即border-width属性，则两个元素的间距也会随之发生变化，此时就需要把两个边框宽度也加进去。上图的CSS布局代码如下：
    根据规则,上图左右元素内容之间的实际间距就等于120px。如果我们要调整元素之间的间距，可以调整左右两侧元素相邻的4个属性中任意一个属性值，或者同时调整多个属性值。
...

]]>css盒模型http://zxh6655.cn/post/68.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=68http://zxh6655.cn/cmd.asp?act=tb&id=68&key=cf1e1a77zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/67.htmlSun, 22 Nov 2009 10:38:04 +0800http://zxh6655.cn/post/67.html    初次接触CSS时，往往会认为width属性表示整个元素的宽度，height属性表示整个元素的高度，包括IE 5.x及以下版本的浏览器都这样认为。实际上，网页设计师也常这样惯性思考问题，这种误解源于我们对事物的一般认识，而且比较根深蒂固。这自然也给网页布局带来麻烦，特别是当网页结构复杂，页面发生错位时，设计师往往会无从查起，不知如何纠错，因为潜意识中认为这种设置是正确的。例如，如果我们定义两个并列显示的div元素，设置每个div的width为50%。例请输入下面的CSS布局代码:
...

]]>css盒模型http://zxh6655.cn/post/67.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=67http://zxh6655.cn/cmd.asp?act=tb&id=67&key=20cdbbe7zxh5566@tom.com (zxh5566)http://zxh6655.cn/post/66.htmlSat, 21 Nov 2009 14:07:11 +0800http://zxh6655.cn/post/66.html    一希堕神话中有一个Pandora'sBox潘多拉的盒子的传说，说是多拉从天上来到人间，同时也带来了一个盒子，，出于好奇她打开盒子想看个究竟，结果饥荒疾病、、贪婪、嫉妒、悲惨等邪恶一齐从盒子里跑了出来，从此也就开始了人类的灾难。
    1996年，W3C推出了CSS，同时也带来了一个盒子，盒子的名字叫BBox Model（中文译为盒模型），根据这个盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示属性，这就是经典的CSS盒模型。盒模型给网页设计带来了创意和激情，但如潘多拉的盒子一样，也让初学者和不少网页设计师为之愁眉和烦恼。
...

]]>css盒模型http://zxh6655.cn/post/66.html#commenthttp://zxh6655.cn/http://zxh6655.cn/feed.asp?cmt=66http://zxh6655.cn/cmd.asp?act=tb&id=66&key=51c0b397