一品优购项目介绍与环境搭建(上)

Posted 上善若水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一品优购项目介绍与环境搭建(上)相关的知识,希望对你有一定的参考价值。

一、目标

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

二、规划

2.1、网站制作流程

image.png

2.2、品优购项目整体介绍

  • 项目名称:品优购
  • 项目描述:品优购是一个电商网站,我们要完成PC端首页、列表页、注册页面的制作。image.png

2.3、学习目的

  1. 电商类网站比较综合,里面需要大量的布局技术,包括布局方式、常见效果以及周边技术。
  2. 品优购项目能复习、总结、提高基础班所学布局技术。
  3. 写完品优购项目,能对实际开发中 制 作 P C 端 页 面 流 程 \\color{red}{制作PC端页面流程} PC有一个整体的感知。
    4.为后期学习移动端项目做铺垫。

2.4、开发工具以及技术栈

  1. 开发工具
    VScode、Photoshop(fw)、主流浏览器(以Chrome浏览器为主)
  2. 技术栈
  • 利用html5+CSS3手动布局,可以大量使用H5新增标签和样式。
  • 采取结构与样式相分离,模块化开发
  • 良好的代码规范有利于团队更好的开发协作,提高代码质量,因此品优购项目里面。请遵守代码规范。

总结

  1. 品优购项目整体介绍(制作首页、列表页、注册页三个页面)
  2. 品优购项目学习目的(里面包含技术较多,能够极大锻炼我们布局技术)
  3. 开发工具以及技术栈(切图用ps,代码用Vscode、测试用chrome、大量使用HTML5+CSS3)

2.5、项目搭建

  1. 需要创建如下文件夹
名称说明
项目文件夹shoping
样式类图片文件夹images
样式文件夹css
产品类图片文件夹upload
字体类文件夹fonts
脚本文件夹js
  1. 需要创建如下文件:
名称说明
首页index.html
css初始化样式文件base.css
css公共样式文件common.css

有些网站初始化不太长提倡 * { margin:0;padding:0;}
比如新浪:

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
    margin: 0;
    padding: 0
}

image.png
css初始化样式文件
base.css

/* 把我们所有标签的内外边距清零 */
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\\5B8B\\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

以上是关于一品优购项目介绍与环境搭建(上)的主要内容,如果未能解决你的问题,请参考以下文章

前端项目品优购上集完整笔记和源码!万字教程,肝了!

HTML+CSS大项目1:品优购项目笔记+源码(万字收藏)

001 -- 品优购项目简单介绍

一品达通用权限系统__项目概述与Spring Boot Starter介绍

一品达通用权限系统__项目概述与Spring Boot Starter介绍

一品达通用权限系统__项目概述与Spring Boot Starter介绍