|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
网页制造Poluoluo文章简介：css锚点定位偏移道理兼容扫瞄器.
不晓得有无人研讨过这个，当点击页面的锚点毗连的时分一样平常就跳转到特定id的元素，而实践体现的是转动条转动使该特定id元素对齐转动条所处元素的顶端。
那假设我如今请求这个地位不是在顶端，而是离顶端有必定间隔。
先看看我完成的办法例子：
<!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>锚点地位偏移</title><style>body,h2,p{margin:0;padding:0;}h2,p{width:500px;position:relative;}p{height:400px;background:#CCC;z-index:2;}p.extra{margin:00500px;}h2{margin:-200px00;border-top:200pxsolid#000;z-index:1;background:#06F;}#anchor1{margin:0;}span{position:fixed!important;position:absolute;top:200px;left:510px;}#menu{background:#CCC;position:fixed!important;position:absolute;left:510px;top:2px;}</style></head><body><h2id="anchor1">锚点111111111111111111111</h2><p>有必定高度的层</p><h2id="anchor2">锚点222222222222222222222</h2><p>有必定高度的层</p><h2id="anchor3">锚点333333333333333333333</h2><p>有必定高度的层</p><h2id="anchor4">锚点444444444444444444444</h2><p>有必定高度的层</p><h2id="anchor5">锚点555555555555555555555</h2><pclass="extra">底端必要必定高度才能够包管转动条有充足高度让题目5抵达指定地位</p><divid="menu"><ahref="#anchor1">往往锚点1</a><ahref="#anchor2">往往锚点2</a><ahref="#anchor3">往往锚点3</a><ahref="#anchor4">往往锚点4</a><ahref="#anchor5">往往锚点5</a></div><span>←方针在这里</span></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
这实践上是一种掩眼法，对齐的参考点仍是在元素的顶端，只是我把元素的设置了特定的border-top(padding-top也能够，margin-top不成以),锚点就能够仿佛真的一样偏移到方针题目笔墨，可是如许会使上去元素之间发生一段间隔，那末我们只需设置其margin-top为负值，并且恰好为padding-top的值便可。可是还会发生一个成绩，margin-top为正数值时，会强行把元素的padding-top掩盖到上一元素下面（假设你没有设置背景致是很丢脸出来的），那怎样办呢？很天然我们就会想到z-index的办法，纯真设置z-index没有效，要先设置其positon为relative,如许就能够了。（注重：这里假设h2设置的padding-top值凌驾了p的高度[包含border和padding]值会引发层叠成绩，办理办法是一样的。）
实例css代码：- /*初始化，使不影响判别*/body,h2,p{margin:0;padding:0;}/*由于要设置z-index必要先设置一下position*/h2,p{width:500px;position:relative;}p{height:400px;background:#CCC;z-index:2;}p.extra{margin:00500px;/*最初一个p必要有必定的底端margin否则转动条不敷高度，会使达不到最初一个题目*/}h2{margin:-200px00;/*强行把元素地位拉回原位*/border-top:200pxsolid#000;/*改动方针元素关于锚点的基点地位,这里能够用padding-top,可是有纷歧样的成绩呈现，都能够很复杂办理，这里说了*/z-index:1;background:#06F;}#anchor1{margin:0;/*第一个元素不该该被拉回原位*/}span{position:fixed!important;position:absolute;top:200px;left:510px;}#menu{background:#CCC;position:fixed!important;position:absolute;left:510px;top:2px;}
</p>
一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:33:46
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-1-17 23:16:06