目录

  • 1 初识HTML5
    • 1.1 HTML5基础
    • 1.2 文本和图像标记
    • 1.3 实验1我的个人简历
    • 1.4 实验2锚点的使用
    • 1.5 实验3制作电影宣传效果
    • 1.6 实验4三级树列表的嵌套页面
    • 1.7 结构、分组、交互元素及其全局属性
  • 2 CSS3入门
    • 2.1 CSS核心基础
    • 2.2 文本样式属性
    • 2.3 实验5 嵌入CSS文件控制样式
    • 2.4 实验6 制作电商服装推广页面
  • 3 CSS选择器
    • 3.1 选择器上篇
    • 3.2 选择器下篇
    • 3.3 实验8制作网页设计列表
  • 4 盒子模型
    • 4.1 盒子模型概述
    • 4.2 盒子模型课堂操作
    • 4.3 实验9制作音乐排行榜
  • 5 浮动与定位
    • 5.1 浮动
    • 5.2 定位
    • 5.3 定位操作题
    • 5.4 综合实例
    • 5.5 实验10制作电子商务团购页面
    • 5.6 如何创建首页
  • 6 表单的应用
    • 6.1 表单概述
    • 6.2 Input类型及属性
    • 6.3 CSS美化表单
    • 6.4 实验11会员信息登记表
    • 6.5 综合训练“一个网页的诞生”
  • 7 多媒体应用
    • 7.1 多媒体
    • 7.2 多媒体训练
  • 8 第九单元
    • 8.1 第一课时
    • 8.2 第二课时
实验6 制作电商服装推广页面


网页效果图:

需要用到的字体文件下载:

需要用到的背景下载:


实验说明:

  1. 首先需要去掉所有元素的外边距及内边距,一般会使用星号作为选择器,如:* { margin: 0;  padding: 0; }

  2. 接着添加背景,该背景图片宽度为1200像素;

  3. 字符“11.11”是华文彩云,字体大小为165像素;

  4. 第二行字体大小为90像素,其中“双11”字符使用了自定义字体,字体稍大;

  5. 很多字体都有边框且有阴影,可以使用text-shadow来实现,字体描边效果可以使用偏移正负值达到效果;

  6. 字体颜色用到了白色、红色、黄色、灰色;

  7. 要求和效果图制作的一模一样,上述提示只是一些关键内容,还有很多细节需要大家自己调整,比如行间距,字间距等属性。左下角记得写上自己的姓名和学号。

  8. 在实验报告中需要上传一张图片:一张网页效果图。