实现原理:将图片放到表格单元格里,通过添加align="center"实现居中。
1.准备图片素材,新建html网页。
2.打开Dreamweaver,在<body></body>里插入如下代码:
<table align="center" width=1133 height=1535 style="background:url(images/Book.jpg)">
<tr>
<td></td>
</tr>
</table>
3.在IE浏览器里预览。
先插入一个div标签,再建css规则,设置属性让图片居中,如下图:
<style type="text/css">
.an{ width:311px /*背景图片宽度*/
margin:auto /*居中*/
background-image:url(images/hd.jpg) /*背景图片*/
height:211px /*背景图片高度*/
}
DW8让表格内的背景图片居中显示方法:方法一、再建一表格,将图片与表格分别放入两个单元格中。
即:
<talbe>
<tr>
<td>
<!-- IMAGE -->
</td>
<td style="text-align:center">
<!-- TABLE -->
</td>
</tr>
</table>
方法二、在图片外套一个DIV标签,再在表格外套一个DIV,然后设置DIV属性。
即:
<style>
.content{text-align:centerborder:4px solid #99CC00width:40%}
.content #left{height:200pxfloat:leftborder:4px solid #BB0000width:40%}
.content #right{height:200pxfloat:leftborder:4px solid #009999width:60%text-align:center} <!-- float还是left -->
.content img{width:100%height:192px}
.content .t1{width:80%margin-top:2px}
.content .t1 td{height:80pxborder:3px dotted #990099width:50%text-align:center}
</style>
<div class="content">
<div id="left"><img alt="LEFT" title="IMAGE" /></div>
<div id="right">RIGHT<table cellpadding="0" cellspacing="0"
class="t1"><tr><td>R11</td><td>R12</td></tr><tr><td>R21</td><td>R22</td></tr></table></div>
</div>
方法三、如果什么都不相加也可以,只是不太好。
即:
<style>
.img{left:20pxposition:absoluteborder:5px solid #AA0000width:150pxheight:200px}
.table{width:30%height:200pxtext-align:centerfont-family:"楷体"color=#992211font-size:2em}
td{border:3px solid #00AA00}
</style>
<center>
<img class="img" alt="LEFT"/>
<table class="table" cellpadding="0" cellspacing="0">
<tr>
<td>
RIGHT1
</td>
<tr>
<tr>
<td>
RIGHT2
</td>
<tr>
</talbe>
</center>