仓酷云 发表于 2015-1-16 10:37:05

DIV教程之纯CSS完成三列DIV等高结构

以下的内容是一位网友的DIVCSS编码笔记,是值得大家学习的,在实际工作与开发中,将工作中的点滴记录下来,回首这些过往,你也会收获很多

[*]
[*]
DIV等高结构,我想良多人都碰见过,我也看过很多的办法,有的是经由过程背景图片,完成假象的等高效果;
另有的用js完成等等。这些都是办法,可是如今都不必以上的办法,来个真实的纯css完成等高!
如今我们来看看真实的CSS完成的等高结构,其办法次要是接纳“埋没容器溢出”、“正内补钉”和“负外补钉”分离的办法完成的。上面来看看实践的例子(三列等高),以上面的XHTML代码为例:
html代码:
<divid="wrap">
<divid="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<divid="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<divid="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>

css代码:
<styletype="text/css">
body,p,ul{margin:0;padding:0;}
#wrap{overflow:hidden;width:1000px;margin:0auto;}
#left,#center,#right{margin-bottom:-10000px;padding-bottom:10000px;}
#left{float:left;width:250px;background:#00FFFF;}
#center{float:left;width:500px;background:#FF0000;}
#right{float:right;width:250px;background:#00FF00;}<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>CSS等高结构</title><styletype="text/css">*{margin:0;padding:0;}#wrap{overflow:hidden;width:1000px;margin:0auto;}#left,#center,#right{margin-bottom:-10000px;padding-bottom:10000px;}#left{float:left;width:250px;background:#00FFFF;}#center{float:left;width:500px;background:#FF0000;}#right{float:right;width:250px;background:#00FF00;}</style></head><body><divid="wrap"><divid="left"><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p></div><divid="center"><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p><p>center</p></div><divid="right"><p>right</p><p>right</p><p>right</p></div></div></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
我在这里借用了新浪博客的盒子来说明下,大家可能发现了,其实边框border往往就只有1px的宽度,谁叫它是边框呢。

飘飘悠悠 发表于 2015-1-18 07:15:21

由CS4版本开始,则转用WebKit排版引擎(亦即GoogleChrome和AppleSafari浏览器所用的排版引擎)作为网页预览。

兰色精灵 发表于 2015-1-25 23:19:58

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

简单生活 发表于 2015-2-4 13:41:24

可以使用 CSS 检查工具进行设计。

admin 发表于 2015-2-28 15:07:36

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。

柔情似水 发表于 2015-3-10 00:45:01

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

小女巫 发表于 2015-3-17 04:10:00

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

小妖女 发表于 2015-3-23 20:23:10

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
页: [1]
查看完整版本: DIV教程之纯CSS完成三列DIV等高结构