css 精准定位运用案例

2020-09-28 19:04 jianzhan
假如你還是不可以太搞清楚这句话,大家就做个案例,把大家第5节网页页面的头顶部blog地区用精准定位(position)来合理布局1下

HTML编码和原先的沒有差别:

拷贝编码
编码以下:

<div id="Logo">
<a href="#" id="logoLink"></a>
</div>

CSS编码就有转变了,咱先看看原先的CSS编码

拷贝编码
编码以下:

#Logo{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;
margin-top:20px;
}

原先是用“波动+外边距”合理布局的,将#logoLink精准定位在间距顶部20像素,左边0像素的地区;
假如用position的方式,CSS就应当这么写,最先给#logo再加“position:relative;”,给#logoLink再加“position:absolute;”,随后让#logoLink间距上面20像素,左边0像素,实际编码以下:

拷贝编码
编码以下:

#Logo{
height:80px;
position:relative;/*相对性精准定位*/
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
position:absolute;
top:20px;
left:0;
}

如何实际效果和原先的1样吧,便是这么简易.
甚么?CSS编码多了?确实,由原先的两句话,变为如今的4句,可是有木有发现,就靠Position大家便可以将Logo随便的精准定位于任何1个地区!这便是它的灵便的地区!假如在网页页面顶部在有1行“添加个人收藏 | 设为主页 | RSS定阅”以下图,你是否还可以很便捷的将它们精准定位于右上角呢~

可是精准定位(position)有1个缺陷,不容易自融入內部元素的高宽比,因此平常大家在合理布局网页页面的情况下,假如某个或一些控制模块高宽比始终不会改变,便可以用精准定位,可是KwooJan提议大伙儿合理布局网页页面的情况下,還是要以Float为主,Position为辅!这样你才可以做出高品质的网页页面。
=========================================================================
最终,请大伙儿记牢我这句话:“合理布局网页页面,Float为主,Position为辅!”
=========================================================================
好,大家相关网页页面合理布局的实例教程,算是早已完成,到这里来网络投票,点一下网络投票
假如能悟透每节课內容,你如今便可以拍着胸脯说“我是DIV+CSS大神!”哈哈,但是你要了解,DIV+CSS的称呼是不规范的,应当叫... ...
甚么你想不起来了?!
咣当!~~


再说1句,在大家合理布局网页页面的情况下,免不了遇到1些IE BUG,这时候候就必须CSS Hack(处理CSSbug的方式叫做CSS Hack),这块也挺简易的,强烈推荐1篇文章内容《不一样访问器CSS Hack写法》,假如也有不懂多看看论坛的“『CSS访问器适配』”板块,或baidu,google,这些专业知识我就已不独立来1节课讲了。

感谢大伙儿对我的适用!Kwoojan在这里说声“感谢”,期待大伙儿可以再次适用论坛!

假如大伙儿还必须我出甚么实例教程就,告知我!我会找時间给大伙儿实际讲讲!

2009年6月6日写:因大伙儿明显规定我写1篇有关访问器适配层面的课程,因此“第8课:CSS Hack”,我已将这节课写出来了,大伙儿能够接着学!

看完这节课,能够到“想提升,来训练”板块,做1些训练题,开展推进提升,强烈推荐训练“【09/06/21】破格网页页面精准定位合理布局 | 艰难度:4/10”
案例装包免费下载