品优购项目搭建

常见文件夹

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

常见主页和样式文件

首页 index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>品优购</title>
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="./css/base.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="./css/common.css">
</head>
<body>
  品优购
</body>
</html>

css初始化样式文件 base.css

/* 所有元素内外边距清零 */
* {
  margin: 0;
  padding: 0;
  /* css盒子模型更改 */
  box-sizing: border-box;
}
/* em,i不倾斜 */
em,
i {
  font-style: normal;
}
/* 去掉li的小圆点 */
li {
  list-style: none;
}
img {
  /* 照顾低版本浏览器 如果图片外面包含了链接会有边框问题 */
  border: 0;
  /* 取消底部有空白间隙 */
  vertical-align: middle;
}
/* 鼠标经过按钮时，鼠标变成小手 */
button {
  cursor: pointer;
}
/* 链接文本取消下划线 */
a {
  color: #666;
  text-decoration: none;
}
/* 鼠标经过链接时显示红色 */
a:hover {
  color: #c81623;
}
/* 按钮，输入框字体 */
button,
input {
  /* '\5B8B\4F53' 宋体的Unicode编码，避免浏览器CSS代码出现乱码问题 */
  font-family: Microsoft YaHei, heiti SC, tahoma, arial, Hiragino SansGB, '\5B8B\4F53', sans-serif;
}
/* body默认背景颜色，字体，颜色 */
body {
  /* CSS3康锯齿，让文字显示更加清晰 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, heiti SC, tahoma, arial, Hiragino SansGB, '\5B8B\4F53', sans-serif;
  color: #666;
}
/* 元素隐藏 */
.hide,
.none {
  display: none;
}
/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: "";
  height: 0;
}
.clearfix {
  *zoom: 1;
}

css公共样式文件 common.css

/* 公共样式 */
.w {
  width: 1200px;
  margin: 0 auto;
}

品优购 项目搭建

常见文件夹

常见主页和样式文件

品优购项目搭建