目标

能够独立完成小涵购首页制作
能够独立完成小涵购购列表页制作
能够独立完成小涵购注册页制作
能够把小涵购网站部署上线

1. 项目规划

1.1网站制作流程

客户沟通，指定方案
签订合同
预付定金
初稿审核
前台页面设计，后台功能开发(主要是这一部分
)
测试验收
上线培训
后期维护

1.2 项目整体介绍

项目名称：小涵购
项目描述：小涵购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作

1.3 项目学习目的

电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
复习总结提高之前的布局技术
了解实际开发中的页面开发流程
为移动端做铺垫

1.4 开发工具以及技术栈

开发工具

VScode，ps，主流游览器

技术栈

利用HTML5 + CSS3手动布局，可以大量使用H5新增标签和样式
采取结构与样式相分离，模块化开发
良好的代码规范有利于团队更好的开发协作，提高代码质量，因此项目里面，请遵循以下代码规范。

1.5 小结

整体有3个页面（制作首页，列表页，注册页）
学习目的（锻炼布局技术）
开发工具以及技术栈（切图用ps，代码用vscode，测试用chrome，大量使用html5+css3）

2. 首页制作

网站的首页一般都是使用index命名，比如index.html 或者index.php。

我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。

2.1 常用模块类名命名

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwrods
导航	nav
导航左侧	dropdown包含.dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

此表来源黑马pink老师~

2.2 快捷导航栏 shortcut 制作

注意行高，会继承给里面的子盒子
里面包含版心的盒子
版心盒子里面包含左边左浮动
右边盒子右浮动

2.21左侧区域

细节：

使用nbsp作为空格
ul里的两个小li使用浮动

    <!-- 快捷导航栏模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>小涵购欢迎你!&nbsp;</li>
                    <li><a href="#">请登录</a>&nbsp;<a href="#" class="style_red">免费注册</a></li>
                </ul>
            </div>
            <div class="fr">abc</div>
        </div>
    </section>

2.22 导航栏右侧区域

细节：

小竖线用 li 做，给偶数的 li 加上宽高背景颜色，一个 margin 值隔开
用vue的element ui 做了一个小三角

2.3 头部区域 header 制作

总共分为四个部分

盒子要有高度
1号盒子logo定位
2号盒子search搜索定位
3号盒子hotwrods热词模块定位
4号盒子shopcar 购物车模块

2.31 logo部分

实际开发中，logo要符合seo优化

logo里面要放入h1标签，提权，告诉引擎这里很重要
h1里面要放入链接，可以返回首页的，背景图片给链接
为了搜索引擎收录我们，我们链接里面要放文字(网站名称），但是文字不要显示出来。
1. 方法一：text-indent移到盒子外面( text-indent:-9999px)，然后overflowhidden，淘宝的做法。
2. 方法二：直接给font-size:0;就看不到文字了，京东的做法。
最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。

2.32 搜索模块

使用element-ui ，用绝对定位到需要的位置，更改了border的颜色

2.33 热词模块

一个盒子里绝对定位，放上a的链接，用marin隔开

2.34 购物车模块

一个盒子，绝对定位到要的位置，加上边框和背景颜色

图标用element-UI 加上去

最后去掉背景色，总的效果

项目代码：

电商网站的制作(一) ｜8月更文挑战

目标

目录