Web前端开发简明教程
首页 > Web前端开发简明教程 > 2.8 综合练习——制作购物页面上的商品展示框

2.8 综合练习——制作购物页面上的商品展示框

2020-10-12 17:35:02 29 0

编辑 收藏

2.8 综合练习——制作购物页面上的商品展示框

现在互联网上的购物网站非常多,在购物网站的页面上有多个商品的简介,单击商品可以查看商品的详细信息。本小节模拟制作页面上某个商品的介绍,效果如图2-11所示。

20201012_175039_015.jpg  

图2-11 商品简介

从图中可以看到,商品介绍包括图片、价格及文字介绍等。在此例中,需要为元素添加边框线,因此先介绍为元素添加边框线的css属性border,如:

20201012_175039_017.jpg

边框线的设置包括粗细、颜色与样式,上述代码为<div>添加粗细为1 px、颜色为红色、样式为实线的边框线,为<a>添加粗细为2 px、黄色、样式为点线的边框线。

为了制作图2-11中所示网页,可以采用div嵌套,嵌套层次如图2-12所示。

20201012_175039_016.jpg  

图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:

0.jpg

上述代码主要定义了最外面div的宽度、高度和边框线。然后在上面的div中添加4个div,第一个div的定义为:

epub_22651130_26.jpg

在这个div中定义了text-align的值为center(div中的内容位于此div水平中间位置),在div里是一个图像超链接。第二个div的定义为:

1.jpg

在这个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 />来添加。

TAGS:前端教程

取消回复欢迎 发表评论: