HTML+CSS專案課1：利用table製作百度首頁

逍遙小丸子發表於2018-11-09
HTMLCSS

知識點：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="60"/>
                    <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>

 

相關文章