html：网页头部制作，QQ界面，淘宝网图文表，销售报表，表格
网页头部制作：
<!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>
首页 产业带 样品中心
加工定制 代理加盟 公司黄页</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> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。-->
<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>
<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" >验证码:</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>
效果：
销售报表：
<!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>
<!--<th colspan="9" >
<h2 >2012年上半年商品销售报表</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">小计(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>
效果：
淘宝网图文报表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--<dl>
<dt> <img src="img/p1.jpg" /></dt>
<dd>商品名称:三星手机</dd>
<dd>系统: Android</dd>
<dd>移动2G 联通2G(GSM) ,移动3G(TD)</dd>
</dl>-->
<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>
