云南網(wǎng)站建設(shè)創(chuàng)新企業(yè) 昆明多彩網(wǎng)絡(luò)公司

在線qq:540105663

div css網(wǎng)站布局小技巧(1)

來源:昆明網(wǎng)絡(luò)公司 日期:2010-06-06 閱讀: 發(fā)表評論

結(jié)束浮動的clear應(yīng)該有的屬性;分頁居中樣式;css制作表格邊框;另外一個(gè):display: inline-block 不用加float這屬性就可用;LI不使用浮動,實(shí)現(xiàn)橫排居中。

結(jié)束浮動:
結(jié)束浮動的clear應(yīng)該有的屬性:clear: both; padding: 0; margin: 0; height: 0; font-size: 0; line-height: 0;  還可以加上 overflow: hidden;

分頁居中樣式:
.pagenum{ width: 500px; border: 1px solid #ccc; margin: 0 auto;clear:both;padding:20px;text-align:center;} /*外部容器*/
.pagenum a, .pagenum #span {display:inline-block;width:16px;height:20px;line-height:20px;border:1px solid #468AD1;} /*display:inline-block是關(guān)鍵樣式,容器中的span 和a樣式*/
#on {background-color:#468AD1;font-weight:bold;color:#fff;} /*當(dāng)前頁的span樣式*/

css制作表格邊框:
可以實(shí)現(xiàn)普通表格實(shí)現(xiàn)的效果,邊框是實(shí)線。
table { border-collapse:collapse; border:solid #999; border-width:1px 0 0 1px; }
table th,table td {border:solid #999;border-width:0 1px 1px 0 }

另外一個(gè):display: inline-block 不用加float這屬性就可用。

LI不使用浮動,實(shí)現(xiàn)橫排居中:
li左浮動在u標(biāo)簽中居中,將li display屬性改成inline,高度和寬度為內(nèi)容高寬度,而且能通過w3c驗(yàn)證,如果需要自己設(shè)定的話,可以使用一下CSS HACK:
inline-block在不同瀏覽器中的兼容
display: inline-block;  //IE8 firfox 標(biāo)準(zhǔn)瀏覽器
*display: inline;
*zoom: 1;               //這2個(gè)*開頭的是兼容IE 6-7
但這樣無法通過w3c驗(yàn)證,可以使用 <!--[if lte IE 7]><link href="main.css" rel="stylesheet" type="text/css" /><![endif]--> 來判斷加載不同正常的css文件。這樣就可以通過W3C驗(yàn)證了。[if lte IE 7]意思是小于或等于IE7的IE版本,[if IE 8]意思是判斷瀏覽器是否是IE8
lte:就是Less than or equal to的簡寫,也就是小于或等于的意思。
lt :就是Less than的簡寫,也就是小于的意思。
gte:就是Greater than or equal to的簡寫,也就是大于或等于的意思。
gt :就是Greater than的簡寫,也就是大于的意思。
! : 就是不等于的意思,跟javascript里的不等于判斷符相同。

資料匯總:昆明網(wǎng)站建設(shè),昆明多彩科技。

發(fā)表評論評論列表(有 條評論)

相關(guān)文章:
暫無相關(guān)文章
最熱文章:
新手怎么制作網(wǎng)頁? 閱讀:7660
jcarousellite中文文檔 閱讀:6507
表單元素input、按鈕、文字完美垂 閱讀:6247
怎么使chrome(谷歌google 閱讀:6145
phpMailer中文文檔手冊 閱讀:4639