项目目录
xtx-pc
- images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
- uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
- iconfont 文件夹：字体图标素材
- css 文件夹：存放 CSS 文件（link 标签引入）
base.css ：基础公共样式
common.css ：各个网页相同模块的 重复 样式，例如：头部、底部
index.css ：首页 CSS 样式
index.html ：首页 HTML 文件
准备工作
SEO 三大标签
SEO ： 搜索引擎优化 ，提升网站百度搜索排名
提升 SEO 的常见方法：
1. 竞价排名
2. 将网页制作成 html 后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. ……
网页头部 SEO 标签：
• title ：网页标题标签
• description ：网页描述
• keywords ：网页关键词
Favicon 图标
Favicon 图标：网页图标，出现在 浏览器标题栏 ，增加网站辨识度。
图标： favicon.ico ，一般存放到网站的 根目录 里面
<!-- 将其引入 用快捷键 link:favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
布局网页
版心
wrapper 版心宽度：1240px
快捷导航（shortcut）
结构：通栏 > 版心 > 导航 ul
布局： flex-end
头部（header）
结构：.header > logo + 导航 （nav）+ 搜索 （search） + 购物车 （cart）
<!-- logo --><div class="logo"><!-- h1 a 标签里面加文字 为了提升搜索排名 --><h1><a href="#">小兔鲜儿</a></h1></div>.header .search input {/* 浏览器优先生效 input 标签的默认宽度，所以 flex:1 不生效 *//* 解决方法：重置input 默认宽度 width:0 */flex: 1px;width: 0;
}.header .cart i {/* 子绝父相 弄清除谁是父级 */position: absolute;top: 1px;/* 不用 right:0 原因：如果文字多了，会向左撑开 *//* left 如果文字多向右撑开就符合 */left: 15px;padding: 0 6px;height: 15px;background-color: #E26237;border-radius: 8px;font-size: 14px;color: #FFFEFE;line-height: 15px;
}底部（footer）
结构：通栏 > 版心 > 服务（service）+ 帮助中心（help）+ 版权（copyright）
注意：以上代码样式均写到 comment.css 中
banner
结构：通栏 > 版心 > 轮播图 （ ul.pic ）+ 侧导航 （subnav > ul）+ 圆点指示器 （ol）
布局： 定位 （ 子绝父相 ）
/* 图片 */
.banner .pic {display: flex;/* flex 布局，父级宽度不够，子级被挤小了，就加大父级宽度为子级的n倍 */width: 3720px;
}
banner – 圆点
结构：ol > li > i（li 是大圆，i 是小圆）
/* 选中时效果：li半透明 i 白色 */
.banner ol li:hover {background-color: rgba(255,255,255,.5);
}
.banner ol i:hover {background-color: #fff;
}新鲜好物（goods）
结构： 标题 （title） + 内容 （bd）
提示：多区域样式共用
/* 新鲜好物 */
/* 标题-公共样式 减少代码量*/
.title {display: flex;justify-content: space-between;margin-top: 40px;margin-bottom: 30px;height: 42px;/* background-color: pink; */
}
.title .left {display: flex;/* line-height: 42px; */
}
.title .left h3 {margin-right: 35px;font-size: 30px;}
.title .left p {align-self: flex-end;color: #A1A1A1;
}
.title .right .more {line-height: 42px;color: #A1A1A1;
}
.title .right .iconfont {margin-left: 10px;
}热门品牌（brand）
标题结构：左侧（left）+ 右侧箭头（显示在标题外部： 定位 ）
生鲜（fresh）
标题结构：
右侧（right）> 菜单（ul） + 查看全部
内容（content）：
.left + .right > 商品（ul）
最新专题（topic）
