若天明 发表于 2015-1-15 23:10:16

给大家带来css网页制造技能:margin负值和bug的办理

网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。
破洛洛文章简介:比来做的项目中常常会用到margin的负值,这里就总结一下关于margin负值的5种利用及相干bug的办理。
比来做的项目中常常会用到margin的负值,这里就总结一下关于margin负值的5种利用

及相干bug的办理。

1.在活动性结构中的使用
如WordPress的两栏式不流动结构就是利用margin负值来完成的定位,属于摆布

margin负值在活动性结构中的使用。

<divstyle="width:200px;float:left;border-right:4pxsolid#CEE1EE;margin-right:-200px;">
左边宽度流动
</div>
<divstyle="backround:#888;margin-left:200px;">
宽度自顺应,啦啦啦。。。宽度自顺应,啦啦啦。。。宽度自顺应,啦啦啦。。。
</div>
别的一类两栏自顺应用到的是margin的高低负值,特别在一栏高度流动,别的一栏高度

不定的两栏或多栏结构中最为罕见。高度不流动栏和高度流动的栏高低错开,均无浮动

属性,高度不流动的栏margin-top一个负值,巨细就是高度流动栏的高度,完成了两栏

在统一程度线上。且宽度自顺应,而且不必忧虑有浮动呈现的一系列成绩。

款式部分:

.fixed-height{
height:200px;
width:200px;
background:#666;
}
.flow-height{
margin-top:-200px;
margin-left:200px;
}
页面布局:

<divclass="container">
<divclass="fixed-height">
高度流动哦
</div>
<divclass="flow-height">
高度宽度自顺应,啦啦啦。。。高度宽度自顺应,啦啦啦。。。
</div>
</div>
2.在选项卡等边框线的处置
下图显现的是一种对照罕见的选项卡。


如图,利用margin-bottom:-1px;办理选项卡下边框显现的成绩。[注:]利用margin-

top、margin-bottom必要看布局怎样写,天真利用。

相似的,假如您要用七个div完成8条1像素的摆布边框,可让每一个div都有摆布1像素的

边框,然后margin-right:-1px;或是margin-left:-1px;让之间的边框堆叠来到达效

果。

3.图片与笔墨对齐成绩
当图片与笔墨在一同,常常都是不合错误齐的,由于图片和笔墨默许是底部对齐。当图片较

小对照分明,利用vertical-align:middle;对齐,在firefox,chrome下能到达幻想效

果,可是IE下仍是有点别扭。

利用margin负值能在每一个扫瞄器上显现完整分歧。img标签撑持margin四个偏向的正的

和负的定位。一样平常利用img标签来显现图标,要与笔墨对齐到达幻想的效果,能够设置

img{margin:03px-3px0;}。

4.埋没首(末)边框
本着布局只管简便,款式代码只管少,削减对js的依附的准绳,我们能够用款式来完成

列表项头尾无边框的效果,而无需分外设置诸如<liclass=”last”>最初一个</li>

款式部分:

<styletype="text/css">
ul{
margin:30px;
padding:0;
width:300px;
}
li{list-style:none;}
/**横排形式**/
.cross{
overflow:hidden;
zoom:1;
}/**overflow:hidden埋没最上边border,IE6必要zoom:1**/
.crossli{
float:left;
padding:011px010px;
border-left:1pxsolid#AAA;
margin-left:-1px;
}/*margin负值埋没失落最右边边框*/
/*竖排形式*/
.vertical{
overflow:hidden;
position:relative;
zoom:1;
}/*IE下子容器假如包括属性position:relative,则父容器生效(IEbug),以是也必要设置父容器position:relative办理,IE6必要zoom:1来触发haslayout*/
.verticalli{
border-top:1pxdashed#CEE1EE;
padding:5px0;
position:relative;
top:-1px;
}/*竖排margin负值IE6不兼容,改成positon体例处置,与margin负值道理不异*/
</style>
布局部分:

<ulclass="cross">
<li>tab1-1</li>
<li>tab1-2</li>
<li>tab1-3</li>
<li>tab1-4</li>
</ul>
<ulclass="vertical">
<li>这里是一条信息</li>
<li>这里是一条信息</li>
<li>这里是一条信息</li>
<li>这里是一条信息</li>
<li>这里是一条信息</li>
</ul>
5.页面上完成csssprite背景定位效果

利用img界说margin的负值完成相似background-position效果。此办法能削减一个页

面哀求数,可是有背款式与结构分别的准绳,因而不保举利用

ps:

利用margin负值在IE6/IE7下的bug:有一部分被埋没失落了


<divstyle="height:120px;width:120px;border:5pxsolid#888">
<divstyle="background-color:#CEE1EE;margin-top:-10px;position:relative;zoom:1">
<ahref="http://www.poluoluo.com/">网页教授教养网</a></div>
</div>
办理办法:增加position:relative;zoom:1;
</p>
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。

海妖 发表于 2015-1-17 20:09:49

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

admin 发表于 2015-1-21 13:15:43

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只想知道 发表于 2015-1-30 19:13:51

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。

飘灵儿 发表于 2015-2-6 15:21:42

学Dreamweaver技术的过程其实是一个增加信心的过程。

谁可相欹 发表于 2015-2-16 21:31:35

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.

若天明 发表于 2015-3-5 10:19:50

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

兰色精灵 发表于 2015-3-12 05:06:54

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

小魔女 发表于 2015-3-19 18:40:39

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
页: [1]
查看完整版本: 给大家带来css网页制造技能:margin负值和bug的办理