## 一、效果图
* PC 模式
* 移动模式
## 二、页面结构
```
<!-- 顶部 -->
<header class="header-container">
<div class="container">
<div class="row">
<!-- logo -->
<div class="header-logo-container col-8 col-md-3">
<a href="./index.html" class="header-logo">
<img src="img/logo.svg" alt="logo">
</a>
</div>
<!-- 隐藏的按钮 只在宽度小于768px时显示 -->
<div class="header-btn-container col-4 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<!-- 导航 只在宽度大于768px时显示 -->
<nav class="header-nav-container col-md-9 d-none d-md-block">
<ul class="header-nav">
<li class="header-nav-item">
<a href="###" class="header-nav-link">手机&平板</a>
</li>
<li class="header-nav-item">
<a href="###" class="header-nav-link">电视&影音</a>
</li>
<li class="header-nav-item">
<a href="###" class="header-nav-link">生活家电</a>
</li>
<li class="header-nav-item">
<a href="###" class="header-nav-link">电脑/办公/存储</a>
</li>
<li class="header-nav-item">
<a href="###" class="header-nav-link">网上商城</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- 手机模式 隐藏的菜单 默认情况下，大于768px 隐藏起来的-->
<nav class="nav-container d-md-none" id="nav">
<ul class="container">
<li><a href="###" class="nav-link">手机&平板</a></li>
<li><a href="###" class="nav-link">电视&影音</a></li>
<li><a href="###" class="nav-link">生活家电</a></li>
<li><a href="###" class="nav-link">电脑/办公/存储</a></li>
<li><a href="###" class="nav-link">网上商城</a></li>
</ul>
</nav>
<!-- 大图 -->
<div class="slider-container">
<div class="container">
<div class="row">
<!-- 文字信息 -->
<div class="slider-text-container col-md-5">
<h3 class="slider-title">Galaxy S9｜S9+</h3>
<h4 class="slider-subtitle">冰蓝 焕新上市</h4>
<div class="slider-btns">
<a href="###" class="btn-rounded">了解更多</a>
<a href="###" class="btn-rounded">立即购买</a>
</div>
</div>
<!-- 图片 -->
<div class="col-md-7">
<img src="img/1.png" alt="cellphone">
</div>
</div>
</div>
</div>
<!-- 产品 -->
<div class="product-container">
<div class="container">
<div class="row">
<!-- 三个产品信息 -->
<div class="col-md">
<a href="###" class="product-item">
<img src="img/2-1.jpg" alt="cellphone" class="product-img">
</a>
</div>
<div class="col-md">
<a href="###" class="product-item">
<img src="img/2-2.jpg" alt="cellphone" class="product-img">
</a>
</div>
<div class="col-md">
<a href="###" class="product-item">
<img src="img/2-3.jpg" alt="cellphone" class="product-img">
</a>
</div>
</div>
</div>
</div>
```
## 三、样式结构
* 基础样式
```
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-size: 14px;
}
li {
list-style: none;
}
a {
font-size: 14px;
color: #363636;
text-decoration: none;
}
a:hover {
color: #1428a0;
}
img {
vertical-align: top;
width: 100%;
border: none;
}
```
* 页面样式
```
/*-- 布局 start --*/
/* header */
.header-container {
background-color: #fff;
border-bottom: 1px solid #dadada;
}
.header-logo-container,
.header-btn-container,
.header-nav-container {
height: 64px;
}
.header-btn-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* nav */
.nav-container {
overflow: hidden;
position: relative;
top: -1px;
height: 0;
border-bottom: 1px solid #dadada;
transition: height 0.5s;
}
.nav-container-extended {
top: 0;
height: 201px;
}
/* slider */
.slider-container {
margin-top: 20px;
margin-bottom: 20px;
}
.slider-container .row {
background-color: #f5f5f5;
margin-left: 0;
margin-right: 0;
}
@media (min-width: 768px) {
.slider-container .row {
display: flex;
align-items: center;
}
}
.slider-text-container {
padding: 20px 0;
}
/* product */
.product-container {
margin-bottom: 20px;
}
/*-- 布局 end --*/
/*-- 组件 start --*/
/* btn-toggle */
.btn-toggle {
padding: 10px;
background-color: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-toggle:hover {
background-color: #f9f9f9;
}
.btn-toggle:hover .btn-toggle-bar {
background-color: #1428a0;
}
.btn-toggle-bar {
display: block;
width: 24px;
height: 4px;
background-color: #363636;
border-radius: 2px;
}
.btn-toggle-bar + .btn-toggle-bar {
margin-top: 4px;
}
/* btn-rounded */
.btn-rounded {
display: inline-block;
padding: 10px 30px;
background-color: transparent;
border: 1px solid #000;
border-radius: 30px;
color: #000;
font-size: 16px;
font-weight: bold;
transition: all 0.3s;
}
.btn-rounded:hover {
background-color: #000;
color: #fff;
}
/*-- 组件 end --*/
/*-- 内容 start --*/
/* header */
.header-logo {
display: flex;
align-items: center;
width: 136px;
height: 100%;
}
.header-nav,
.header-nav-item,
.header-nav-link {
height: 100%;
}
.header-nav {
display: flex;
justify-content: flex-end;
font-size: 14px;
}
.header-nav-item {
margin-left: 24px;
}
.header-nav-item:first-child {
margin-left: 0;
}
.header-nav-link {
display: flex;
align-items: center;
font-weight: bold;
}
/* nav */
.nav-link {
display: block;
height: 40px;
line-height: 40px;
font-weight: bold;
}
/* slider */
.slider-title,
.slider-subtitle,
.slider-btns {
margin-bottom: 20px;
text-align: center;
}
.slider-title {
font-size: 30px;
}
.slider-subtitle {
font-size: 20px;
font-weight: normal;
}
.slider-btns .btn-rounded {
margin-right: 10px;
margin-bottom: 10px;
}
.slider-btns .btn-rounded:last-child {
margin-right: 0;
}
/* product */
.product-item {
overflow: hidden;
display: block;
}
.product-img {
transition: transform 1s;
}
.product-img:hover {
transform: scale(1.2);
}
/*-- 内容 end --*/
```
* 响应式样式
```
.container {
width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/*sm*/
@media (min-width: 576px) {
.container {
width: 540px;
}
}
/*md*/
@media (min-width: 768px) {
.container {
width: 720px;
}
}
/*lg*/
@media (min-width: 992px) {
.container {
width: 960px;
}
}
/*xl*/
@media (min-width: 1200px) {
.container {
width: 1140px;
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.col, .col-sm, .col-md, .col-lg, .clo-xl,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
.col-1 {
flex: 0 0 8.33333333%;
}
.col-2 {
flex: 0 0 16.66666667%;
}
.col-3 {
flex: 0 0 25%;
}
.col-4 {
flex: 0 0 33.33333333%;
}
.col-5 {
flex: 0 0 41.66666667%;
}
.col-6 {
flex: 0 0 50%;
}
.col-7 {
flex: 0 0 58.33333333%;
}
.col-8 {
flex: 0 0 66.66666667%;
}
.col-9 {
flex: 0 0 75%;
}
.col-10 {
flex: 0 0 83.33333333%;
}
.col-11 {
flex: 0 0 91.66666667%;
}
.col-12 {
flex: 0 0 100%;
}
/*sm*/
@media (min-width: 576px) {
.col-sm {
flex-basis: 0;
flex-grow: 1;
}
.col-sm-1 {
flex: 0 0 8.33333333%;
}
.col-sm-2 {
flex: 0 0 16.66666667%;
}
.col-sm-3 {
flex: 0 0 25%;
}
.col-sm-4 {
flex: 0 0 33.33333333%;
}
.col-sm-5 {
flex: 0 0 41.66666667%;
}
.col-sm-6 {
flex: 0 0 50%;
}
.col-sm-7 {
flex: 0 0 58.33333333%;
}
.col-sm-8 {
flex: 0 0 66.66666667%;
}
.col-sm-9 {
flex: 0 0 75%;
}
.col-sm-10 {
flex: 0 0 83.33333333%;
}
.col-sm-11 {
flex: 0 0 91.66666667%;
}
.col-sm-12 {
flex: 0 0 100%;
}
}
/*md*/
@media (min-width: 768px) {
.col-md {
flex-basis: 0;
flex-grow: 1;
}
.col-md-1 {
flex: 0 0 8.33333333%;
}
.col-md-2 {
flex: 0 0 16.66666667%;
}
.col-md-3 {
flex: 0 0 25%;
}
.col-md-4 {
flex: 0 0 33.33333333%;
}
.col-md-5 {
flex: 0 0 41.66666667%;
}
.col-md-6 {
flex: 0 0 50%;
}
.col-md-7 {
flex: 0 0 58.33333333%;
}
.col-md-8 {
flex: 0 0 66.66666667%;
}
.col-md-9 {
flex: 0 0 75%;
}
.col-md-10 {
flex: 0 0 83.33333333%;
}
.col-md-11 {
flex: 0 0 91.66666667%;
}
.col-md-12 {
flex: 0 0 100%;
}
}
/*lg*/
@media (min-width: 992px) {
.col-lg {
flex-basis: 0;
flex-grow: 1;
}
.col-lg-1 {
flex: 0 0 8.33333333%;
}
.col-lg-2 {
flex: 0 0 16.66666667%;
}
.col-lg-3 {
flex: 0 0 25%;
}
.col-lg-4 {
flex: 0 0 33.33333333%;
}
.col-lg-5 {
flex: 0 0 41.66666667%;
}
.col-lg-6 {
flex: 0 0 50%;
}
.col-lg-7 {
flex: 0 0 58.33333333%;
}
.col-lg-8 {
flex: 0 0 66.66666667%;
}
.col-lg-9 {
flex: 0 0 75%;
}
.col-lg-10 {
flex: 0 0 83.33333333%;
}
.col-lg-11 {
flex: 0 0 91.66666667%;
}
.col-lg-12 {
flex: 0 0 100%;
}
}
/*xl*/
@media (min-width: 1200px) {
.col-xl {
flex-basis: 0;
flex-grow: 1;
}
.col-xl-1 {
flex: 0 0 8.33333333%;
}
.col-xl-2 {
flex: 0 0 16.66666667%;
}
.col-xl-3 {
flex: 0 0 25%;
}
.col-xl-4 {
flex: 0 0 33.33333333%;
}
.col-xl-5 {
flex: 0 0 41.66666667%;
}
.col-xl-6 {
flex: 0 0 50%;
}
.col-xl-7 {
flex: 0 0 58.33333333%;
}
.col-xl-8 {
flex: 0 0 66.66666667%;
}
.col-xl-9 {
flex: 0 0 75%;
}
.col-xl-10 {
flex: 0 0 83.33333333%;
}
.col-xl-11 {
flex: 0 0 91.66666667%;
}
.col-xl-12 {
flex: 0 0 100%;
}
}
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
/*sm*/
@media (min-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-sm-block {
display: block !important;
}
}
/*md*/
@media (min-width: 768px) {
.d-md-none {
display: none !important;
}
.d-md-block {
display: block !important;
}
}
/*lg*/
@media (min-width: 992px) {
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
}
/*xl*/
@media (min-width: 1200px) {
.d-xl-none {
display: none !important;
}
.d-xl-block {
display: block !important;
}
}
```
## 四、脚本行为
```
<script>
var nav = document.getElementById('nav');
var navExtendedClassName = 'nav-container-extended';
document.getElementById('btn-toggle').onclick = function() {
if (nav.classList.contains(navExtendedClassName)) { // 收起
nav.classList.remove(navExtendedClassName);
} else { // 展开
nav.classList.add(navExtendedClassName);
}
};
</script>
```
- 第一章：移动开发入门
- 第一节：概述
- 第二节：基础概念
- 第一课时：像素
- 第二课时：视口
- 第二章：Flex 布局
- 第一节：概述
- 第二节：容器属性
- 第一课时：flex-direction 属性
- 第二课时：flex-wrap 属性
- 第三课时：flex-flow 属性
- 第四课时：justify-content 属性
- 第五课时：align-items 属性
- 第六课时：align-content 属性
- 第三节：项目属性
- 第一课时：order 属性
- 第二课时：flex-grow 属性
- 第三课时：flex-shrink 属性
- 第四课时：flex-basis 属性
- 第五课时：flex 属性
- 第六课时：align-self 属性
- 第四节：Flex 实例
- 第一课时：常见页面布局
- 第三章：响应式布局
- 第一节：概述
- 第二节：媒体查询
- 第一课时：概述
- 第二课时：响应式设计
- 第三节：栅格系统
- 第一课时：概述
- 第二课时：案例分析
- 第三课时：Bootstrap 简介
- 第四节：响应式案例
- 第一课时：三星首页
- 第四章：移动端适配
- 第五章：移动端事件
- 第一节：概述
- 第二节：touch 事件
- 第三节：触摸事件对象
- 第四节：其他事件
- 第五节：移动端幻灯片
- 第六章：移动端常见问题
- 第一节：浏览器兼容性
- 第二节：移动端动画
- 第三节：300ms 延迟
- 第四节：文字溢出省略
- 第五节：水平居中和垂直居中
- 第七章：项目案例
- 第一节：美团外卖
- 第一课时：首页
- 第二课时：订单页面
- 第三课时：我的页面
- 第四课时：详情页面
- 第五课时：购物车页