给大家带来使用负边距手艺制造自顺应宽度结构的网页

只看该作者 · 发表于 2015-1-15 23:28:00

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
网页制造poluoluo文章简介：公道利用负边距手艺，能够匡助我们创立良多成心思的结构，好比自顺应扫瞄器宽度的流体结构。
公道利用负边距手艺，能够匡助我们创立良多成心思的结构，好比自顺应扫瞄器宽度的流体结构。外洋关于利用负边距创立这类结构的手艺文档，我看到的最早是04年RyanBrill宣布在AListApart上的《CreatingLiquidLayoutswithNegativeMargins》（04年--！国际刚小部分人入手下手存眷WEB尺度化），本文亦可看作是对其的中文翻译版。
跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。今朝国际流派良多都举行了改版，接纳今朝的支流--960px摆布的宽度。
我以为，关于不太庞大的网站，接纳百分比举行架构是个不错的主张。自顺应结构的使用面仍是蛮多的，好比论坛页面、博客页面等。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。
这里必要的用到的手艺关头点就一则：负边距。
【复杂的结构】
OK。我们如今入手下手。假定如今必要给本人的博客从头制造前台，界面的计划已完成，就差代码架构。我们但愿博客的界面能够做到：左边的次要部分是博客文章内容，这部分必要在分歧分辩率扫瞄器下自顺应宽度；而右边是侧边栏，这部分我们想做成一个流动250px宽，预期最终效果以下：

登录/注册后可看大图

这是个典范的两栏结构，我们来做一个开端的架构

<divid="header">顶部地区</div>
<divid="mainer">
<h1>利用负边距创立自顺应宽度的流体结构</h1>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
</div>
<divid="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<divid="footer">底部地区</div>

检察测试页面一：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面一</title></head><body><divid="header">顶部地区</div><divid="mainer"><h1>利用负边距创立自顺应宽度的流体结构</h1><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p></div><divid="sideBar"><h2>最新文章</h2><ul><li>最新文章一</li><li>最新文章二</li><li>最新文章三</li></ul></div><divid="footer">底部地区</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
这是在没有款式表的情形下页面的显现效果。上面我们给它加上基础的款式表

body,p,h1,h2,ul{
margin:0;padding:0;
}
#header{
background-color:#A8A754;
}
#footer{
background-color:#A8A754;
clear:both;
}
#mainer{
width:100%;
margin-right:-250px;
float:left;
}
#sideBar{
float:right;
width:250px;
}

界说mainer右侧距为-250px，使得右侧得以空出侧边栏的宽度，安排侧边栏。加上款式表页面请检察测试页面二。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面二</title><styletype="text/css"><!--body,p,h1,h2,ul{margin:0;padding:0;}#header{background-color:#A8A754;}#footer{background-color:#A8A754;clear:both;}#mainer{width:100%;margin-right:-250px;float:left;}#sideBar{float:right;width:250px;}</style></head><body><divid="header">顶部地区</div><divid="mainer"><h1>利用负边距创立自顺应宽度的流体结构</h1><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p></div><divid="sideBar"><h2>最新文章</h2><ul><li>最新文章一</li><li>最新文章二</li><li>最新文章三</li></ul></div><divid="footer">底部地区</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
OK，如今我们看到左边的内容地区已为侧边栏空出了响应的空间，使得侧边栏安排在了它应当呈现的地位。
【往除堆叠部分】
我们这时候会发明，左边的笔墨内容部分却和侧边栏有堆叠。这时候候我们必要别的的一个DIV层，来将左边笔墨部分设置一个充足年夜的右侧距，使其不与侧边栏堆叠。并将左边内容部分与侧边栏部分设置分歧背景致，以示辨别。

<divid="mainer">
<divid="main">
<h1>利用负边距创立自顺应宽度的流体结构</h1>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
</div>
</div>

增添的CSS

#sideBar{
color:#FFF;
background-color:#36361A;
}
#main{
margin-right:250px;
background-color:#616030;
}

检察测试页面三
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面三</title><styletype="text/css"><!--body,p,h1,h2,ul{margin:0;padding:0;}#header{background-color:#A8A754;}#footer{background-color:#A8A754;clear:both;}#mainer{width:100%;margin-right:-250px;float:left;}#sideBar{float:right;width:250px;color:#FFF;background-color:#36361A;}#main{margin-right:250px;background-color:#616030;}</style></head><body><divid="header">顶部地区</div><divid="mainer"><divid="main"><h1>利用负边距创立自顺应宽度的流体结构</h1><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p></div></div><divid="sideBar"><h2>最新文章</h2><ul><li>最新文章一</li><li>最新文章二</li><li>最新文章三</li></ul></div><divid="footer">底部地区</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
【自顺应高度】
这时候候我们又发明了一个成绩：假如左边长度持续加长，那末，右边侧边栏的下部会呈现空缺。我们但愿能够完成视觉上的摆布两栏自顺应等高。
这里我们能够给外层的mainerDIV设置一个右对齐纵向反复的背静图片，图片的宽度我们设置为250px，即同侧边栏宽度不异。

登录/注册后可看大图

CSS部分我们加上

#mainer{
background:url(bj1.jpg)repeat-yrightbottom;
}

多半时分我们其实不想设置全体宽度为扫瞄器的宽度，多半时分我们会设置小于屏幕宽度的百分比。这类情形下，我们能够在左边内容及右边侧边栏外再套一个DIV层，并在侧边栏下加上一个扫除浮动的层，来到达我们的目标。这个时分我们的XHTML会是上面这个模样。

<divid="header">顶部地区</div>
<divid="wrapper"class="mid">
<divid="mainer">
<divid="main">
<h1>利用负边距创立自顺应宽度的流体结构</h1>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
</div>
</div>
<divid="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<divclass="clear"></div>
</div>
<divid="footer">底部地区</div>

响应的CSS

#wrapper{width:92%;}
.clearing{clear:both;}
.mid{margin:0auto;}

检察测试页面四：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面四</title><styletype="text/css"><!--body,p,h1,h2,ul{margin:0;padding:0;}.mid{margin:0auto;}#header{background-color:#A8A754;}#footer{background-color:#A8A754;clear:both;}#mainer{width:100%;margin-right:-250px;float:left;background:url(bj1.jpg)repeat-yrightbottom;}#main{margin-right:250px;background-color:#616030;}#sideBar{float:right;width:250px;color:#FFF;background-color:#36361A;}.clearing{clear:both;}#wrapper{width:92%;}</style></head><body><divid="header"class="mid">顶部地区</div><divid="wrapper"class="mid"><divid="mainer"><divid="main"><h1>利用负边距创立自顺应宽度的流体结构</h1><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p></div></div><divid="sideBar"><h2>最新文章</h2><ul><li>最新文章一</li><li>最新文章二</li><li>最新文章三</li></ul></div><divclass="clear"></div></div><divid="footer"class="mid">底部地区</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
RyanBrill在他的文章里说，外层的wrapper与内里的mainer两个DIV都应当设置背景background，以便办理IE里的一个BUG。但我这里只设置了mainerDIV的背景，在IE6、IE7、FF里并未发明毛病。大概他指的是IE5.x，这里疏忽。
【进阶，三栏结构】
把握了以上的办法，我们会发明制造一个三栏的结构也是很复杂的！OK。上面我们把下面的例子变下，我们必要一个三栏的结构，2侧为流动宽度，中部为自顺应宽度。这仅必要增添一点DIV。

<divid="header"class="mid">顶部地区</div>
<divid="wrapper"class="mid">
<divid="mainer">
<divid="main">
<divid="leftBar">
<h2>栏方针题</h2>
<ul>
<li>文章题目</li>
<li>文章题目</li>
<li>文章题目</li>
</ul>
</div>
<divid="inmain">
<h1>利用负边距创立自顺应宽度的流体结构</h1>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
<p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p>
</div>
</div>
</div>
<divid="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<divclass="clear"></div>
</div>
<divid="footer"class="mid">底部地区</div>

和别的一个背景图片

登录/注册后可看大图

CSS部分增添：

#main{
margin-right:250px;
background:url(bj2.jpg)#616030repeat-yleftbottom;
}
#leftBar{
float:left;
width:150px;
}
#inmain{
margin-left:150px;
}

如今来看看我们的页面，测试页面五。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试页面五</title><styletype="text/css"><!--body,p,h1,h2,ul{margin:0;padding:0;}#header{background-color:#A8A754;}#footer{background-color:#A8A754;clear:both;}#mainer{width:100%;margin-right:-250px;float:left;background:url(bj1.jpg)repeat-yrightbottom;}#main{margin-right:250px;background:url(bj2.jpg)#616030repeat-yleftbottom;}#sideBar{float:right;width:250px;color:#FFF;background-color:#36361A;}#wrapper{width:92%;}.clearing{clear:both;}.mid{margin:0auto;}#leftBar{float:left;width:150px;}#inmain{margin-left:150px;}</style></head><body><divid="header"class="mid">顶部地区</div><divid="wrapper"class="mid"><divid="mainer"><divid="main"><divid="leftBar"><h2>栏方针题</h2><ul><li>文章题目</li><li>文章题目</li><li>文章题目</li></ul></div><divid="inmain"><h1>利用负边距创立自顺应宽度的流体结构</h1><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p><p>跟着愈来愈年夜的扫瞄器的呈现及提高，网站界面怎样能满意分歧分辩率扫瞄器利用者的扫瞄需求，渐渐成为前端开辟工程师必需面临的成绩。接纳百分比举行架构是个不错的主张。以往我们举行这类架构都是利用table表格。但，实在利用很小的手艺就能够创立出切合WEB尺度化的自顺应结构。</p></div></div></div><divid="sideBar"><h2>最新文章</h2><ul><li>最新文章一</li><li>最新文章二</li><li>最新文章三</li></ul></div><divclass="clear"></div></div><divid="footer"class="mid">底部地区</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
OK，半途而废~！！详细使用举例吗，俺的博客页面就是^^
</p>
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

只看该作者 · 发表于 2015-1-17 05:32:20

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

仓酷云 · 发表于 2015-1-20 13:53:48

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-1-29 08:41:27

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-2-6 00:15:22

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-2-14 14:10:53

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

只看该作者 · 发表于 2015-3-4 07:00:37

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-11 17:54:23

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-19 05:48:57

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-3-27 08:31:56

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来使用负边距手艺制造自顺应宽度结构的网页

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块