HTML+CSS项目课1:利用table制作百度首页

版权声明:王迪 https://blog.csdn.net/dnruanjian/article/details/83903940

知识点:html文档基本结构、table标签布局、在单元格中插入文字、图片、链接、表单。

网页效果图:

制作思路:将整个网页当做一个table表格

1、制作一个6行1列的表格

2、在单元格中插入相关内容

3、在第4行的单元格里插入一个form表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table标签制作的百度首页-王迪</title>
</head>

<body>
	<table width="90%" border="0" cellspacing="0">
    	<tr>
        	<td>武汉:<img src="shine.jpg" width="20px" height="20px" />23-37度|空气质量<font color="#FF0000">良好</font></td>
        </tr>
        <tr>
        	<td align="center"><img src="baidu_logo.png"/></td>
        </tr>
        <tr>
        <td align="center"><a href="#">新闻</a>	<a href="#">网页</a> <a href="#">贴吧</a>		<a href="#">知道</a> <a href="#">音乐</a> <a href="#">图片</a> <a href="#">视频</a> <a href="#">地图</a> <a href="#">百科</a> <a href="#">文库</a> <a href="#">更多&gt;&gt;</a></td>
        </tr>
        <tr>
        	<td align="center" height="80px">
            	<form action="http://www.baidu.com/baidu" target="_blank">
                	<input type="text"  name="word" size="60px"/>
                    <input type="submit" value="百度搜索"/>
                </form>
            </td>
        </tr>
        <tr>
        	<td align="center"><a href="#">把百度设为主页</a> <a href="#">关于百度</a> <a href="#">About baidu</a> </td>
        </tr>
        <tr>
        	<td align="center">©2015 Baidu 使用百度前必读 意见反馈 </td>
        </tr>
    </table>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/dnruanjian/article/details/83903940