前端案例-购物网站

最新推荐文章于 2023-12-24 10:57:02 发布

戴丫丫

最新推荐文章于 2023-12-24 10:57:02 发布

阅读量762

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/DAIYA_JIE/article/details/127026329

版权

本文档详细介绍了如何搭建一个前端购物网站，包括项目初始化、导航栏制作、头部设计（包含logo、搜索框和购物车）以及首页版心的布局。通过模块化开发和SEO优化提升用户体验和搜索引擎排名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一项目搭建

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