html：網(wǎng)頁頭部制作，QQ界面，淘寶網(wǎng)圖文表，銷售報(bào)表，表格
網(wǎng)頁頭部制作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>nav</title>
<link rel="stylesheet" href="css/nav.css">
</head>
<body>
<div id="nav">
<font color="white" ><b>
首頁 產(chǎn)業(yè)帶 樣品中心 ?
加工定制? 代理加盟? 公司黃頁</b> </font>
</div>
</body>
</html>
#nav{
background: orange;
width: 1200px;
height: 50px;
line-height: 50px;
font-size: 18px;
letter-spacing: 1px;
margin-left: 50px;
}
QQ界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr{
height: 50px;}
</style>
</head>
<body>
<p>
<img src=" img/bg.jpg" />
</p>?
<!--<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。
表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用于向服務(wù)器傳輸數(shù)據(jù)。-->
<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" >確認(rèn)密碼:</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>農(nóng)歷</option>
</select>
<select>
<option selected="selected">月</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option selected="selected" >日</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select></td>
</tr>
<tr>
<td align="right"></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>
<option>湖南</option>
<option>東北</option>
<option>湖北</option>
</select>
<select>
<option selected="selected" >上饒</option>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td align="right" >驗(yàn)證碼:</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" />我已閱讀并同意相關(guān)服務(wù)條款
</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>
效果：
銷售報(bào)表：
<!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年上半年商品銷售報(bào)表</th>
<!--<th colspan="9" >
<h2 >2012年上半年商品銷售報(bào)表</h2></th>-->
</tr>
<tr bgcolor="orange">
<th rowspan="2">商品分類</th>
<th rowspan="2">商品名稱</th>
<th colspan="3">第一季度</th>
<th colspan="3">第二季度</th>
<th rowspan="2">小計(jì)(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">數(shù)碼產(chǎn)品</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">運(yùn)動產(chǎn)品</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>
效果：
淘寶網(wǎng)圖文報(bào)表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--<dl>
<dt> <img src="img/p1.jpg" /></dt>
<dd>商品名稱:三星手機(jī)</dd>
<dd>系統(tǒng): Android</dd>
<dd>移動2G 聯(lián)通2G(GSM) ,移動3G(TD)</dd>
</dl>-->
<p><img src="img/tb.jpg" alt="" width="150px" >您好，歡迎來到淘寶網(wǎng)! </p>
<br><b> 淘寶網(wǎng)>>商品展示 </b><br><br><br>
<table? ?width="1000px" height="600px" style="text-align: center;border-color:white ">
<tr bgcolor="pink">
<th>商品圖片</th>
<th>商品名稱/商品描述/聯(lián)系人</th>
<th>價(jià)格</th>
<th>地址</th>
</tr>
<tr>
<td><img src="img/p1.jpg" /></td>
<td>
商品名稱:三星Galaxy S4 I9500<br /> 商品描述16G版3G手機(jī)(皓月白) <br />聯(lián)系人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手機(jī)WP系統(tǒng)<br /> 聯(lián)系人: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 /> 聯(lián)系人:hangmeimei<img src="img/1.jpg" />
</td>
<td>
<font color="red">￥5000</font>
</td>
<td>
<font color="blue">上海</font>
</td>
</tr>
</table>
</body>
</html>
