PC端品优购电商网站的制作流程（一）

PC端品优购电商网站的制作流程（一）

本文主要针对静态电商网站制作流程进行概述

---

前言

电商类网站比较综合，需要大量的布局技术，通过该项目能够复合、总结提高HTML+CSS的布局技术。另一方面写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知。

---

以下是本篇文章正文内容

一、品优购项目搭建

1.基础文件夹的创建

说明	名称
项目文件夹	shopping
样式类图片文件夹	images
样式文件夹	css
产品类图片文件夹	upload
文体类文件夹	fonts
脚本文件夹	js

产品类图片文件夹主要针对经常更换的产品进行创建的文件夹，方便后期的产品的更换和管理。

2.项目文件的创建

说明	名称
首页	index,html
CSS初始化样式文件	base.css
CSS公共样式文件	common.css
…	…

网页首页一定以index.html命名。

3.初识模块化开发

所谓的模块化：将一个项目按照功能划分，一个功能一个模块，互不影响。
模块化开发具有重复使用、更换方便等优点。
比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，方便重复使用。

4.网站favcion图标（网页标题图标）

一、利用第三方转换网站将图标转换成ico图标
二、将favicon图标放到网站根目录下（与index.html同级）
三、HTML页面引入favicon图标

<link rel="此处由自己命名" href="ico图标地址">

5.初识SEO（搜索引擎优化）

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索
引擎内自然排名的方式。
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提
高网站的知名度。

 <title>网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）</title>
    <meta name="description"content="简要说明我们网站主要是做什么的。
">
    <meta name="keywords" content="页面关键词，采用关键词1,关键词2的形式">

二、品优购首页制作

1. 快捷导航 shortcut 制作

简单结构：shortcut（通栏大盒子）>w（版心）>盒子左浮动+盒子右浮动
左浮动盒子=ul>li>a
右浮动盒子=ul>li>a
代码结构如下：

<div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

2.header 制作

简单结构：header+w（此处使用H5新增标签与版心配合使用）>logo（盒子1）+search（盒子2）+hotwords（盒子3）+shopcar（盒子4）
技术要点：
1.盒子1~4采用定位制作
2.logo盒子符合SEO优化，采用h1>a
①a链接里面要放文字（网站名称）
②文字不显示出来：font-size: 0;
③给链接一个 title 属性，鼠标放到 logo 上就有提示文字
3.我的购物车前后使用双伪元素（before+after）采用icomoon字体实现
4.我的购物车右上角角标采用定位＋ border-radius: 7px 7px 7px 0;（左下角不是圆角，其余三个是圆角）
代码结构如下：

 <header class="header w">
        <div class="logo">
            <h1><a href="index.html" title="品优购">品优购</a></h1>
        </div>
        <div class="search">
            <input type="search" name="" id="" placeholder="9块9带回家！"><button>搜索</button>
        </div>
        <div class="hotwords"></div>
        <div class="shopcar">
            <a href="#">我的购物车</a>
            <i class="count"></i>
        </div>

    </header>

3.nav 导航制作

简单结构：nav（H5新标签）>w>dropdown（盒子左浮动）+navitems（盒子右浮动）
dropdown>dt（上盒子）+dd（下盒子）
代码结构如下：

<nav class="nav">
        <div class="w">
            <div class="dropdown fl">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a> </li> 
                    </ul>
                </div>
            </div>
            <div class="navitems fl">
                <ul>
                    <li><a href="#">服装城</a></li>
                </ul>
            </div>
        </div>
    </nav>

dropdown盒子，根据相关性里面包含 .dt 和 .dd 两个盒子

4.footer 底部制作

简单结构：footer（H5新标签）>w>mod_service（服务模块）+mod_help（帮助模块）+mod_copyright（版权模块
）
mod_service>ul>li>h5+div>（h4+p）
mod_help>dl>dt+dd
mod_copyright>links+copyright
技术要点：
mod_service中的h5使用浮动，后续文字不需要浮动即可形成文字环绕
代码结构如下：

 <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="links">
                </div>
                <div class="copyright">
                </div>
            </div>
        </div>
    </footer>

三、未完待续

第一次发文章，有点紧张…
品优购链接如下：
品优购链接