2.8 综合练习——制作购物页面上的商品展示框
现在互联网上的购物网站非常多，在购物网站的页面上有多个商品的简介，单击商品可以查看商品的详细信息。本小节模拟制作页面上某个商品的介绍，效果如图2-11所示。
图2-11 商品简介
从图中可以看到，商品介绍包括图片、价格及文字介绍等。在此例中，需要为元素添加边框线，因此先介绍为元素添加边框线的css属性border，如：
边框线的设置包括粗细、颜色与样式，上述代码为<div>添加粗细为1 px、颜色为红色、样式为实线的边框线，为<a>添加粗细为2 px、黄色、样式为点线的边框线。
为了制作图2-11中所示网页，可以采用div嵌套，嵌套层次如图2-12所示。
图2-12 div嵌套层次图
从图2-12中可以看到，一共包含5个div，最外层的div包含4个div，里面的div分别用于显示图片、价格、评价、文字简介等。最外面的div显示边框线，里面的div不显示边框线。假设要制作的网页文件名是“product.html”，网页中的图片保存在与“product.html”同一文件夹中的“images”文件夹中，图片的名字是“1.jpg”。制作网页，首先定义网页头部，代码如下：
<! DOCTYPE html> <html> <head> <meta charset="gbk"> <title>【京东超值购】天天特价_品牌折扣_打折促销_优惠活动-京东</title> <meta name="keywords" content="超值购，超值，专享价，促销，优惠，促销活动， 品牌折扣，打折信息"> <meta name="description" content="京东超值购-京东旗下超值优惠，好货 低价推荐频道。涉及天天特价、促销专享价、品牌折扣、打折信息，涵盖电脑数码、手机家电、食品百 货、服饰鞋帽、母婴、图书等全品类优惠促销活动！"> </head>
然后在<body>标签内定义内容（下面所有代码都放在<body>内），首先在<body>内添加最外面的div:
上述代码主要定义了最外面div的宽度、高度和边框线。然后在上面的div中添加4个div，第一个div的定义为：
在这个div中定义了text-align的值为center（div中的内容位于此div水平中间位置），在div里是一个图像超链接。第二个div的定义为：
在这个div中的<span>主要为人民币符号定义与价格不同的颜色，并加粗。第三个div的定义为：
<div style="font-size:14px; text-align:center ; line-height:28px; color:#666; "> 已有<a style="color:red; " href="10533337078.html" target="_blank" >50+ </a>人评价</div>
在这个div中相关CSS属性在前面已有阐述，不再说明。第四个div的定义为：
<div style="font-size:12px; color:#666; ">科语（COAYU）APP智能扫地机器人 带水 箱湿拖地擦地机 薄 全自动家用吸尘器 玫瑰红色</div>
至此，相关内容的代码全部完成，里面div与div之间的距离可以通过<br />来添加。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。