前端案例-购物网站

一 项目搭建

1.1 建好相应的文件夹

1.2 引入初始化代码

1.3 模块化开发

    <link rel="stylesheet" href="css/base.css"> 
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入网站favicon图标 -->
    <link rel="shortcut icon" href="web_logo.ico" type="image/x-icon"/>

1.4 SEO搜索引擎优化

添加title，2个meta标签（name=“description”、name=“keywords”）能提高网站排名。

效果图：

二 首页制作-导航栏

2.1效果图：

2.2模块命名

2.3快捷导航

主体部分：

  <!-- 顶部通栏 -->
    <div class="shortcut">
        <!-- 版心 -->
        <div class="w">
            <!-- 版心里面左边一个盒子 -->
            <div class="l">
                <ul>
                    <li>聚惠买欢迎您！&nbsp;</li>
                    <li><a href="#"> 请登录&nbsp;</a>
                        <a href="#" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <!-- 版心里面右边一个盒子 -->
            <div class="r">
                <!-- 加一个无序列表放导航栏 -->
                <ul class="r_nav">
                    <li>我的订单</li>
                    <li class="arrow-icon">我的聚惠买</li>
                    <li>会员中心</li>
                    <li>企业采购</li>
                    <li class="arrow-icon">关注聚惠买</li>
                    <li class="arrow-icon">客户服务</li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </div>

CSS部分：

@font-face {
   
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?a31ox8');
    src:  url('../fonts/icomoon.eot?a31ox8#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?a31ox8') format('truetype'),
      url('../fonts/icomoon.woff?a31ox8') format('woff'),
      url('../fonts/icomoon.svg?a31ox8#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
.w{
   
    width: 1200px;
    height: 41px;
    margin: 0 auto;
    background-color: rgb(252, 208, 208);
    line-height: 41px;
}

.l{
   
    float: left;
}
.r{
   
    float: right;
}
.shortcut{
   
    background-color: #d3cfcf;
    height: 41px;
}
.shortcut ul li{
   
    float: left;
}
.style_red{
   
color: #c81623;
}
.r_nav{
   
    height: 12px;
}
.r li{