# HTML 的概念
HTML (Hyper Text Markup Language) 超文本标记语言
# HTML 语法
<关键词> 内容 </ 关键词 (结束)>
例如：
<strong> 加粗显示 </strong>
注释
<!-- 注释内容 -->
# 关键词
br 换行
hr 水平分割线
h1~h6 1~6 级标题
p 段落
/*
b = strong 加粗
u = ins 下划线
i = em 倾斜
s = del 删除线
*/ // 后者突出重要性的强调语境 (视觉效果无差别)
# 媒体标签
<img> 在网页中显示图片，以下为 img 属性，每个属性之间用空格隔开
| 属性 |
说明 |
| src=" " |
填写图片路径 |
| alt=" " |
填写图片加载失败时的替换文本 |
| title=" " |
为鼠标悬停提示文字 |
| width=" " |
图片宽度，单位为像素 (仅填写其中一个时，会等比例缩放) |
| height=" " |
图片高度，单位为像素 (仅填写其中一个时，会等比例缩放) |
<audio></audio> 在网页中插入音频，以下为 audio 属性
| 属性 |
说明 |
| src=" " |
同上 |
| controls |
显示音频播放控件 |
| autoplay |
自动播放 (部分浏览器不支持) |
| loop |
循环播放 |
注：音频标签目前支持三种格式：MP3、Wav、Ogg
<video> 在网页中显示视频，以下为 video 属性
| 属性 |
说明 |
| src=" " |
同上 |
| controls |
同上 |
| autoplay |
同上 (Google 浏览器中需要配合 muted 实现静音播放) |
| loop |
同上 |
注：视频标签目前支持三种格式：MP4、WebM、Ogg
# 链接标签
<a href="./ 目标网页.html"> 文字提示 </a> 以下为超链接属性
| 属性 |
说明 |
| target=" " |
若填写_self (默认值)，覆盖原网页跳转，若填写_blank, 保留原网页跳转 |
| href=" " |
填写目标网页路径 |
注：跳转网页未写好 (不知道要跳转到哪里) 时，href 里填写 #(空链接)
# 列表标签
无序列表：
| 标签名 |
说明 |
| ul |
表示无序列表的整体，用于包裹 li 标签 |
| li |
表示无序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前默认显示圆点标识
注：ul 标签中只允许包含 li 标签，li 标签可以包含任意内容
有序列表：
| 标签名 |
说明 |
| ol |
表示有序里列表的整体，用于包裹 li 标签 |
| li |
表示有序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前默认显示序号标识
注：ol 标签中只允许包含 li 标签，li 标签可以包含任意内容
自定义列表：
| 标签名 |
说明 |
| dl |
表示自定义列表的整体，用于包裹 dt/dd 标签 |
| dt |
表示自定义列表的主题 |
| dd |
表示自定义列表的针对主题的每一项内容 |
显示特点：dd 前会默认显示缩进效果
注：dl 标签只允许包含 dt/dd 标签，dt/dd 标签可以包含任意内容
# 表格标签
基本标签：
| 标签名 |
说明 |
| table |
表格整体，可用于包裹多个 tr |
| tr |
表格每行，可用于包裹 td |
| td |
表格单元格，可用于包裹内容 |
注：标签嵌套：table > tr > td
表格属性：
| 属性名 |
属性值 |
效果 |
| border |
数字 |
边框宽度 |
| width |
数字 |
表格宽度 |
| height |
数字 |
表格高度 |
注：实际开发时针对于样式效果推荐使用 CSS 设置
表格其他标签：
| 标签名 |
作用 |
说明 |
| caption |
表格大标题 |
表示表格整体大标题，默认在表格整体顶部居中显示 |
| th |
表头单元格 |
表示一列小标题，通常用于表格第一行，默认内部文字加粗居中 |
注：caption 标签写在 table 标签内部，th 标签写在 tr 标签内部
表格结构：
| 标签名 |
说明 |
| thead |
表格头 |
| tbody |
表格内容 |
| tfoot |
表格底 |
注：不会产生网页视觉改变，但可以提高浏览器解析速度
合并单元格：
给保留的单元格添加属性：
| 属性名 |
属性值 |
说明 |
| rowspan |
合并单元格的个数 |
跨行合并，将多行的单元格垂直合并 |
| colspan |
合并单元格的个数 |
跨列合并，将多列的单元格垂直合并 |
注：同结构下才可合并，不可跨结构合并 (不可跨 thead、tbody、tfoot)
# 表单标签
写登陆、注册、搜索功能时使用
表单域标签
| <form action=" "></form> |
action 中填写数据提交的地址，此为表单的父标签 |
input 标签可以通过不同的 type=" " 属性值，展示不同的效果：
| 标签名 |
type 属性值 |
说明 |
属性名 |
说明 |
| input |
text |
文本框，用于输入单行文本 |
placeholder |
占位符。提示用户输入内容的文本 |
| input |
password |
密码框，用于输入密码 |
|
|
| input |
radio |
单选框，用于多选一 |
name |
分组。有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中 |
| input |
checkbox |
多选框，用于多选多 |
checked |
默认选中 |
| input |
file |
文件选择，用于之后上传文件 |
multiple |
多文件选择 |
| input |
submit |
提交按钮，用于提交 |
|
|
| input |
reset |
重置按钮，用于重置 |
|
|
| input |
button |
普通按钮，默认无功能，需配合 js 使用 |
value |
给按钮添加提示文字 |
注：button 可作为一个标签使用，作为标签使用时，谷歌浏览器默认为提交按钮，可以用 type 属性修改其功能。button 为双标签，可以用于包裹文字、图片等内容
selct 标签下拉菜单：
| 标签名 |
说明 |
属性 |
说明 |
| select |
下拉菜单的整体 |
|
|
| option |
下拉菜单的每一项 |
selected |
默认选中 |
textarea 文本域标签可在网页中提供可输入多行文本的表单控件
可以使用 cols、rows 属性修改文本域内可见列和可见行、但一般使用 CSS 修改
注：右下角可以拖拽改变大小、可以通过 CSS 禁用
label 标签可以用于绑定内容与表单标签的关系
| 标签名 |
属性 |
说明 |
| label |
for |
for 中填写的内容绑定 属性 id 填写内容相同的标签 |
|
|
也可以将 for 属性删除，使用 label 标签将需要绑定的内容直接包裹 |
# 语义化标签
| 标签名 |
说明 |
| div |
无语义标签，内容独占一行、配合 css 使用 |
| span |
无语义标签，内容不换行、配合 css 使用 |
| --------- |
以下标签为手机网页使用。 |
| header |
网页头部 |
| nav |
网页导航 |
| footer |
网页底部 |
| aside |
网页侧边栏 |
| section |
网页区块 |
| article |
网页文章 |
字符实体
注：网页不识别代码中连续的空格， 若要实现，需使用 & nbsp
# HTML 结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<meta name="description" content="此处填写对网页的描述，用于提升在搜索引擎中的排名">
<meta name="Keywords" content="此处填写网页关键词，用于提升在搜索引擎中的排名">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style></style>
</head>
<body>
网页内容主体
</body>
</html>
|
# CSS 的概念
CSS：层叠样式表 (Cascading style sheets)
CSS 的作用：给页面中的 HTML 标签设置样式
# CSS 语法
内嵌式：将 CSS 写在 style 标签中，style 标签一般写在 head 标签内，title 标签下面
外联式：将 CSS 写在一个单独的.css 文件中，在 title 标签下使用 link 标签引入
注：link rel=“此处填入 html 与 css 的关系 (为：stylesheet 样式表)” href=“此处填写 css 文件路径”
行内式：将 CSS 写在标签内的 style 属性内，通常配合 JS 使用
# 选择器写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
标签名{
color: red;
}
.类名{
color: red;
}
写html时，写属性class="类名"
#id属性名{
color: red;
}
写html时，写属性id="属性名"
注意：id选择器通常配合js使用，且在html中只能使用一次，多次使用是不合法的。
*{
color: red;
}
改变所有的html样式
选择名1 选择名2{
css
}
例如：
div p {
color: red;
}
只要是div下包含的p标签就会生效。
<div>
<p>变红</p>
<span><p>变红</p></span>
</div>
选择名1>选择名2{
css
}
例如：
div>p {
color: red;
}
只作用于选择名1下的最高级选择名2.
<div>
<p>变红</p>
<span><p>不变红</p></span>
</div>
选择名1,选择名2 {
css
}
将选择名1，选择名2，均执行css
p.class {
css
}
将包含class类的p标签执行css
<p class="class">执行css</p>
选择名:hover{
css
}
鼠标悬停在选择名时，执行CSS。
例如：
div:hover {
color: red;
}
<div>鼠标悬停在此时，该文字显示为红色</div>
|
结构伪类选择器
| 选择器 |
说明 |
| E:first-child{} |
匹配 E 元素中的第一个 |
| E:last-child{} |
匹配 E 元素中的最后一个 |
| E:nth-child(n){} |
匹配 E 元素中的第 n 个，n 处可填公式 |
| E:nth-last-child(n){} |
匹配 E 元素中的倒数第 n 个，n 处可填公式 |
| 公式中的 n 从 0 开始 |
公式：偶数：2n、even。奇数：2n+1、2n-1、odd |
|
公式：找到前 5 个：-n+5、找到从第 5 个往后：n+5 |
# 伪元素
(使用 css 创建标签，通常用于装饰性，不重要的小图)
| 伪元素 |
说明 |
| ::before |
在父元素内容的最前添加一伪元素 |
| ::after |
在父元素内容的最后添加一伪元素 |
示例：
1
2
3
4
5
| .exmaple::before{
content: '前缀内容';
}
|
# 浮动
float: left/right
1. 添加 float 属性的标签会脱离标准流的控制，不再占用标准流的位置
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素，但不能覆盖其内容
3. 浮动的标签默认顶对齐，可以通过 margin 修改位置
4. 浮动元素不换行，可以设置宽高。浮动后标签具有行内块的特点。
5. 浮动后的元素，不能使用 margin: 0 auto。
清除浮动给别的标签带来的影响
影响：子元素浮动时，不能撑开标准流的块。
方法 1：
在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both
方法 2：
1
2
3
4
5
6
7
8
9
|
.clearfix::after {
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
|
方法 3：
1
2
3
4
5
6
7
8
9
|
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
|
方法 4：
给父元素设置 overflow: hidden;
注：此方法也可用于外边距塌陷
# CSS 属性
# font 系列：
| 属性名 |
说明 |
| font-style |
控制字体格式，normal 为正常，italic 为斜体 |
| font-weight |
控制字体粗细，normal 正常 (400)，bold 加粗 (700)，或使用 100-900 的数字控制 |
| font-size |
控制字体大小，单位 px (像素)、谷歌浏览器默认大小是 16px |
| line-height |
控制行高，可以填数字 + px，也可以只填数字 (当前标签的 font-size 的倍数) |
| font-family |
控制字体，windows 默认微软雅黑 |
| color |
控制字体颜色 |
font 可缩写为：
font: style weight size/line-height family; 其中 style 和 weight 可省略，size/line-height 不是二选其一的意思
# text 系列：
| 属性名 |
说明 |
| text-align |
控制内容水平对齐方式，left 左对齐，center 居中，right 右对齐。 |
| text-indent |
控制段落首行缩进，单位可以是 px，也可以是 em (1em = 当前标签的 font-size 的大小) |
| text-decoration |
underline 下划线，line-through 删除线，overline 上划线，none 无装饰线 |
# background 系列：
| 属性 |
说明 |
| background-color |
控制背景颜色 |
| background-image： url (此处填写图片地址) |
控制背景图片 |
| background-repeat |
平铺背景图片，默认 repeat (平铺)，no-repeat (不平铺)，repeat-x (按 x 轴平铺，改成 y 按 y 轴) |
| background-position: 水平 垂直 |
控制背景位置，可以用英语单词 (top 上，bottom 下)，也可以使用坐标系 (单位 px) |
| background-size: 宽 高 |
取值为数字、或百分比 (相对于当前盒子的宽高)、contain、cover |
| width |
控制宽度，单位 px |
| height |
控制高度，单位 px |
background 可简写为:
background: color image repeat position 其中属性不分先后顺序，但推荐按照该顺序书写
例：background: pink url (./image.jpg) no-repeat right bottom
颜色：rgba (0,0,0,0),rgb 是红绿蓝，范围 0-255，a 是透明度，范围 0-1。
# CSS 属性通常书写顺序
1. 浮动 /display
2. 盒子模型：margin border padding 宽高背景色
3. 文字样式
# CSS 常用配置 (base.css)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font: 16px/1.5 "Helvetica Neue", Helvetica,Arial, "Microsoft Yahei", "Hiragion Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
em,
i {
font-style: normal;
}
ul,
ol {
list-style: none;
}
img {
vertical-align: middle;
}
input {
border: none;
outline: none;
color: #333;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
|
# 网页布局与 Vs Code 使用技巧
# 元素显示模式
块级元素：
独占一行，宽度默认为父级标签的 100%，允许使用 width 和 height 调整宽高
代表标签：div、p、h 系列、ul、li、dl、dt、dd、form、header、nav、footer…
行内元素：
一行可以显示多个，宽高默认由内容撑开，不可以设置宽高
代表标签：span、a、b、u、i、s、strong、ins、em、del…
行内块元素：
一行可以显示多个，允许设置宽高。若未设置宽高，则由内容撑开，无内容则不显示
代表标签：img、input、textarea、button、select…
元素显示模式转换：(目的：改变元素默认的显示特点，让元素符合布局要求)
| 属性 |
效果 |
使用频率 |
| display: block |
转换为块级元素 |
较多 |
| display: inline |
转换为行内元素 |
较少 |
| display: inline-block |
转换为行内块元素 |
较多 |
注：不允许 p 标签内嵌套 div、p、h 等块级元素。a 标签可以嵌套 a 以外的任意元素
# emmet 语法 (vs code 快速补充代码)
| 使用 |
示例 |
效果 |
| 标签名 |
div |
<div></div> |
| 类选择器 |
.red |
<div class=“red”></div> |
| id 选择器 |
#one |
<div id=“one”></div> |
| 交集选择器 |
p.red#one |
<p class=“red” id=“one”></p> |
| 子代选择器 |
ul>li |
<ul><li></li></ul> |
| 内部文本 |
ul>li |
<ul><li > 内容 </li></ul> |
| 多个创建 |
ul>li*3 |
<ul><li></li><li></li><li></li></ul> |
# CSS 特性
# 继承性 (inherit)
子元素有默认继承父元素样式的特点
可以继承的常见属性 (文字控制属性都可以继承)
如：color font text line-height…
注：a 标签的 color 会继承失效，h 系列标签的 font-size 会继承失效
# 层叠性 (cascade)
给同一个标签设置不同的样式，后语句会覆盖前语句
样式冲突时，只有选择器优先级相同时，才能通过层叠性判断结果
# 优先级 (priority)
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important
注：!important 写在属性值的后面，分号的前面。!imoprtant 不能提升继承的优先级，继承的优先级永远最低。实际开发不推荐使用
# 盒子模型
盒子尺寸 = width/height + 内边距 + 边框线
| 属性名 |
说明 |
形式 |
| padding |
内边距。标签有默认内外边距，通常先清 0 |
|
| border |
边框线 |
border (- 方向): 10px solid red;(不分先后) |
| margin |
外边距。margin 与 padding 无法改变行内标签的垂直位置 |
|
| box-sizing: border-box |
使盒子尺寸 = width/height (内减模式) |
|
# 定位与装饰
# 标准流、浮动、定位显示关系
标准流 < 浮动 < 定位
默认情况下：同级定位下、后标签覆盖前标签
使用 z-index: int; 改变定位层数，默认为 0，数字越大，覆盖级别越高
# 写法：
属性名：position
| 定位方式 |
属性值 |
| 静态定位 |
static |
| 相对定位 |
relative |
| 绝对定位 |
absolute |
| 固定定位 |
fixed |
相对定位：
1. 仍占有原来的位置。
2. 不脱标 (标准流)。
3. 改变位置参照自己原来的位置。
4. 不改变标签本身的显示模式 (块、行内、行内块)
绝对定位：
1. 如果有已经定位的父级元素，以该父级元素为参照物进行定位。若无，则以浏览器窗口为参照进行定位。
2. 脱标 (标准流)
3. 改变标签本身的显示模式、具备行内块的特点
固定定位：
1. 相对于浏览器进行定位移动。
2. 脱标 (标准流)
3. 位置随浏览器滚动而移动。
4. 改变标签本身的显示模式、具备行内块的特点
# 偏移值
| 方向 |
属性名 |
属性值 |
含义 |
| 水平 |
left |
数字 + px |
距离左边的距离 |
| 水平 |
right |
数字 + px |
距离右边的距离 |
| 垂直 |
top |
数字 + px |
距离上边的距离 |
| 垂直 |
bottom |
数字 + px |
距离下边的距离 |
水平方向优先以 left 为准，垂直方向优先以 top 为准
# 装饰
# 对齐问题：
| 属性 |
属性值 |
说明 |
| vertical-align |
baseline |
默认，基线对齐 |
| 用于处理标签对不齐 |
top |
顶部对齐 |
| 浏览器把行内和行内块标签当作文字处理 |
middle |
中部对齐 |
| 默认基线对齐 |
bottom |
底部对齐 |
# 光标指针：
| 属性 |
属性值 |
效果 |
| cursor |
default |
默认值，通常是箭头光标 |
|
pointer |
点击光标，提示用户可以点击 |
|
text |
工字光标，提示用户可以选择文字 / 输入内容 |
|
move |
十字光标，提示用户可以移动 |
# 圆角边框：
| 属性 |
取值 |
说明 |
| border-radius |
数字 + px (圆角圆的半径)、百分比 |
从左上角开始赋值、顺时针赋值、未赋值看对角 |
取值写 50% 为正圆 (盒子本身需要是正方形)、取值最大为 50%
取值写盒子高度的一半为胶囊 (盒子本身需要是长方形)
# 溢出部分显示效果
| 属性 |
属性值 |
效果 |
| overflow |
visible |
默认值，溢出部分可见 |
|
hidden |
溢出部分隐藏 |
|
scroll |
无论是否溢出，都显示滚动条 |
|
auto |
根据是否溢出，自动显示或隐藏滚动条 |
# 元素本身隐藏
| 属性 |
效果 |
| visibility: hidden |
隐藏元素，仍占有元素位置 (使用较少) |
| display: none |
隐藏元素，不占位 (使用较多) |
# 元素整体透明度
| 属性 |
属性值 |
说明 |
| opacity |
0-1 的数字 |
1 完全不透明，0 完全透明 |
# 精灵图
作用：将多张小图合成为一张大图，一次发送给用户，减小服务器压力，提高页面加载速度
新建一个盒子，将精灵图设置为盒子的背景图，使用 background-position 改变位置
# 盒子阴影
| 属性 |
参数 |
作用 |
| box-shadow |
h-shadow |
必填，水平位移量，允许负值 |
|
v-shadow |
必填，垂直位移量，允许负值 |
|
blur |
可选，模糊度 |
|
spread |
可选，阴影扩大 |
|
color |
可选，阴影颜色 |
|
inset |
可选，将阴影改为内部阴影 |
# 过渡
作用：让元素样式缓慢变化，常配合 hover 使用，增强网页交互体验
| 属性名 |
参数 |
取值 |
| transition |
过渡的属性 |
all: 所有能过渡的属性都过渡、属性名 (如：width 只有 width 有过渡) |
| 加给变化的标签而非 hover |
过渡的时长 |
数字 + s (秒) |
# 综合案例 - 小兔鲜电商
案例完成文件 (html 中用到的图片文件也在里面)：阿里云盘下载
提取码：8d4o
该案例来自黑马程序员
# css 文件夹
# base.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| //base.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font: 16px/1.5 "Helvetica Neue", Helvetica,Arial, "Microsoft Yahei", "Hiragion Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
em,
i {
font-style: normal;
}
ul,
ol {
list-style: none;
}
img {
vertical-align: middle;
}
input {
border: none;
outline: none;
color: #333;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
|
# common.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
| //common.css
.wrapper {
width: 1240px;
margin: 0 auto;
}
.shortcut {
height: 52px;
background-color: #333;
}
.shortcut .wrapper li {
float: left;
line-height: 52px;
}
.shortcut .wrapper a {
padding: 0 16px;
border-right: 1px solid #666;
font-size: 14px;
color: #dcdcdc;
}
.shortcut .wrapper a span {
display: inline-block;
margin-right: 8px;
width: 11px;
height: 16px;
background-image: url(../images/sprites.png);
background-position: -160px -70px;
vertical-align: middle;
}
.header {
margin: 30px auto;
height: 70px;
}
.logo {
float: left;
width: 207px;
height: 70px;
}
.logo h1 {
width: 207px;
height: 70px;
}
.logo h1 a {
display: block;
width: 207px;
height: 70px;
background-image: url(../images/logo.png);
background-size: contain;
font-size: 0;
}
.nav {
float: left;
margin-left: 40px;
height: 70px;
}
.nav li {
float: left;
margin-right: 48px;
line-height: 70px;
}
.nav li a {
padding-bottom: 7px;
}
.nav li a:hover {
color: #27ba9b;
border-bottom: 1px solid #27ba9b;
}
.search {
position: relative;
float: left;
margin-top: 24px;
margin-left: 34px;
width: 172px;
height: 30px;
border-bottom: 2px solid #e7e7e7;
}
.search input {
padding-left: 30px;
width: 172px;
height: 28px;
}
.search input::placeholder{
font-size: 14px;
color: #ccc;
}
.search span {
position: absolute;
left: 2px;
top: 2px;
width: 18px;
height: 18px;
background-image: url(../images/sprites.png);
background-position: -79px -69px;
}
.car {
position: relative;
float: left;
margin-top: 28px;
margin-left: 15px;
width: 23px;
height: 23px;
background-image: url(../images/sprites.png);
background-position: -119px -69px;
}
.car span {
position: absolute;
right: -13px;
top: -6px;
width: 20px;
height: 15px;
background-color: #e26237;
border-radius: 8px;
font-size: 13px;
color: #fff;
text-align: center;
line-height: 15px;
}
.footer {
height: 342px;
background-color: #333;
}
.footer .wrapper {
width: 1393px;
}
.footer .top {
padding-top: 59px;
padding-left: 135px;
height: 175px;
border-bottom: 3px solid #434343;
}
.footer .top li {
position: relative;
float: left;
margin-right: 300px;
width: 193px;
height: 58px;
line-height: 58px;
}
.footer .top li:last-child {
margin-right: 0;
}
.footer .top li::before {
position: absolute;
left: 0;
top: 0;
content: '';
width: 58px;
height: 58px;
background-image: url(../images/sprites.png);
vertical-align: middle;
}
.footer .top li span {
margin-left: 77px;
font-size: 28px;
color: #ffffff;
}
.footer .top li:nth-child(2)::before {
background-position: -64px 0;
}
.footer .top li:nth-child(3)::before {
background-position: -130px 0;
}
.footer .bottom {
padding-top: 40px;
font-size: 14px;
color: #999;
text-align: center;
}
.footer .bottom a {
font-size: 14px;
color: #999;
}
.footer .bottom p {
margin-bottom: 20px;
}
|
# index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
| //index.css
.banner {
height: 500px;
background-color: #f5f5f5;
}
.banner .wrapper {
position: relative;
}
.banner .aside {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
background-color: rgba(0, 0, 0, 0.8)
}
.banner .aside li {
height: 50px;
line-height: 50px;
}
.banner .aside a {
position: relative;
display: block;
padding-left: 36px;
padding-right: 19px;
width: 250px;
height: 50px;
color: #fff;
}
.banner .aside a span {
margin-left: 15px;
font-size: 14px;
}
.banner .aside a:hover {
background-color: #27ba9b;
}
.banner .aside a::after {
content: '';
position: absolute;
right: 19px;
top: 19px;
width: 6px;
height: 11px;
background-image: url('../images/sprites.png');
background-position: -80px -110px;
}
.banner .prev,
.banner .next {
position: absolute;
top: 228px;
width: 45px;
height: 45px;
background-color: rgba(0, 0, 0, 0.5);
background-image: url(../images/sprites.png);
border-radius: 50%;
}
.banner .prev {
left: 260px;
background-position: 14px -60px;
}
.banner .next {
right: 10px;
background-position: -23px -60px;
}
.banner ol {
position: absolute;
left: 585px;
bottom: 30px;
height: 10px;
}
.banner ol li {
float: left;
margin-right: 24px;
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50%;
cursor: pointer;
}
.banner ol .current {
background-color: #fff;
}
.goods .hd {
height: 114px;
line-height: 114px;
}
.goods .hd h2 {
float: left;
font-size: 29px;
font-weight: normal;
}
.goods .hd h2 span {
margin-left: 34px;
font-style: 16px;
color: #999;
}
.goods .hd a,
.shengxian .hd .more {
position: relative;
float: right;
color: #999;
}
.goods .hd a::after,
.shengxian .hd .more::after {
content: '';
display: inline-block;
margin-left: 13px;
width: 7px;
height: 13px;
background-image: url(../images/sprites.png);
background-position: 0 -110px;
vertical-align: middle;
}
.goods .bd li {
position: relative;
float: left;
margin-right: 8px;
width: 304px;
height: 405px;
background-color: #f0f9f4;
text-align: center;
}
.goods .bd li:nth-child(4n) {
margin-right: 0;
}
.goods .bd li img {
width: 304px;
}
.goods .bd li h3 {
margin: 20px 0 10px;
font-size: 20px;
font-weight: normal;
}
.goods .bd li div {
font-size: 17px;
font-weight: normal;
color: #9a2e1f;
}
.goods .bd li span {
font-size: 23px;
font-weight: normal;
color: #9a2e1f;
}
.goods .bd li b {
position: absolute;
left: 18px;
top: 18px;
width: 28px;
height: 51px;
border: 1px solid #27ba9b;
border-radius: 3px;
color: #27ba9b;
font-size: 18px;
font-weight: normal;
line-height: 24px;
}
.shengxian .hd {
height: 96px;
line-height: 96px;
font-weight: normal;
}
.shengxian .hd h2 {
float: left;
font-size: 29px;
font-weight: normal;
}
.shengxian .hd .more {
float: right;
}
.shengxian .hd ul {
float: right;
margin-right: 89px;
}
.shengxian .hd ul li {
float: left;
}
.shengxian .hd ul li a {
padding: 2px 7px;
margin-left: 6px;
}
.shengxian .hd ul li a:hover {
background-color: #27ba9b;
color: #fff;
}
.shengxian .bd .left {
float: left;
width: 240px;
height: 610px;
}
.shengxian .bd .right {
float: left;
width: 1000px;
height: 610px;
}
.shengxian .bd .right li {
float: left;
margin-left: 8px;
width: 242px;
height: 304px;
}
.shengxian .bd .right li img {
margin: 0 29px;
width: 184px;
height: 184px;
}
.shengxian .bd .right li h3 {
padding-left: 30px;
padding-right: 40px;
margin: 8px 0;
font-size: 16px;
font-weight: normal;
}
.shengxian .bd .right li div {
padding-left: 30px;
padding-right: 40px;
font-size: 17px;
font-weight: normal;
color: #9a2e1f;
}
.shengxian .bd .right li div span {
font-size: 22px;
font-weight: normal;
color: #9a2e1f;
}
.shengxian .bd .right li a:hover {
border: solid 2px #27ba9b;
}
.shengxian .bd .right li a {
display: block;
width: 242px;
height: 304px;
}
|
# js 文件夹
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
const list = ['https://pic4.zhimg.com/v2-44243020fbff5630b343a4e92c3186fb_r.jpg',
'https://pic4.zhimg.com/v2-04f320cd9427e818aa174e3b8f068127_r.jpg',
'https://pic3.zhimg.com/v2-2ce72ef983a3b2c815d7f1509b706eda_r.jpg',
'https://pic4.zhimg.com/v2-b76becbb2b3049c8507293bd4dfbf8b7_r.jpg',
'https://img.tt98.com/d/2020/2020061219006416/5ee34f14dcf4c.jpg',
'https://ts1.cn.mm.bing.net/th/id/R-C.c0a0e50906dfa00eff63d22ce0558d27?rik=X1hEoz%2fz0iQ4Pw&riu=http%3a%2f%2fimgs.aixifan.com%2flive%2f1483416279979%2f1483416279979.jpg&ehk=LVXzPFhuZLd1CnyLpxUd%2beJLrVjXTxHbIOvbuN70j0o%3d&risl=&pid=ImgRaw&r=0',
'https://pic4.zhimg.com/v2-bf9e5897a80acd016f40e0351645fc93_r.jpg?source=1940ef5c',
'https://ts1.cn.mm.bing.net/th/id/R-C.a49a2c3f551ecf65e07970c47167b85c?rik=UCwj6mM%2f3N%2bUkw&riu=http%3a%2f%2fimgs.aixifan.com%2flive%2f1483416175977%2f1483416175977.jpg&ehk=o60Di7Qupud5qHB%2byprZrYPMpC8%2fqXVx2I92wuJXun8%3d&risl=&pid=ImgRaw&r=0',
'https://ts1.cn.mm.bing.net/th/id/R-C.edac51727869a484d9925579785cda1a?rik=SMGJUZHreTATuQ&riu=http%3a%2f%2fimgs.aixifan.com%2flive%2f1483601963429%2f1483601963429.jpg&ehk=rFgZCrdJAA85TrfkYC52LkHEXCLB0zV4t098EJMnCaI%3d&risl=&pid=ImgRaw&r=0',
'https://pic3.zhimg.com/v2-c4fcb5062e8291d6adc3ff39f6f07b6e_r.jpg']
let index = 0
const img = document.querySelector('.banner #banner_img')
const next_button = document.querySelector('.banner .next')
const prev_button = document.querySelector('.banner .prev')
const ol_li = document.querySelectorAll('.banner ol li')
next_button.addEventListener("click", () => {
const key = (index + 1) % list.length
img.src = list[key]
ol_li[index].className = null
ol_li[key].className = "current"
index++
if (index >= list.length)
index = 0
})
prev_button.addEventListener("click", () => {
const key = (index - 1 + list.length) % list.length
img.src = list[key]
ol_li[index].className = null
ol_li[key].className = "current"
index--
if (index < 0)
index = list.length - 1
})
|
# index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="shortcut">
<div class="wrapper">
<ul class="fr">
<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="#"><span></span>手机版</a></li>
</ul>
</div>
</div>
<div class="header wrapper">
<div class="logo">
<h1><a href="#">小兔鲜儿</a></h1>
</div>
<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>
<div class="search">
<input type="text" placeholder="搜一搜">
<span></span>
</div>
<div class="car">
<span>2</span>
</div>
</div>
<div class="banner">
<div class="wrapper">
<ul>
<li><a href="#"><img id="banner_img" src="./uploads/banner_1.png" alt="" height="500px" width="1240px"></a></li>
</ul>
<div class="aside">
<ul>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
</ul>
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<div class="goods wrapper">
<div class="hd">
<h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
<a href="#">查看全部</a>
</div>
<div class="bd clearfix">
<ul>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_2.jpg" alt="">
<h3>智能环绕3D空调</h3>
<div>￥<span>1299</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_3.jpg" alt="">
<h3>广东软软糯米煲仔饭</h3>
<div>￥<span>129</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_4.jpg" alt="">
<h3>罗西机械智能手表</h3>
<div>￥<span>3399</span></div>
<b>新品</b>
</a>
</li>
</ul>
</div>
</div>
<div class="shengxian wrapper">
<div class="hd">
<h2>生鲜</h2>
<a href="#" class="more">查看全部</a>
<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="#">T恤</a></li>
<li><a href="#">内衣</a></li>
</ul>
</div>
<div class="bd clearfix">
<div class="left">
<img src="./uploads/fresh_goods_cover.png" alt="">
</div>
<div class="right">
<ul>
<li>
<a href="#">
<img src="./uploads/fresh_goods_1.jpg" alt="">
<h3>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32<br>火锅食材</h3>
<div>￥<span>79</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_2.jpg" alt="">
<h3>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32<br>火锅食材</h3>
<div>￥<span>79</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_3.jpg" alt="">
<h3>三都港 冷冻无公害黄花鱼
700g 2条 袋装
<br>海鲜水产</h3>
<div>￥<span>79</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_4.jpg" alt="">
<h3>渔公码头 大连鲜食入味
即食海参 辽参刺参
<br>调味海鲜</h3>
<div>￥<span>79</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_5.jpg" alt="">
<h3>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32<br>火锅食材</h3>
<div>￥<span>79</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_6.jpg" alt="">
<h3>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32<br>火锅食材</h3>
<div>￥<span>79</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_3.jpg" alt="">
<h3>三都港 冷冻无公害黄花鱼
700g 2条 袋装
<br>海鲜水产</h3>
<div>￥<span>79</span></div>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_4.jpg" alt="">
<h3>渔公码头 大连鲜食入味
即食海参 辽参刺参
<br>调味海鲜</h3>
<div>￥<span>79</span></div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="wrapper">
<div class="top">
<ul>
<li>
<span>价格亲民</span>
</li>
<li>
<span>物流快捷</span>
</li>
<li>
<span>品质新鲜</span>
</li>
</ul>
</div>
<div class="bottom">
<p>
<a href="#">关于我们</a> |
<a href="#">帮助中心</a> |
<a href="#">售后服务</a> |
<a href="#">配送与验收</a> |
<a href="#">商务合作</a> |
<a href="#">搜索推荐</a> |
<a href="#">友情链接</a>
</p>
<p>CopyRight @ 小兔鲜儿</p>
</div>
</div>
</div>
<script type="text/javascript" src="./js/banner_button.js">
</script>
</body>
</html>
|
