一、網站導航欄設計與實現
導航欄是網站的重要組成部分，負責引導用戶瀏覽網站的各個板塊。以下是一個實用的導航欄實現方案：
實現代碼
HTML 結構：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>網站導航欄</title><link rel="stylesheet" href="css/nav.css">
</head>
<body><div id="nav"><font color="white" ><b> 首頁 產業帶 樣品中心 加工定制 代理加盟 公司黃頁</b> </font></div>
</body>
</html>
CSS 樣式 (nav.css)：
#nav{background: orange;width: 1200px;height: 50px;line-height: 50px; /* 實現文字垂直居中 */font-size: 18px;letter-spacing: 1px; /* 字間距 */margin-left: 50px;
}
技術要點解析
- 使用 div 作為導航欄容器，便于整體樣式控制
- 通過設置 line-height 等于容器高度實現文字垂直居中
- 使用 font 標簽設置文字顏色和粗細（建議后續可優化為 CSS 樣式）
- 固定寬度 (1200px) 使導航欄在不同設備上保持一致的寬度
- 使用 ? 實現導航項之間的間距控制
二、QQ 注冊表單界面設計
表單是網站與用戶交互的重要方式，以下是 QQ 風格注冊表單的實現：
實現代碼
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>QQ注冊</title><style>tr{ height: 50px; }</style>
</head>
<body><p><img src="img/bg.jpg" /></p> <form action="#" method="post" ><table style="margin-left: 300px;" ><tr height="50px"><td align="right" >郵箱賬號:</td><td><input type="text" /> <select><option selected="selected">qq.com</option><option>@gmail.com </option><option>@ask.com </option><option>@mail.com </option></select></td></tr><tr><td align="right">昵稱:</td><td><input type="text" /></td></tr><tr><td align="right" >密碼:</td><td><input type="password"></td></tr><tr><td align="right" >確認密碼:</td><td><input type="password"></td></tr> <tr><td align="right"> 性別:</td><td><input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女</td></tr><tr><td align="right">生日</td><td><select><option selected="selected" >公歷</option><option>農歷</option></select><select><option selected="selected">月</option><option>1</option><!-- 其他月份選項 --></select><select><option selected="selected" >日</option><option>29</option><option>30</option><option>31</option></select></td></tr><tr><td align="right">所在地:</td><td><select><option selected="selected" >中國</option><option>俄羅斯</option><option>美國</option><option>日本</option></select><select><option selected="selected">江西</option><!-- 其他省份選項 --></select><select><option selected="selected" >上饒</option><!-- 其他城市選項 --></select></td></tr><tr><td align="right" >驗證碼:</td><td><input type="text" /><img src="img/qq_yzm.jpg" width="70px" height="30px" align="center" /></td></tr><tr><td align="right"></td><td><input type="checkbox" />我已閱讀并同意相關服務條款</td></tr><tr><td align="right"></td><td><input type="image" src="img/btn.jpg" width="150px" height="40px" /></td></tr></table></form>
</body>
</html>
技術要點解析
- 使用 table 布局實現表單的整齊排列
- form 標簽的 action 屬性設為 “#” 表示表單提交到當前頁面
- 不同類型的 input 元素應用：
- type=“text”：文本輸入框
- type=“password”：密碼輸入框（輸入內容會被隱藏）
- type=“radio”：單選按鈕（相同 name 屬性確保互斥）
- type=“checkbox”：復選框
- type=“image”：圖片提交按鈕
- select 元素用于創建下拉選擇框，option 定義選項
- selected=“selected” 屬性設置默認選中項
- td 元素的 align=“right” 屬性使標簽右對齊，增強表單的視覺一致性
三、銷售報表表格設計
表格是展示結構化數據的理想選擇，以下是商品銷售報表的實現：
實現代碼
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>銷售報表</title>
</head>
<body><table width="1000px" cellspacing="0px" border="1px" style="text-align: center;"><tr><th colspan="9" >2012年上半年商品銷售報表</th></tr><tr bgcolor="orange"><th rowspan="2">商品分類</th><th rowspan="2">商品名稱</th><th colspan="3">第一季度</th><th colspan="3">第二季度</th><th rowspan="2">小計(RMB)</th></tr><tr bgcolor="orange"><th>1月</th><th>2月</th><th>3月</th><th>4月</th><th>5月</th><th>6月</th></tr><tr><td rowspan="3">數碼產品</td><td>三星Galaxy S4 19500</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td rowspan="3">300000</td></tr><tr><td>諾基亞Lumia 900</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td></tr><tr><td>蘋果iPhone 4 8G版</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td></tr><tr><td rowspan="2">運動產品</td><td>籃球</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td rowspan="2">300000</td></tr><tr><td>足球</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td><td>50000</td></tr></table>
</body>
</html>
技術要點解析
- 表格的嵌套表頭設計：
- colspan 屬性：指定單元格橫跨的列數（如 colspan=“9” 表示橫跨9列）
- rowspan 屬性：指定單元格縱跨的行數（如 rowspan=“2” 表示縱跨2行）
- 使用 th 標簽定義表頭單元格，默認會加粗居中顯示
- bgcolor 屬性設置表頭背景色，增強視覺層次
- cellspacing=“0px” 去除單元格之間的間距
- border=“1px” 設置表格邊框
- 數據分類展示：通過 rowspan 實現分類名稱的合并，使報表結構更清晰
四、淘寶網風格商品展示頁面
電商網站的商品展示需要清晰呈現商品信息，以下是淘寶網風格的商品展示實現：
實現代碼
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>淘寶商品展示</title>
</head>
<body><p><img src="img/tb.jpg" alt="" width="150px" >您好，歡迎來到淘寶網! </p><br><b> 淘寶網>>商品展示 </b><br><br><br><table width="1000px" height="600px" style="text-align: center;border-color:white "><tr bgcolor="pink"><th>商品圖片</th><th>商品名稱/商品描述/聯系人</th><th>價格</th><th>地址</th></tr><tr><td><img src="img/p1.jpg" /></td><td>商品名稱:三星Galaxy S4 I9500<br /> 商品描述16G版3G手機(皓月白) <br />聯系人1eili<img src="img/1.jpg" /></td><td><font color="red">￥5000</font></td><td><font color="blue">北京</font></td></tr><tr><td><img src="img/p2.jpg" /></td><td>商品名稱諾基亞Lumia 900<br /> 商品描述:3G手機WP系統<br /> 聯系人:oking<img src="img/1.jpg" /></td><td><font color="red">￥3000</font></td><td><font color="blue">湖北武漢</font></td></tr><tr><td><img src="img/p3.jpg" /></td><td>商品名稱蘋果iPone4<br /> 商品描述:8G版(白色)<br /> 聯系人:hangmeimei<img src="img/1.jpg" /></td><td><font color="red">￥5000</font></td><td><font color="blue">上海</font></td></tr></table>
</body>
</html>
技術要點解析
- 使用表格布局展示商品列表，包含圖片、描述、價格和地址等信息
- 面包屑導航（淘寶網>>商品展示）幫助用戶了解當前位置
- 圖片與文字結合展示商品信息，增強視覺效果
- 使用 font 標簽設置價格為紅色、地址為藍色，突出重要信息
- br 標簽實現內容換行，使商品描述層次分明
- 表格邊框顏色設置為白色 (border-color:white)，實現無邊框視覺效果
以上四個案例涵蓋了 HTML 中常用的導航欄、表單、數據表格和商品展示等基礎界面元素的實現方法，通過這些案例可以掌握 HTML 布局的基本原理和常用標簽的使用技巧。在實際開發中，可以根據需要進一步優化樣式和交互效果。
