Web 前端开发案例与实战单元11 电商网站.pdfVIP

单元11电商网站

11.1分析首页效果图

11.2制作头部

11.3制作首页的主体部分

11.4制作首页的底部

11.5二级页面的制作

11.1分析首页效果图

11.2制作头部

11.2.1制作Logo与搜索框

11.2.2制作导航栏

11.2.1制作Logo与搜索框

Logo和搜索框位于网页最顶端，是网页第一个要展

示的部分。

Logo主要内容是一张图片，搜索框由文本ipnut元素

和按钮ipnut元素组成

11.2.2制作导航栏

头部的导航栏主要用于导向网站的其它二级页面。

导航栏需要使用ul元素进行布局。

11.3制作首页的主体部分

11.3.1制作Banner部分

11.3.2制作双列商品展示模块

11.3.3制作多列商品展示模块

11.3.1制作Banner部分

Banner部分为三列布局，包括第1列的侧边栏导航，

第2列的Banner，第3列的用户登录框。

11.3.2制作双列商品展示模块

双列展示商品模块包含“爆品伙拼”和“新品直

播”两个部分。

这两个部分的代码是相同的，所以可以进行重用，

此时元素要求使用class属性进行标记。

11.3.3制作多列商品展示模块

多列商品展示模块的大量的使用的重用方式编写元

素。

水平方向重用了6次商品展示框，垂直方向将整个模

块进行了重用。

11.4制作首页的底部

网页的底部主要包含网站Logo和版权信息，联系信

息等内容。

11.5二级页面的制作