华为商城主页（Web静态页面）

• 这是我的第一篇博客，主要一下期末大作业：华为商城主页，只涉及静态页面。

结构框架：

• 华为商城首页，根据每个部分的功能，可以将整个页面分为三部分： 头部header、主内容区content、页脚footer。

1. header部分：可由上至下分为3块： 新品推荐h-new、导航条h-nav、头部内容区h-content。
   

• 其页面内容代码如下：

<div id="header">  <div id="h-new">…</div>  <div id="h-nav">…</div>  <div id="h-content">…</div> </div> 

2. content部分： 这部分内容比较繁多。由上到下总共可以分为18块：

• .c-banner（广告条幅）
• .c-nav（导航条）
• .c-promo（促销）
• . hots-goods（热销单品）
• .recommend-goods（精品推荐）
• .c-banner2（广告条幅2）
• .phone-channel（手机专栏）
• .computer-channel（笔记本专栏）
• .panel-computer-channel（平板专栏）
• .smartwatch-channel（智能穿戴）
• .more-goods-channel（更多商品1）
• .smarthome-channel（智能家居）
• .more-goods-channel（更多商品2）
• .hotparts-channel（热销配件）
• .more-goods-channel（更多商品3）
• .brandparts-channel（品牌配件）
• .more-goods-channel（更多商品4）
• .last-one（结尾）

• 其页面内容代码如下：

<div id="content ">  <div class="c-banner ">…</div>     <div class=" c-nav ">…</div>     <div class=" c-promo ">…</div>     <div class=" hots-goods ">…</div>     <div class=" recommend-goods ">…</div>     <div class=" c-banner2 ">…</div>     <div class=" phone-channel ">…</div>     <div class=" computer-channel ">…</div>     <div class=" panel-computer-channel ">…</div>     <div class=" smartwatch-channel ">…</div>     <div class=" more-goods-channel ">…</div>     <div class=" smarthome-channel ">…</div>     <div class=" more-goods-channel ">…</div>     <div class=" hotparts-channel ">…</div>     <div class=" more-goods-channel ">…</div>     <div class=" brandparts-channel ">…</div>     <div class=" more-goods-channel ">…</div>     <div class=" last-one ">…</div> </div> 

3. footer部分： 由上至下可以分为3块：标语f-slogan、服务f-service、f-container。

• 其页面内容代码如下：

<div id="footer">  <div class="f-slogan">…</div>  <div class="f-service">…</div>  <div class="f-container">…</div> </div> 

• 效果图如下：

  
  
  
  

• 完整代码链接如下：
  https://download.csdn.net/download/Brench/12504209