商苑电商：构思分页面

实训目的

应用 CSS的选择符、CSS常用属性
设计网页的分页面

实训任务

构思分页面

从现在开始，构思分页面。

共设计5个分页面：

休闲零食：主要贩卖校园学生喜爱的休闲零食，如饮料、薯片等。

美妆个护：主要销售男、女生喜爱的护肤品、化妆品

运动周边：销售运动有关的服饰、用品、器械等

手机数码：潮流数码，手机时尚，时尚挂件，IT周边

生活用品：大学生必备的生活神器、宿舍神器、教室神器

然后按照分类，依次在html文件夹下建立5个对应的文件：food.html,beauty.html,sports.html,digital.html 和item.html

设计分页面

以休闲零食为例，设计一个分页面。

html文件

html文件夹中新建文件food.html:

<html> 
  <head> 
     <title> 商苑电商 -休闲食品版块</title>
     <meta charset="utf-8" />
     
  </head>
  <body> 
     <h1> 商苑电商 -休闲食品</h1>
     <hr />  
     <img src="../img/food.png" width="40%" />
     <p>休闲食品,食品饮料报价、促销、新闻、评论、导购、图片</p>

     <p>提供夏威夷果/松子/三只松鼠等坚果炒货，薯片/旺旺/好丽友，饼干/蒸蛋糕/奥利奥，肉干肉脯，猪肉脯/牛肉/周黑鸭，蜜饯果干，芒果干/红枣/枸杞，糖果巧克力，巧克力/糖果/德芙等商品的最新报价、促销、评论、导购、图片等相关信息 </p>


  </body>
</html>

链接

为了能让html文件引用上刚才的样式，在html文件的head标签里面，添加一行link标记：

   <head> 
     <title> 商苑电商 -休闲食品版块</title>
     <meta charset="utf-8" />
     <link type="text/css" rel="stylesheet" href="../css/food.css" /> 
  </head>

css文件

在css文件夹中新建food.css的样式文件：

应用 CSS的选择符、CSS常用属性，为网页添加合适的样式

提示：颜色和背景，字体大小、粗细、字体；文本缩进、对齐方式、行高

body {
	background-color: #f4f4f4;
}

h1 {
	color:#0aa6d6;
	text-align:left;
}
p{
	color:#fc5726;
}

下载图片

网页如果都是文字，不太好看

我们可以从网上提前下一张图片，保存到img文件夹下，以备插入：

验证

在浏览器上打开，效果如下：

用同样的方法，制作另外4个分页面即可。