Web前端开发实训案例教程(初级)_第11章 移动端：电商列表页.pptx

第11章移动端：电商列表页;11.1 技能和知识点;制作电商网站的商品列表页面，页面分为两个部分。 （1）页头：标题和导航。 （2）商品列表：每个列表项中包括商品图、商品名称、商品价格和交易数量。 页面效果如图所示。;1．项目设计 （1）项目名称： productList。 （2）项目文件结构如表所示。;2．搭建页面结构 页面分为页头、商品列表两部分，使用HTML5语义化标签搭建页面，页面结构设计如下图所示。;3．搭建页头 使用标题标签<h1>和HTML5语义化标签<nav>搭建页头，如下图所示。;4．创建商品列表项 使用HTML5语义化标签和页面增强元素创建商品列表项，如下图所示。;11.4.1 搭建页面结构 11.4.2 设置视口 11.4.3 制作页头 11.4.4 创建商品列表;（1）创建项目productList。 （2）在index.html中搭建页面主体结构。 ;使用viewport属性适配移动端视口，设置页面初始缩放比为1.0。;1．编写页头内容 在<header>标签中编写页头内容，包括标题和导航栏。 2．页头效果 页头效果如下图所示。;3．添加页头样式 （1）引入样式文件index.css。 （2）设置导航<nav>为弹性布局，且设置弹性子元素在横轴上平均分布。 （3）页头部分效果：;3．添加页头样式 （4）设置导航链接样式，去除下划线，设置宽度为100%且文本居中，字体颜色为黑色。 （5）为第一个导航链接添加下边框。 （6）页头部分效果如下图：;1．创建正文的商品列表 在<article>标签中创建正文的商品列表，包含商品图和商品信息。;2．商品列表页面效果 商品列表页面效果如下图所示。;3．添加商品列表样式 （1）设置<section>为弹性布局，5px的圆角边框半径。 （2）正文部分效果如右图所示。 第11章移动端：电商列表页;11.1 技能和知识点;制作电商网站的商品列表页面，页面分为两个部分。 （1）页头：标题和导航。 （2）商品列表：每个列表项中包括商品图、商品名称、商品价格和交易数量。 页面效果如图所示。;1．项目设计 （1）项目名称： productList。 （2）项目文件结构如表所示。;2．搭建页面结构 页面分为页头、商品列表两部分，使用HTML5语义化标签搭建页面，页面结构设计如下图所示。;3．搭建页头 使用标题标签<h1>和HTML5语义化标签<nav>搭建页头，如下图所示。;4．创建商品列表项 使用HTML5语义化标签和页面增强元素创建商品列表项，如下图所示。;11.4.1 搭建页面结构 11.4.2 设置视口 11.4.3 制作页头 11.4.4 创建商品列表;（1）创建项目productList。 （2）在index.html中搭建页面主体结构。 ;使用viewport属性适配移动端视口，设置页面初始缩放比为1.0。;1．编写页头内容 在<header>标签中编写页头内容，包括标题和导航栏。 2．页头效果 页头效果如下图所示。;3．添加页头样式 （1）引入样式文件index.css。 （2）设置导航<nav>为弹性布局，且设置弹性子元素在横轴上平均分布。 （3）页头部分效果：;3．添加页头样式 （4）设置导航链接样式，去除下划线，设置宽度为100%且文本居中，字体颜色为黑色。 （5）为第一个导航链接添加下边框。 （6）页头部分效果如下图：;1．创建正文的商品列表 在<article>标签中创建正文的商品列表，包含商品图和商品信息。;2．商品列表页面效果 商品列表页面效果如下图所示。;3．添加商品列表样式 （1）设置<section>为弹性布局，5px的圆角边框半径。 （2）正文部分效果如右图所示。