仓酷云

标题: 来讲讲：CSS网页结构实例:三栏等高结构 [打印本页]

作者: 分手快乐 时间: 2015-1-15 23:37
标题: 来讲讲：CSS网页结构实例:三栏等高结构
对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
网页制造poluoluo文章简介：CSS网页结构实例:三栏等高结构.
起首，三栏等高结构，望文生义，能够归纳综合为以下特性：
1、3列（呆子也晓得）
2、这3列初等相称
3、这3列的高度不是流动稳定，而是跟着内容的变更而变更

Step1:
xhtml代码：

<divid="header">#header</div>
<divid="container">
<divid="main"class="column">#main</div>
<divid="left"class="column">#left</div>
<divid="right"class="column">#right</div>
</div>
<divid="footer">#footer</div>

次要布局式#container的div，至于#header和#footer，完整是为了让它可以更像网页一些，回到#container，它外部包括三列，个中main里包括的是一个网页最中心，最次要的内容，以是我们不克不及怠慢，在纯xhtml的流文档中，扫瞄器是从上到下剖析的，故主要的内容应当放在对照靠前的地位，这是由搜刮引擎的权重决意的吧，可是视觉上，我们待会儿会把它放到两头。

思索一下：这三列怎样大概在没有写逝世高度的时分还智能的齐头并进呢？
实在不写逝世高度切实其实不克不及办到智能的齐头并进，那怎样写逝世初等呢，谜底就是，使用盒模子，写它的padding，这是一种反常的办法，但挺见效，就比如一团体只要实践只要170cm,可是算上20cm的头发，天啊，他已是190cm了，仍是先给出办理办法吧：就是使用padding-bottom和margin-bottom;

Step2:

#container{
background-image:url(bg.gif);
width:960px;
margin:0auto;
}
#main{float:left:width:500px;background-color:#e5e5e5;}
#left{float:left:width:300px;background-color:#7bd;}
#right{float:right:width:160px;background-color:#f63;}

Step3:

#container.column{
padding-bottom:32767px;
margin-bottom:-32767px;
}

这一步应当算是本主题的中心，至于32767这个数你能够了解成“充足年夜”，以便于有充足的空间往扩大它的盒子，这么高应当是伟人症吧，不妨，我们能够用margin-bottom的负值往埋没它，这个技能，在我看来，我真的注释不分明，有句古话：领悟，言传！你只需碰运气，就会了解到个中的奇妙。下边这幅图对你的了解应当有匡助：

到了这步，你会发明这3列的盒模子为32767px，此时你要在父元素上加：overflow:hidden;固然IE6.0是：zoom:1;

#container{
background-image:url(bg.gif);
width:960px;
margin:0auto;
overflow:hidden;
}

Step4:
如今#main的视觉效果是在最左栏，我们要想举措把它弄成两头
思绪：先把#main排到两头，我们能够#main{margin-left:300},这时候，#left被挤到800px的地位，在#left{margin-left:-800px;}就可以弄定，惋惜啊，IE6这个贱货，其实是无语，只得从头思索了。

一样平常的，在css做结构时，有几种思绪，一种是float,一种是定位，关于定位的话，不熟习的google一下就行，提一下：position:relative;的这个属性，假如不指明top,left的话，它的视觉效果不会改动。
以是，为了让#main在视觉效果上有所冲破，那末必需指明top大概left，在这里只必要指明left就好了,

#main{
float:left;
background-color:#e5e5e5;
width:500px;
left:300px;
}
#left{
float:left;
background-color:#7bd;
width:300px;
left:-500px;
}

实在在这两头，另有一个观点是对照主要的，#main，#left有了position:relative今后，就有了层的观点，以是当#main{left:300px}后，#left已自力出来了，不会被挤到800px的地位了，故：之必要left:-500px就可以到达右边，500是#main的宽。
最初思索的是向下兼容，
供应一段代码：

固然写了这么多，可是你可以做，其实不代表你应当这么做，这是一个战术和计谋的成绩，以下是我团体想晓得的：
我以为一入手下手：

padding-bottom:32767px;
margin-bottom:-32767px;

这么年夜的值，在reflow阶段会不会很耗资本，而接纳js来把持他们的高度，会不会来得更轻松一些呢？

第一次写这类东东，感应很辣手，不论是构想上仍是在言语表达上都仍是很流畅的，但愿人人主动的斧正，但愿能和更多的伴侣来举行交换，一方面是进步本人，另外一方面是增进社区的协调和共享，尽一份本人菲薄的力气。

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

作者: 小女巫 时间: 2015-1-17 23:36
由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

作者: 深爱那片海 时间: 2015-1-24 12:46
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 仓酷云 时间: 2015-2-1 16:23
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 只想知道 时间: 2015-2-7 09:58
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 海妖 时间: 2015-2-21 22:21
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 金色的骷髅 时间: 2015-3-6 22:56
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 若相依 时间: 2015-3-13 23:08
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 小妖女 时间: 2015-3-20 23:07
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

欢迎光临仓酷云 (http://ckuyun.com/)