HTML语言编辑页面2

     做这种页面首先看要从哪里开始，有几行几列。对于初学者来说，这个页面里有的东西本人只能通过截图来辅助完成。

     此页面有2列11行，先编写图片地址，如需在此图片上点击还得在src前面加上一个input标签（如<td rowspan（跨行单元格）="7"><input name="submit" type（类型）="image" （图像）value="" src="图片地址" /></td>），再将上8行合并，下3行合并，编写图片，编写相关文本信息。

   在HTML语言中要使文字变色及如何使用虚线此页面也做了详细的编写(如：前面代码是对中间文字进行定义后面代码是虚线的进行定义，<td><br/（换行）><span（跨度）style="font(字体)-size(大小):22px;color（颜色）:red（红）">富含乳清浓缩蛋白 鱼胶原蛋白 碱化可可粉 均衡营养</span><hr（水平线的定义） style="border:1px dotted（虚线） #036" /></td>)，

   此页面里还有一个活动的按钮（如： <td><购买数量:<input type="button" value="-" /><input type="text" size="1" value="1" /><input type="button" value="+" /></td>）

以下是页面的编辑代码:

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="Generator" content="EditPlus&reg;" /> 
  <meta name="Author" content="" /> 
  <meta name="Keywords" content="" /> 
  <meta name="Description" content="" /> 
  <title>Document</title> 
 </head> 
 <body> 
  <table> 
   <tbody>
    <tr> 
     <td rowspan="7"><input name="submit" type="image" value="" src="C:\Users\hailang\Desktop\HTML\QQ截图20150501213711.jpg" /></td> 
     <td>康比特 康比特乳清蛋白固体饮料（香草味）750g 康比特乳清蛋白固体饮料（香草味）750g<br/><span style="font-size:22px;color:red">富含乳清浓缩蛋白 鱼胶原蛋白 碱化可可粉 均衡营养</span><hr style="border:1px dotted #036" /></td> 
    </tr>
    <tr> 
     <td>商品编号：18799</td> 
    </tr> 
    <tr> 
     <td>参考价：￥298</td> 
    </tr> 
    <tr> 
     <td>价格：￥184.7（该商品不支持优惠券）</td> 
    </tr> 
    <tr> 
     <td>促销信息：<img src="C:\Users\hailang\Desktop\HTML\QQ截图2.jpg" width="40" height="22" alt="打折" />该商品已打6.2折</td> 
    </tr> 
    <tr> 
     <td>商品规格：750g</td> 
    </tr> 
    <tr> 
     <td>生产厂家：北京康比特体育科技股份有限公司</td> 
    </tr> 
    <tr> 
     <td rowspan="3"><img src="C:\Users\hailang\Desktop\HTML\下图.jpg" alt="下图" /></td> 
     <td>支持：在线支付满89元 货到付款满150元包邮</td> 
    </tr> 
    <tr> 
     <td><hr style="border:1px dotted #036" />购买数量:<input type="button" value="-" /><input type="text" size="1" value="1" /><input type="button" value="+" /></td> 
    </tr> 
    <tr> 
     <td><input name="submit" type="image" value="" src="C:\Users\hailang\Desktop\HTML\123.jpg" /></td> 
    </tr> 
   </tbody>
  </table>   
 </body>
</html>

效果图：

posted @ 2015-05-02 12:02  yxmvip  阅读(187)  评论(0)  编辑  收藏  举报