1、打开编辑器,新建test.html,用于学习今天的内容。如下图所示:
2、接下来需要在head标签下方引入jquery.min.js插件,如下图所示:
3、在页面的body标签里,新建一个div,名称为test。如下图所示:
4、在body标签下方写上<script></script>,用来存放js代码。通过class定位到div,通过css()方法让文字居中。如下图所示:
5、在浏览器中打开test.html,可以在文字在页面中间显示。如下图所示:
不用定位也可以实现
<div id="div1"><div id="div2"></div>
</div>
CSS中定义div1的宽度,将div2的设置为居中,上边距为10即可
#div1{width:400pxheight:390pxpadding-top:10px}#div2{width:380pxheight:380pxmargin:0 auto}
这样实现或者直接#div{padding:10px}也可以, 如果是用定位,固定两个div的宽度后定位即可
#div1{width:400pxheight:400pxposition:relative}
#div2{width:380pxheight:380pxposition:absoluteleft:10pxtop:10px}
大的DIV中嵌套两个小的DIV一左一右步骤如下:
1,首先,图中显示的Web结构是html和css。
2,打开html页面,如图所示,定义一个大div和两个小div。
3,最常用的float float,只要两个小div的宽度小于或等于大div的宽度,就可以并排实现。
4,使用position进行绝对定位,然后使用margin-left删除第一个小div的宽度。
5,使用表格框并排实现div,这是相同的宽度。
6,如图所示,这是上面三种方法运行后的结果,可以看到两个大DIV嵌套在一个大DIV中。