CSS样式表进行table水平居中、垂直居中、自动填充

 最近,在用CSS+DIV做一个静态网页,做完了才发现所有的页面在不同的机器上显示很是有问题,没有进行水平居中和垂直居中,并且宽屏下,两边留白太难看。可是要是修改所有的html页面,可是有700多个~~,还好当时做html页面时设计的样式表还不错,让我感觉到了样式表的方便和强大。

注:还得同时考虑Linux Firefox下的显示情况,因为我们是做Linux的公司啊,出去演示肯定用自己的lLinux操作系统---中标普华Linux操作系统,以下的方法在IE和Firefox下是兼容的。

废话少说,说一下怎么进行这三种样式表现。一般情况下,页面中可以利用align进行页面的居中、靠左或者靠右对齐,但是采用CSS样式表来做更简单一些,尤其是基本的N多页面都写好了,如果挨个页面进行修改非常麻烦,本文介绍了使用CSS进行页面对齐的方式。

  • 同时,为了适应不同的分辨率,例如宽屏显示时,需要进行图片的自动填充。

 

原来CSS样式表的内容

一般情况下,假设为主布局样式表为main.css,每个页面都继承这个主布局表,没有居中(默认页面左对齐)和自动图片填充的CSS文件的内容如下:

body{

margin:0px

}

  • 水平居中和自动填充

1. main.css修改后的内容,红色为新增的内容

body{

margin:0px auto;

width:1024px; //宽度可自行设定,根据所做页面的实际宽度而定

background-image:url(img_frame/3.png); //3.png为需要填充的一段图片,一般横向填充

background-repeat:repeat-x;//repeat-x代表横向填充。

}

2. 修改index.html

一般情况下,只需要修改最初的html页面即可,注意index.html中的head标签中一定要有这句:
    
     在整个body下面套上一个大的表格,原来的内容保持不变,红色为新增的内容,如下:





      

....................................................................

.....................................................................

这样,我们就完成了水平居中和自动填充。

  • 垂直居中和自动填充

可参考水平居中完成,不同的是main.css中要设定height:768px;

而在index.html中修改为:


      

  • 一般我们常用的是水平居中、垂直居中和自动填充同时布局

1. main.css修改后的内容,红色为新增的内容

body{

margin:0px auto;

width:1024px; //宽度可自行设定,设定成1024则一般的宽屏和标屏显示都正确

height:768px; //

background-image:url(img_frame/3.png); //3.png为需要填充的一段图片,一般横向填充

background-repeat:repeat-x;//repeat-x代表横向填充。

}

2. 修改index.html

一般情况下,只需要修改最初的html页面即可,注意index.html中的head标签中一定要有这句:
    
     在整个body下面套上一个大的表格,原来的内容保持不变,红色为新增的内容,如下:





      

....................................................................

.....................................................................

这样,我们就完成了水平居中、垂直居中和自动填充。

如果有问题请给我留言,大家一起学习

你可能感兴趣的:(JAVA)