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

单元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二级页面的制作