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®" /> <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>
效果图: