使用table进行居中布局的网页页头编写方式——大学案例

首先看代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<body style="cellspacing:0;cellpadding:0;margin:0;border:0;">

<table border="0" bgcolor="#276e51" width=100%>
    <tr >
        <td></td>
        <td width="400px">
        <img src="http://202.115.196.10/uploads/logo/15513192595074.png" width="400px"/>
        </td>
        <td width="250px"></td>
        <td width="230px">
        <input type="text" style="height:30px;width:200px;background-color:#3d7c62;color:white;border:none;border-radius:20px;" placeholder="请输入搜索内容...";>       
        </td>
       
        <td width="80px"><a href="http://news.baidu.com/"style="color:white;font-size:15;">信息公开</a></td>
        <td width="80px"><a href="http://news.baidu.com/"style="color:white;font-size:15;">招标采购</a></td>
        <td width="80px"><a href="http://news.baidu.com/"style="color:white;font-size:15;">内网入口</a></td>
        <td width="80px"><a href="http://news.baidu.com/"style="color:white;font-size:15;">ENGLISH</a></td>
        <td></td>
    </tr>
</table>

</body>
</html>

上述代码中的知识点:

1)table中应该写的属性有两个,背景颜色,和总宽度为100%浏览器宽度。还有一个属性就是border,这个属性调整为1的时候是用来观察表格布局中是否存在问题,非常有用,完成调整后再设置为0.

2)为了内容居中,两边留白,中间的内容格子必须带有宽度尺寸的设置,除去两边两个格子,其他格子宽度的总和应当等于1200px。如果不设置尺寸,第二格的logo会顶到最左边去。

3)两边的两个格子没有内容。但是必须写。不设置宽度的原因是可以跟随浏览器的宽度而实时变化。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: