1.案例——轮播图
1.1 javascript
作用：点击，不需要跳转页面，但又需要交互效果的，使用 'javascript:;'
<a href="javascript:;" class="next">
1.2 position: absolute;
作用：使用posistion：absolute，就不用再写‘display: block’来将行内元素转为块级元素，因为：display：block加了绝对定位，就具备行内快的特性
1.3 transform
transform: translate(x, y)： transform: translate(0, -50%);
或者想省略x轴的书写，可写作：
transform: translateY(y)： transform: translateY(-50%);
1.4 半透明图标
1.5 提高代码复用性（使用并级选择器）
左按钮与右按钮多行代码重复，为提高代码复用性，则将公共部分抽取出来
1.6 显示与隐藏
显示： display：block(既能转化成块级元素，又能将其显示出来)//也可写作：display:inlineblock
隐藏： display:none(不占位置)
1.6.1 隐藏1（display：none）（开发常用）
位置不会保留，后一个盒子会占据前一个盒子的位置
1.6.1 隐藏1（visibility：hidden）
位置会保留，后一个盒子不会占据前一个盒子的位置(开发不常用)
2 案例——小兔鲜儿
2.1 创建项目目录+引入初始文件
目录：
引入初始化文件
2.2 SEO 三大标签（重点、不难）
<!-- T、D、K（利于搜索引擎优化） -->
<title>小兔鲜-新鲜、惠民、快捷</title>
<meta name="description" content="小兔鲜官网，致力于打造全球最大的食品、生鲜电商购物平台">
<meta name="keywords" content="小兔鲜,食品，生鲜，服装，家电，电商，购物">
2.3 Favicon 图标（重点、不难）
Favicon一般放置根目录下
<!-- 引入favicon小图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
结果：
2.4 公共样式和变量
2.4.1 公共样式
作用 ：减少代码量，相同的代码写在公共的css中（即：common.css）
在html中引入公共样式文件（common.css）
2.4.2 CSS变量
声明： 声明一个自定义属性，属性名需要两个减号（--）开始，属性值则可以是任何有效的CSS值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS变量</title>
<style>
/* 声明变量 */
:root {
--myColor: red;
}
/* 使用变量 */
.box {
color: var(--myColor);
}
</style>
</head>
<body>
<div class="box">文字</div>
</body>
</html>
结果：
2.5 顶部
2.5.1 定部导航
/* 顶部快捷导航栏 */
.shortcut {
height: 52px;
background-color: #333;
/* line-height: 31px; */
}
.shortcut .wrapper {
line-height: 52px;
background-color: pink;
display: flex;
/* 让这个盒子里的元素都靠右对齐(靠左则是justify-content: flex-start) */
justify-content: flex-end;
}
2.5.2 快捷导航链接制作
/* 设置li的边距以及给每个li设置竖线 */
.shortcut .wrapper ul li a {
font-size: 14px;
color: #fff;
/* 设置内边距 */
padding: 0 15px;
border-right: 1px solid #999;
}
/* 但是将最后一个li的竖线去掉 */
.shortcut .wrapper ul li:last-child a {
border-right: 0;
}
结果：
2.5.3 鼠标经过时，链接变色为'2.4.2'中的颜色
结果：
2.5.3 在‘手机版’前显示手机字体
2.使用文件中已下载的字体代码
3.设置手机图形字体的样式（重点）
结果：
2.6 头部模块
2.6.1 logo盒子
<body>
<!-- 头部开始 -->
<!-- 快捷导航栏 -->
<div class="shortcut">
<div class="wrapper">
<ul>
<li><a href="#">请先登录</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">在线客服</a></li>
<li><a href="#">
<i class="iconfont icon-mobile-phone"></i>手机版
</a></li>
</ul>
</div>
</div>
<!-- 头部结束 -->
<div class="header wrapper">
<!-- logo盒子 -->
<div class="logo">
<!-- 为了提高网站点击率 -->
<h1><a href="./index.html" title="小兔鲜儿">小兔鲜儿</a></h1>
</div>
</div>
</body>
.header .logo a {
display: block;
/* width: 100%;? */
/* 因为转换成了块级元素，所以可以只设置宽度 */
height: 88px;
background: url(../images/logo.png);
/* 第一种隐藏文字的方法*/
font-size: 0;
/* 第二种隐藏文字的方法（淘宝、小米做法）*/
正值就是往右走，负值就是往左走
text-indent:-999999em
/*保险起见，第二种方法在文字出盒子后，还会隐藏文字*/
overflow:hideen
}
结果：
2.6.2 导航nav部分
制作网页导航统一：nav>ul>li>a
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
/* nav */
.header .nav ul {
display: flex;
/* background-color: pink; */
/* 上右下左 */
margin: 26px 0 0 41px;
}
.header .nav ul li a {
display: block;
line-height: 42px;
margin-right: 47px;
}
/* 鼠标经过样式 */
.header .nav ul li a:hover {
color: var(--lv);
/* 设置下划线颜色 */
border-bottom: 2px solid var(--lv);
}
结果：
2.6.3 search搜索模块
.search {
position: relative;
width: 220px;
height: 40px;
/* background-color: pink; */
margin-top: 22px;
}
.search i {
/*给i加绝对定位，因为i和input是兄弟关系，所以给i加绝对定位后，i就不占位置，在设定好父盒子search大小的前提下，点击input将其变长，也不会让i和input的位置发生变化（层级）/*
position: absolute;
left: 0;
top: 5px;
font-size: 20px;
color: #ccc;
/* 鼠标变成小手 */
cursor: pointer;
}
.search input {
width: 170px;
height: 40px;
/* 通过调整内边距，调整字体的位置 */
padding-left: 20px;
/* 底部的灰色边框 */
border-bottom: 2px solid #F4F4F4;
/* 点击时input输入框长度变化加过渡 */
transition: all .3s;
}
/* 修改placeholder里面的文字样式 */
.search input ::placeholder {
color: #ccc;
}
/* input获得光标 长度就变为宽220px*/
.search input:focus {
width: 220px;
}
<!-- search -->
<div class="search">
<i class="iconfont icon-search"></i>
<input type="text" placeholder="请输入搜索内容"></input>
</div>
结果：
1.实现了点击搜索框，搜索框变长（使用transition过渡）
2.实现了鼠标移动至‘搜索’字体图像，变为小手
3.使用‘.search input ::placeholder’将内部文字样式修改
2.7 购物车模块
<!-- car -->
<div class="car">
<i class="iconfont icon-cart-full"></i>
<span>2</span>
</div>
/* car */
.car {
position: relative;
margin-top: 18px;
}
/*购物车图标大小*/
.car i {
font-size: 36px;
}
/*购物车物品数量*/
.car span {
position: absolute;
top: 0;
left: 22px;
padding: 0 8px;
background-color: #E26237;
color: #fff;
border-radius: 11px;
}
结果：
