HTML+CSS專案課1：利用table製作百度首頁
阿新 • • 發佈：2018-11-11
知識點：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="#">更多>></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>