云南网站建设创新企业 昆明多彩网络公司

|网页对话|电话:0871-63215311

div css网站布局小技巧(1)

来源:昆明网络公司 日期:2010-06-06 阅读: 发表评论

结束浮动的clear应该有的属性;分页居中样式;css制作表格边框;另外一个:display: inline-block 不用加float这属性就可用;LI不使用浮动,实现横排居中。

结束浮动:
结束浮动的clear应该有的属性: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是关键样式,容器中的span 和a样式*/
#on {background-color:#468AD1;font-weight:bold;color:#fff;} /*当前页的span样式*/

css制作表格边框:
可以实现普通表格实现的效果,边框是实线。
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 }

另外一个:display: inline-block 不用加float这属性就可用。

LI不使用浮动,实现横排居中:
li左浮动在u标签中居中,将li display属性改成inline,高度和宽度为内容高宽度,而且能通过w3c验证,如果需要自己设定的话,可以使用一下CSS HACK:
inline-block在不同浏览器中的兼容
display: inline-block;  //IE8 firfox 标准浏览器
*display: inline;
*zoom: 1;               //这2个*开头的是兼容IE 6-7
但这样无法通过w3c验证,可以使用 <!--[if lte IE 7]><link href="main.css" rel="stylesheet" type="text/css" /><![endif]--> 来判断加载不同正常的css文件。这样就可以通过W3C验证了。[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里的不等于判断符相同。

资料汇总:昆明网站建设,昆明多彩科技。

发表评论评论列表(有 条评论)

相关文章:
暂无相关文章
最热文章:
新手怎么制作网页? 阅读:7660
jcarousellite中文文档 阅读:6507
表单元素input、按钮、文字完美垂 阅读:6247
怎么使chrome(谷歌google 阅读:6145
phpMailer中文文档手册 阅读:4639
网页对话 0871-63215311