DotNetNuke(DNN)皮肤制作--如何居中内容
生活随笔
收集整理的這篇文章主要介紹了
DotNetNuke(DNN)皮肤制作--如何居中内容
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
設(shè)計皮膚我們遇到的第一個問題就是如何居中內(nèi)容，一般使用CSS+DIV布局有兩種方法，
第一種方法是使用 auto margins,第二種方法是使用負(fù)margins
翻翻資料，使用auto margins的一般都是這么寫的：
假設(shè)HTML部分如下：
<body>
<div?id="wrapper">
</div>
</body> 現(xiàn)在使用auto margins居中id為wrapper的DIV,
#wrapper
{}{
???width:?720px;?
???margin:?0?auto;
} 但你卻發(fā)現(xiàn)，按照這種“標(biāo)準(zhǔn)”寫法，皮膚安裝到DotNetNuke中后，在IE 5.x/Win、IE 6/Win中里面卻怎么也沒法把內(nèi)容居中，auto margins方法失效了，
這是為什么呢？原來，IE 5.x/Win是不支持auto margins的，而DNN默認(rèn)的DOCTYPE會觸發(fā)IE6進(jìn)入quirks模式（如何解決），這種模式下也是不支持auto margins的，看樣子這個經(jīng)典居中方法是沒法用在DNN上了，幸運(yùn)的是，IE錯誤的理解text-align:center這個定義，IE會把所有的東西都居中而不僅僅是text，我們可以利用這一點來解決問題。修改后的代碼如下（只需要修改CSS部分）：
body
{}{
???text-align:center;
}
#wrappter
{}{
???width:720px;
???margin:?0?auto;
???text-align:?left;
} 修改完再試一試，在IE里面也表現(xiàn)完美！
第二種方法是使用負(fù)的margin，這種方法也會帶來版式上的問題，且聽下回分解！
第一種方法是使用 auto margins,第二種方法是使用負(fù)margins
翻翻資料，使用auto margins的一般都是這么寫的：
假設(shè)HTML部分如下：
<body>
<div?id="wrapper">
</div>
</body> 現(xiàn)在使用auto margins居中id為wrapper的DIV,
#wrapper
{}{
???width:?720px;?
???margin:?0?auto;
} 但你卻發(fā)現(xiàn)，按照這種“標(biāo)準(zhǔn)”寫法，皮膚安裝到DotNetNuke中后，在IE 5.x/Win、IE 6/Win中里面卻怎么也沒法把內(nèi)容居中，auto margins方法失效了，
這是為什么呢？原來，IE 5.x/Win是不支持auto margins的，而DNN默認(rèn)的DOCTYPE會觸發(fā)IE6進(jìn)入quirks模式（如何解決），這種模式下也是不支持auto margins的，看樣子這個經(jīng)典居中方法是沒法用在DNN上了，幸運(yùn)的是，IE錯誤的理解text-align:center這個定義，IE會把所有的東西都居中而不僅僅是text，我們可以利用這一點來解決問題。修改后的代碼如下（只需要修改CSS部分）：
body
{}{
???text-align:center;
}
#wrappter
{}{
???width:720px;
???margin:?0?auto;
???text-align:?left;
} 修改完再試一試，在IE里面也表現(xiàn)完美！
第二種方法是使用負(fù)的margin，這種方法也會帶來版式上的問題，且聽下回分解！
轉(zhuǎn)載于:https://www.cnblogs.com/DotNetNuke/archive/2007/12/27/996286.html
總結(jié)
以上是生活随笔為你收集整理的DotNetNuke(DNN)皮肤制作--如何居中内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 精妙的SQL语句
- 下一篇： 百度Logo月度首页人物--王正华:中国