DIV教程之纯CSS完成三列DIV等高结构背景图片,center

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

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

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

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

仓酷云's Archiver

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