语言 | 功能 | |
---|---|---|
结构层 | HTML | 搭建结构、放置部件、描述语义 |
样式层 | CSS | 美化页面、实现布局 |
行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
前端工程师:
- 曾经一段时间,前端工程师要 使用PS和FW对设计图进行测量
- 现在测量原型图,设计师使用 Axure 或者 Sketch 等软件,可以直接给我们 “直观标注”的原型图/设计图
HTML 骨架的生成:
- 输入 !(英文状态下的感叹号),按 tab 键,即可自动生成 HTML5 的骨架
- 如果没有生成,说明没有将网页保存,或者网页保存的格式不是 .html 后缀
认识 HTML5 骨架:
- 文档类型声明DTD:HTML 文件第一行必须是 DTD(Document Type Definition,文档类型声明);不写DTD会引发浏览器的一些兼容问题
- < html >标签对:lang属性表示网页的语言,zh表示中文,en表示英文
- < head >标签对:是网页的配置,不要认为是网页的头部
- < body >标签对:里面书写网页的内容,包括网页的头部、主要内容、页脚等各个部分
- < title > 标签:用来设置网页的标题,文字会显示在浏览器的标签栏上;title也是搜索引擎收录网站时显示的标题,为了吸引用户点击,合理设置title是必要的
<!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>Document</title>
</head>
<body>
hello world!<q>sssss</q>
</body>
</html>
字符集设置:
- 一般设置为 UTF-8 或者 GBK
<meta charset="UTF-8">
网页关键词和页面描述:
- 合理设置网页的关键词和页面描述,是SEO的重要手段
- SEO(Search Engine Optimization,搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名,让网站在搜索引擎的结果内占据领先地位,获得品牌收益
- 使用 meta 标签设置网页关键词和描述,name 属性非常关键,用来设置 meta 的具体功能
- 页面描述也是搜索引擎显示的简介词语
<meta name="Keywords" content="HTML,CSS,前端">
<meta name="Description" content="HTML+CSS 基础入门与进阶是适用学习前端开发人员的入门与进阶文章,它可以让初学者学习并了解前端三大技术之中的两种,称为一名前端开发人员。"
转义字符:
| 转义字符 | 意义 |
|-------|--------|
| \< | 小于号 < |
| \> | 大于号 > |
| \ | 空格(不会被折叠) |
| \© | 版权符号© |
HTML 注释:
- 可以在编辑器中使用 ctr + / 键输入
<!-- 注释的内容 -->
空白折叠现象:
- 文字和文字之间的多个空格、换行会被折叠成一个空格
- 标签“内壁”和文字之间的空格会被忽略
<p>hello world</p>
<br/>
<meta charset="UTF-8">
标题标签:
- h 系列标签表示“标题”语义,h 是 headline 的意思
- 搜索引擎非常看重< h1 > 标签的内容,应该将重点内容放到 < h1 > </ h1 >中,比如网页的 logo等
- < h1 >标签一般只能放置一个,否则会被搜索引擎视为作弊
标签 | 语义 |
---|---|
h1 | 一级标题 |
h2 | 二级标题 |
h3 | 三级标题 |
h4 | 四级标题 |
h5 | 五级标题 |
h6 | 六级标题 |
段落标签:
- < p >标签表示段落标签,p 是英语 paragraph 的意思
- 任何段落都要放到< p> </ p>标签中,因为HTML中即使代码换行了,页面显示效果也不会换行,每个段落必须写到自己的 p 标签中
- < p>标签不能嵌套 h 系列标签和其它 P 标签
CSS 常见类名如下:
区域 | 类名 |
---|---|
页面头部 | header |
logo | logo |
导航条 | nav |
横幅 | banner |
内容区域 | content |
页脚 | footer |
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ul>
无序列表 \ 的 type 属性:
- 无序列表的type属性,可以定义前导符号的样式,但在HTML5中已经被废弃,建议使用CSS替代
值 | 描述 |
---|---|
disc | 默认值,实心圆 |
circle | 空心圆 |
aquare | 实心方块 |
<ul>
<li>
<h2>江苏省</h2>
<ul>
<li>南京市</li>
<li>苏州市</li>
</ul>
</li>
<li>
<h2>上海市</h2>
<ul>
<li>静安区</li>
<li>浦东区</li>
</ul>
</li>
</ul>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ol>
有序列表 \ 的 type 属性:
- 有序列表的type属性,可以用来设置编号的类型
属性值 | 描述 |
---|---|
a | 表示小写英文字母编号 |
A | 表示大写英文字母编号 |
i | 表示小写罗马数字编号 |
I | 表示大写罗马数字编号 |
1 | 表示数字编号(默认) |
有序列表 \ 标签的 start 属性:
- start 属性值必须是一个整数,指定了列表编号的起始值
- 此属性的值应为 阿拉伯数字,尽管列表条目的编号类型 type属性可能已经指定为其它类型的编号
<ol type='A' start="3">
有序列表 \ 标签的 reversed 属性:
- reversed 属性指定列表中的条目是否是倒序排列的
- reversed 属性不需要值,只需要写 reversed 单词即可,这是HTML5的新特性
<ol type='A' start="3" reversed>
<dl>
<dt>北京</dt>
<dd>我国首都</dd>
<dt>上海</dt>
<dd>经济中心</dd>
<dt>深圳</dt>
<dd>经济特区</dd>
</dl>
// 也可以这样写
<dl>
<dt>北京</dt>
<dd>我国首都</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>经济中心</dd>
</dl>
<dl>
<dt>深圳</dt>
<dd>经济特区</dd>
</dl>
图片\标签:
- \ 标签用来在网页中插入图片
- img 是 image(图片)的缩写
- src 是 source(来源)的缩写
- src 属性值里面填写图片的存储目录和完整的文件名
- 一定注意,图片必须复制到项目文件夹中,一般将图片保存到项目文件夹中的images 子文件夹中
- 图片本质上没有被插入到网页中,只是被引入到网页中,所以将来要将图片也一起上传到服务器上
<img src="images/1.jpg" alt="图片描述">
\标签的 alt 属性:
- alt 属性是 alternate “替代品”的缩写,它是对图像的文本描述,不是强制性的
- 如果由于某种原因无法加载图像,浏览器会在页面上显示 alt 属性中的备用文本
- 供视力不方便的朋友使用的网页朗读器,也会朗读 alt 中的文本
\标签的 width、height 属性:
- width、height 属性分别设置宽度和高度,单位是像素,但是可以不写单位,默认单位就是像素 px
- 如果省略其中一个属性不写,则表示按原始比例缩放图片
网页上支持的图片格式:
格式 | 说明 |
---|---|
.bmp | windows画图软件默认保存的格式,位图 |
.gif | 支持动画(比如表情包) |
.jpeg( .jpg ) | 有损压缩图片,用于照片 |
.png | 便携式网络图像,用于logo、背景图形等,支持透明和半透明 |
.svg | 矢量图片 |
.webp | 最新的压缩算法,非常优秀的图片格式 |
相对路径:
- 描述从网页出发,如何找到图片;相对于当前所在的位置
- 随着网页和图片的位置关系不同,插入图片的代码随之改变
- 如果需要回退层级,使用“../”这样的写法;每一个“../”表示回退一个层级
<img src="images/1.png" alt="">
<img src="../images/0.png" alt="">
绝对路径:
- 绝对路径:描述图片精准地址;从根路径开始
<a href="http://www.baidu.com">百度</a>
href 属性支持相对路径和绝对路径:
- href 属性支持相对路径和绝对路径
<a href="web/1.html">去一个网页</a>
<a href="../web/2.html">去另一个网页</a>
<a href="http://www.baidu.com">去百度</a>
\ 标签的 title 属性:
- \ 标签的 title 属性用于设置鼠标的悬停文本,即当鼠标箭头放到超级链接上时,会有一个文本框显示 title 属性的内容
<a href="http://www.baidu.com" title="想要打开百度吗?">去百度</a>
\ 标签的 target 属性:
- 将 \ 标签的 target 属性设置为 blank,即可 在新标签页中打开网页
- 在HTML4代,blank之前有一个下划线(_blank),到HTML5之后可以不写
给图片设置超级链接:
- 图片也可以设置超级链接,只需要用 \标签包裹 \标签即可
<a href="1.html" target="blank">
<img src="images/0.jpg">
</a>
页面内锚点:
- 较长的页面,可以适当的给 h 系列标签添加 id 属性,它将成为页面的“锚点”
<h2 id="nanj">南京</h2>
<a href="lvyou.html#nanj">去南京</a>
下载链接:
- 当一个超级链接的 href 属性指向 exe、zip、rar等文件格式的链接,将自动成为下载链接
<a href="2.zip">下载</a>
邮件链接、电话链接:
- 当超级链接的 href 属性值有 mailto: 前缀,系统将自动打开 Email 相关的软件
<a href="mailto:[email protected]">发邮件</a>
<a href="tel:12315678921">打电话给某某</a>
音频\
- 在浏览器中插入音频需要使用 \
<audio controls src="音频地址">抱歉,您的浏览器不支持 audio 标签,请升级浏览器</audio>
视频 \
- 在浏览器中插入视频需要使用 \
<video controls src="音频地址">抱歉,您的浏览器不支持 video 标签,请升级浏览器</video>
区块标签 | 说明 |
---|---|
\ | 文档的区域,语义比 div 大 |
\ | 文档的核心文章内容,会被搜索引擎主要抓取 |
\ | 文档的非必要相关内容,比如:广告等 |
\ | 导航条 |
\ |
页头 |
\ | 网页核心部分 |
\ | 页脚 |
<!-- 网页的头部 -->
<header>
<div class="logo">网页的logo</div>
<!-- 导航条 -->
<nav>
导航条
</nav>
</header>
<!-- 网页的核心 -->
<main>
<!-- 广告 -->
<aside>
广告
</aside>
<!-- 文章内容 -->
<article>
<h1>文章的标题</h1>
<section>内容1</section>
<section>内容2</section>
<section>内容3</section>
</article>
</main>
<!-- 页脚 -->
<footer></footer>
<p>
<span>北京</span>是我国的<span>首都</span>
</p>
\、\、\ 标签:
- 已经不怎么使用了,基本上都被被 CSS 替代
标签 | 说明 |
---|---|
\ | 被加粗的文字 |
\ | 加下划线的文字 |
\ | 倾斜的文字 |
\、\、\ 标签:
- \、\、\ 标签均表示强调语义
- 已经不怎么使用了,基本上都被被 CSS 替代
标签 | 说明 |
---|---|
\ | 特别重要的文字 |
\ | 强调文字 |
\ | 一段需要被高亮的文字 |
<form action="" method="post">
</form>
input 标签值:
type 属性值 | 控件 |
---|---|
text | 单行文本框 |
radio | 单选按钮 |
checkbox | 多选按钮 |
password | 密码框 |
button | 普通按钮 |
reset | 重置按钮 |
submit | 提交按钮 |
单行文本框:
- 使用 type 属性被设置为 text 的 <input> 元素 可以创建单行文本框,它是一个单标签
<input type="text">
<input type="text" value="123">
<input type="text" placeholder="请输入姓名">
<input type="text" value="已经锁死,不能更改了" disabled>
单选按钮:
- 当 type 属性值被设置为 radio 时,<input>元素可以创建单选按钮
- 互斥 的单选按钮应该设置它们的 name 属性为相同值
- 单选按钮要有 value 属性值,向服务器提交的就是 value 值
- 单选按钮如果加上 checked 属性,表示默认被选中
性别:
<input type="radio" name="sex" value="男" checked><span>男</span>
<input type="radio" name="sex" value="女"><span>女</span>
label 标签:
- label 标签用来 将文字和单选按钮进行绑定,用户单击文字的时候也视为点击了单选按钮
性别:
<label>
<input type="radio" name="sex" value="男" checked>男
</label>
<label>
<input type="radio" name="sex" value="女">女
</label>
性别:
<input type="radio" name="sex" value="男" checked id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" value="女" id="nv">
<label for="nv">女</label>
复选框:
- 当 type 属性值被设置为 checkbox 时,<input>元素可以创建复选框
- 同组复选框应该设置相同的 name 属性值
- 复选框要有 value 属性值,向服务器提交的就是 value 值
业余爱好:
<label>
<input type="checkbox" name="hobby" value="弹吉他">弹吉他
</label>
<label>
<input type="checkbox" name="hobby" value="游泳">游泳
</label>
<label>
<input type="checkbox" name="hobby" value="羽毛球">羽毛球
</label>
<label>
<input type="checkbox" name="hobby" value="玩游戏">玩游戏
</label>
<label>
<input type="checkbox" name="hobby" value="阅读">阅读
</label>
密码框:
- 当 type 属性值被设置为 password 时,<input>元素可以创建密码框
- 当用户输入密码时,密码框内用黑点替代显示
<input type="password" placeholder="请输入密码">
三种按钮:
- 表单常见三中按钮,它们也都是 <input> 标签,type 属性值不同
type 属性值 | 按钮种类 |
---|---|
button | 普通按钮,可以简写为<button></button> |
submit | 提交按钮 |
reset | 重置按钮 |
下拉菜单:
- <select> 标签表示下拉菜单,<option>是它内部的选项
<select>
<option value="alipay">支付宝</option>
<option value="wx">微信</option>
<option value="bank">网银</option>
</select>
多行文本框:
- <textarea></textarea>表示多行文本框,也叫文本域
- rows 和 cols 属性,用于定义多行文本框的行数和列数
备注:
<textarea id="" name="" rows="10" cols="30"></textarea>
type 属性值 | 按钮种类 |
---|---|
color | 颜色选择控件 |
date | 日期选择控件 |
time | 时间选择控件 |
电子邮件输入控件 | |
file | 文件选择控件 |
number | 数字输入控件(max、min属性表示最大、最小值) |
range | 拖拽条(max、min属性表示最大、最小值) |
search | 搜索框 |
url | 网址输入控件 |
<form action="" method="">
<p>
颜色选择控件:
<input type="color">
</p>
<p>
日期选择控件:
<input type="date">
</p>
<p>
时间选择控件:
<input type="time">
</p>
<p>
电子邮件控件:
<input type="">
</p>
<p>
数字:
<input type="number" min="10" max="30">
</p>
<p>
拖拽条:
<input type="range" min="10" max="30">
</p>
<p>
搜索框:
<input type="search">
</p>
<p>
网址:
<input type="url">
</p>
<p>
<input type="submit">
</p>
</form>
<datalist>控件:
- <datalist>控件可以为输入框提供一些备用选项,当用户输入的内容与备选文字相同时,将会显示智能感应
<input type="text" list="provice-list">
<datalist id="provice-list">
<option value="北京"></option>
<option value="上海"></option>
<option value="江苏"></option>
<option value="广东"></option>
<option value="广西"></option>
<option value="贵州"></option>
<option value="云南"></option>
<option value="四川"></option>
<option value="重庆"></option>
<option value="内蒙古"></option>
<option value="新疆"></option>
</datalist>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<table> 的 border 属性:
- 为了让表格能够显示边框,<table> 标签通常有 border 属性
<table border="1">
……
……
</table>
<table> 的 caption 属性:
- <caption>是表格的标题,它常常作为<table>的第一个子元素出现
<table border="1">
<caption>表格的标题</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
<th>标签:
- <th>是“标题小格”,即表示每列的标题格,可以替代<td>的作用
<table border="1">
<caption>表格的标题</caption>
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
colspan 和 rowspan属性:
- colspan 属性用来设置 td 或 th 的列跨度
- rowspan 属性用来设置 td 或 th 的行跨度
<table border="1">
<caption>表格的标题</caption>
<tr>
<!-- 第一行第一列占两列 -->
<th colspan="2">第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>c</td>
<td>d</td>
</tr>
</table>
内嵌式:
- 就是CSS内嵌在 .html 文件中,在
外链式:
- 可以将 CSS 单独存为 .css 文件,然后使用标签引入。
- 外链式的优点:多个 html 网页,可以共用一个 css 样式文件。
<link rel = "stylesheet" href = "css/css.css">
导入式:
- 导入式式最不常见的样式表导入方法。
- 使用导入式引入的样式表,不会等待 CSS 文件加载完毕就会立即渲染 html 结构,所以页面会有几秒钟的无样式页面。
<style>
@import url(css/css.css)
</style>
行内式:
- 样式可以直接通过 style 属性写在标签上。
- 行内式牺牲了样式表的批量设置样式的能力,只能给一个标签设置样式,所有不常用。
<h1 style = "color:red;" >我是一个一级标题</h1>
.warn {
color: green;
font-size: 20px
}
.warn { color: green;font-size: 20px}
p {
/* 设置文字字体大小 */
font-size: 30px;
}
span {
color: red;
}
ul {
/* 去除无序列表的小圆点 */
list-style: none;
}
a {
/* text-decoration:文本装饰为:none,去除超级链接的下划线 */
text-decoration: none;
}
<p id = "para1">我是一个段落</p>
#par1a {
color: red;
}
<p class = "warning" >我是一个段落</p>
<p class = "warning spec" >我是一个段落</p>
.warning {
color: blue;
}
.spec {
/* 文字倾斜 */
font-style: italic;
}
原子类:
- 在做网页项目前,可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类
- HTML 标签就可以“按需选择”它的类名,这样可以非常快速的添加一些常见样式
<p class = "fs12 color-red" >我是一段文字</p>
.fs12 {
font-size: 12px;
}
.fs14 {
font-size: 14px;
}
.color-red {
color: red;
}
.color-blue {
color: blue;
}
后代选择器:
- CSS 选择器中,使用空格表示“后代”;
- “后代”并不一定是“儿子代”,也可以是“孙子代、重孙代等等”;
- 后代选择器可以有很多空格,隔开好几代。
<div class = "box">
<!-- 这里的 p标签将被选择 -->
<p>我是盒子中的段落1</p>
<!-- 这里的 p标签将被选择 -->
<p>我是盒子中的段落1</p>
</div>
<div class ="man">
<ul>
<li>
<p></p>
</li>
</ul>
</div>
<!-- 这里的 p标签不会被选择 -->
<p>我是段落1</p>
<!-- 这里的 p标签不会被选择 -->
<p>我是段落1</p>
/* 选择类名为 box 的标签后代的 p标签 */
.box p {
color: green;
}
/* 隔好几代 */
.man ul li p {
}
交集选择器:
- 多个选择器放在一起,表示同时拥有这几个选择器的标签才能使用该样式
- 选择器之间没有东西分隔开
<h3 class="spec">我是一个三级标题</h3>
h3.spec {
/* 文字倾斜 */
font-style: italic;
}
并集选择器:
- 多个选择器放在一起,表示该 CSS样式的内容属于这几个标签
- 选择器之间用逗号“,”分隔
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
ul,ol {
list-style: none;
}
<a href = "http://www.baidu.com">前往百度</a>
<a href = "http://www.imooc.com">前往慕课网</a>
a:link {
color: red;
}
a:visited {
color: yellow;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
子选择器:
- 当使用 > 符号分隔连个元素时,它只会匹配那些作为第一个元素的直接后代元素,即两个标签为父子关系
- 后代选择器不一定限制是子元素
- 子选择器从 IE7 开始兼容
<div class="box">
<!-- 将被子类选择器选择 -->
<p>段落</p>
<!-- 将被子类选择器选择 -->
<p>段落</p>
</div>
.box>p {
color: red;
}
.box p {
}
相邻兄弟选择器:
- 相邻兄弟选择器(+)介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中
- 简单来说,a+b就是选择“紧跟在a后面的一个b”
- 相邻兄弟选择器从IE7开始兼容
<p>
<a href = "http://www.baidu.com">百度</a>
<!-- 这里的span标签会被选中 -->
<span>文字</span>
<!-- 这里的span标签不会被选择 -->
<span>文字</span>
</p>
a+span {
color: red;
}
通用兄弟选择器:
- 通用兄弟选择器(~),a~b选择 a元素之后所有同层级 b元素
- 通用兄弟选择器从IE7开始兼容
<h2>标题</h2>
<!-- 这里的span标签会被选择 -->
<span>文字</span>
<!-- 这里的span标签会被选择 -->
<span>文字</span>
<div>
<!-- 这里的span标签不会被选中 -->
<span>文字</span>
</div>
<p>段落</p>
<!-- 这里的span标签会被选择 -->
<span>文字</span>
<!-- 这里的span标签会被选择 -->
<span>文字</span>
h2~span {
}
<div class="box">
<!-- 被选择 -->
<p>1</p>
<p>2</p>
<p>3</p>
</div>
.box p:first-child {
color: red;
}
<div class="box">
<p>1</p>
<p>2</p>
<!-- 被选择 -->
<p>3</p>
</div>
.box p:last-child {
color: red;
}
<div class="box">
<p>1</p>
<!-- 被选择 -->
<p>2</p>
<p>3</p>
</div>
.box p:nth-child(2) {
color: red;
}
<div class="box">
<p>1</p>
<!-- 被选择 -->
<p>2</p>
<p>3</p>
<!-- 被选择 -->
<p>4</p>
<p>5</p>
<!-- 被选择 -->
<p>6</p>
<p>7</p>
</div>
.box p:nth-child(2n+2) {
color: red;
}
<div class="box">
<p>1号p</p>
<p>2号p</p>
<h3>1号h3</h3>
<h3>2号h3</h3>
<!-- 被选择 -->
<p>3号p</p>
<p>4号p</p>
<h3>3号h3</h3>
<h3>4号h3</h3>
</div>
.box p:nth-of-type(3) {
color: red;
}
<div class="box">
<p>1号p</p>
<!-- 被选择 -->
<p>2号p</p>
<h3>1号h3</h3>
<h3>2号h3</h3>
<p>3号p</p>
<p>4号p</p>
<h3>3号h3</h3>
<h3>4号h3</h3>
</div>
.box p:nth-last-of-type(3) {
color: red;
}
举例 | 意义 |
---|---|
img[alt] | 选择有alt 属性的img 标签 |
img[alt=”谷”] | 选择有alt 属性是谷的img 标签 |
img[alt^=”北京”] | 选择有alt 属性以北京开头的img 标签 |
img[alt$=”夜”] | 选择有alt 属性以夜结尾的img 标签 |
img[alt*=”美丽”] | 选择有alt 属性中含有美丽字的img 标签 |
img[alt~=”拍摄”] | 选择有alt 属性有空格隔开的拍摄字样的img 标签 |
img[alt|=”参赛作品”] | 选择有alt 属性以“参赛作品-”开头的img 标签 |
伪类 | 意义 |
---|---|
:empty | 选择空标签 |
:focus | 选择当前获得焦点的表单元素 |
:enabled | 选择当前有效的表单元素 |
:disabled | 选择当前无效的表单元素 |
:checked | 选择当前已经勾选的单选按钮或者复选框 |
:root | 选择根元素,即标签 |
<a href = "http://www.baidu.com">我是一个超级链接</a>
<a href = "http://www.baidu.com">我是一个超级链接</a>
a::before {
/* 表示在所有“我是一个超级链接”文字前加“¥”符号 */
content: "¥";
}
.spec {
color: blue !important;
}
color 属性:
- color 属性可设置文本内容的前景色
- color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法
- 英语单词表示法仅仅用于学习时临时设置颜色,工作时基本不用
- 十六进制表示法是所有设计软件中都通用的颜色表示法,设计师给的设计图上标注的颜色,通常为十六进制表示
- 十六进制的三原色是红绿蓝,十六进制 ff 就是十进制的255,每种颜色分量都是0~255的数字
- 如果颜色值是 #aabbcc的形式,可以简写为 #abc
- 黑色是 #000,白色是 #fff,常见的灰色有 #ccc、#333、#2f2f2f等
- 颜色也可以用 rgb() 表示法 color: rgb(255,0,0)
- 颜色还可以用 rgba()表示法,最后一个参数表示透明度,介于0到1之间,0表示纯透明,1表示纯实心 color: rgba(255, 0, 0, .65)
- rgba()表示法从IE9开始兼容
font-size 属性:
- font-size 属性用来设置字号,单位通常为:px。常用的还有:em、rem
- 网页文字正文字号通常是16px,浏览器最小支持 10px字号
font-weight 属性:
- font-weight 属性设置字体的粗细程度,通常就是用 normal 和 bold 两个值;
- normal是正常粗细,与400等值;bold是加粗,与700等值;lighter是更细,大多数中文字体不支持;bolder是更粗,大多数中文字体不支持
font-style 属性:
- font-style 属性设置字体倾斜
- normal:取消倾斜,比如可以把天生倾斜的 i、em等标签设置不倾斜
- italic:设置为倾斜字体(常用)
- oblique:设置为倾斜字体(不常用)
text-decoration 属性:
- text-decoration 属性用于设置文本的修饰线外观(下划线、删除线)
- none:没有修饰线
- underline:下划线
- line-through:删除线
font-family 属性:
- font-family 属性用于设置字体。 font-family: “微软雅黑”;
- 字体可以是列表形式,一般英语字体放到前面,后面的字体是前面的字体的“后备”字体。
- 如果字体为中文字体或者英文字体名称中有空格,都必须要用引号包裹
- 默认是按照该顺序放置字体:font-family: serif, “Times New Roman”, “微软雅黑”;
- 中文字体也可以称呼它们的英文名字,如:微软雅黑 -> Microsoft Yahei 宋体 -> SimSun
- 字体通常必须是用户计算机中已经安装好的字体,所以一般设置微软雅黑和宋体的比较多
- 字体文件根据操作系统和浏览器不同,有eot、woff2、woff、ttf、svg文件格式,需要同时有这5种文件
- 当我们拥有字体文件之后,就可以用@font-face定义字体
@font-face {
font-family: '字体名字';
font-display: swap;
src: url('eot 字体文件地址');
src: url('eot 字体文件地址') format('embedded-opentype')
url('woff2 字体文件地址') format('woff2')
url('woff 字体文件地址') format('woff')
url('ttf 字体文件地址') format('truetype')
url('svg 字体文件地址') format('svg')
}
text-indent 属性:
- text-indent 属性定义首行文本内容之前的缩进量,缩进两个字符应写作:text-indent: 2em;
- em 表示字符宽度
text-align 属性:
- text-align 属性用于 规定文本的水平对齐方式
- 属性值:left,左对齐
- 属性值:right,右对齐
- 属性值:center,居中对齐
- 属性值:justify,两端对齐
- 属性值:inherit,从父元素继承 text-align 属性的值
line-height 属性:
- line-height 属性用于定义行高,行高就是文字行的高度,行高不等于字体高度,文字在每行是水平居中。
- line-height 属性的单位可以是以 px 为单位的数值,line-height: 30px;
- line-height 属性也可以是没有单位的数值,表示字号的倍数,这是最推荐的写法, line-height: 1.5;
- line-height 属性也可以是百分数,表示字号的倍数,line-height: 150%;
- 设置单行文本垂直居中,即设置 行高=盒子高度
- 设置文本水平居中,设置 text-align: center;
border 属性:
- border 属性的三个要素:线宽度、线型、线颜色。例如:border: 2px solid red;
- 常用线型:solid(实线)、dashed(虚线)、dotted(点状线)
- 边框三要素可以拆分为小属性:border-width(线宽)、border-style(线型)、border-color(线颜色)
- 四个方向的边框:border-top(上边框)、bborder-right(右边框)、border-bottom(下边框)、border-left(左边框)
- 四个方向边框的三要素小属性:border-top-width(上边框宽度)、border-top-style(上边框线型)、border-top-color(上边框颜色)、border-right-width(右边框宽度)、border-right-style(右边框线型)、border-right-color(右边框颜色)、border-bottom-width(下边框宽度)、border-bottom-style(下边框线型)、border-bottom-color(下边框颜色)、border-left-width(左边框宽度)、border-left-style(左边框线型)、border-left-color(左边框颜色)
去掉边框:
- border-方向: none; 即可去掉边框。
利用边框制作三角形:
- 可以巧妙的利用边框的特性制作三角形
/* 示例 */
.box {
width: 0;
height: 0;
/* tarnsparent 是透明色 */
border: 10px solid transparent;
border-bottom-color: #000;
}
border-radius 属性:
- border-radius 属性的值通常为 px 单位,表示圆角的半径。例:border-radius: 10px;
- 当圆角半径值等于正方形边框宽高值时,表示此时的边框为一个圆
- border-radius 属性可以单独设置四个圆角,border-radius: 左上 右上 右下 左下;
- 也可以使用小属性(先上下后左右):border-top-left-radius(左上角)、border-top-right-radius(右上角)、border-bottom- right-radius(右下角)、border-bottom-left-radius(左下角)
- border-radius 属性的值也可以用百分比做单位,表示圆角起始于每条边的哪里,例如:border-radius: 20%;
- 正方形盒子如果设置的 border-radius 属性为 50%,表示正圆形
- 长方形盒子如果设置的 border-radius 属性为 50%,就是椭圆形
box-shadow 属性:
- box-shadow 属性设置盒子阴影的值:box-shadow: x偏移 y偏移 模糊量 颜色; 示例:box-shadow: 10px 20px 30px rgba(0, 0, 0, .4);
- 模糊量值越大表示越模糊,0表示不模糊
- 阴影的延展:表示向四个方向产生阴影。box-shadow: x偏移 y偏移 模糊量 延展值 颜色; 延展值越大延展越宽
- 内阴影:在 box-shadow 属性值前面加 inset 单词,表示内阴影。box-shadow: inset x偏移 y偏移 模糊量 延展值 颜色;
- 多阴影:在 box-shadow 属性设置多个阴影值,值之间用逗号“,”分隔
margin 的塌陷:
- 竖直方向的 margin有塌陷现象:小的margin会塌陷到大的 margin中,从而margin不叠加,只以大值为准
- 水平方向的 margin 没有塌陷现象,左右方向的margin值会叠加
一些元素有默认的 margin:
- 一些元素(如:body、ul、p等标签)都有默认的 margin,在开始制作网页的时候,要将它们清除
- 通配符选择器有效率问题,应该使用并集选择器
* {
margin: 0;
padding: 0;
}
body,ul,p {
margin: 0;
padding: 0;
}
盒子的水平居中:
- 将盒子左右两边的margin 都设置为 auto,盒子将水平居中
- 文本居中是text-align: center; 和盒子的水平居中是两个概念
- 盒子的垂直居中,需要使用绝对定位技术实现
.box {
margin: 0 auto;
}
行内元素和块级元素的相互转换:
- 使用 display: block; 可将元素转为块级元素
- 使用 display: inline; 可将元素转为行内元素,将元素转为行内元素的应用不多见
- 使用 display: inline-block; 可将元素转为行内块
BFC规范:
- BFC(Box Formatting Context,块级格式上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之,外面的元素影响不到里面的元素
如何创建 BFC:
- float 的值不是 none
- position 的值不是 static 或者 relative
- display 的值是 inline-block、flex 或者 inline-flex
- overflow: hidden;
什么是 overflow: hidden:
- overflow: hidden; 表示溢出隐藏,溢出盒子边框的内容将会被隐藏
- overflow: hidden; 是非常好用的让盒子形成 BFC 的方法
BFC 的其它作用:
- BFC 可以取消盒子margin 塌陷
- BFC 可以阻止元素被浮动元素覆盖
浏览器差异:
- IE6、7浏览器使用 haslayout 机制,和 BFC 规范略有差异,比如 IE浏览器可以使用 zoom: 1 属性“让盒子拥有layout”
- 如果要制作兼容到 IE6、7的网页时,尽量让网页布局变得简单,内部有浮动的盒子要设置 height 属性,规范编程
相对定位的用途:
- 相对定位用来微调元素位置
- 相对定位的元素,可以当作绝对定位的参考盒子
绝对定位的盒子垂直居中:
- 使绝对定位的盒子垂直居中的方法
.box {
position: absolute;
top: 50%;
/* 盒子高度=height + 上下padding + 上下border */
margin-top: 负的自己盒子高度的一半;
}
.box {
position: absolute;
left: 50%;
/* 盒子宽度=width + 左右padding + 左右border */
margin-left: 负的自己盒子宽度的一半;
}
堆叠顺序 z-index 属性:
- z-index 属性是一个没有单位的正整数,数值大的能够压住数值小的
绝对定位的用途:
- 绝对定位用来制作“压盖”、“遮罩”效果
- 绝对定位用来结合 CSS 精灵使用
- 绝对定位可以结合 JS 实现动画
flex 布局:
- Flex 是 Flexible Box 的缩写,意为“弹性的盒子”,所以 flex 布局也称为 “弹性布局”
- flex 布局主要用于使 flex 项目进行排列或缩放
什么是 flex 容器(flex container):
- 采用 flex 布局的元素,称为 flex 容器
- 只要盒子内写上 display: flex; 或 inline-flex; 都称为 flex 容器
- display: flex; 在没有设置容器宽度时,父容器有固定宽度,默认100%
- display: inline-flex; 在没有设置容器宽度时,父容器的宽度由项目撑开
什么是 flex 项目(flex item):
- flex 容器的所有子元素自动成为容器的成员,称为 flex 项目
- 主轴默认是水平的;项目默认沿主轴排列
flex-direction 属性:
- flex-direction 属性:用于控制容器内排列方向与顺序
- 属性值:row(默认),按顺序横向排列
- 属性值:row-reverse,按倒序横向排列
- 属性值:column,按顺序纵向排列
- 属性值:column-reverse,按倒序纵向排列
flex-wrap 属性:
- flex-wrap 属性:用于控制容器内项目是否换行
- 属性值:nowrap(默认),默认不换行
- 属性值:wrap,表示换行,第一排会紧贴容器顶部
- 属性值:wrap-reverse,同样表示换行,但第一排会紧贴容器底部
justify-content 属性:
- justify-content 属性:用于控制容器内元素在水平方向的对齐方式
- 属性值:flex-start(默认),表示左对齐
- 属性值:center,表示居中对齐
- 属性值:flex-end,表示右对齐
- 属性值:space-between,表示左右两端对齐,即左右两侧项目都紧贴父容器,且项目之间间距相等
align-items 属性:
- align-items 属性:用于控制容器内元素在竖直方向的对齐方式
- 属性值:stretch(默认),表示如果项目没有设置高度,或高度为 auto,则占满整个容器高度
- 属性值:flex-start,表示紧贴容器顶部
- 属性值:center,表示在竖直方向居中
- 属性值:flex-end,表示紧贴容器底部
order 属性:
- order 属性:用于决定项目的排列顺序
- 属性值:0(默认),属性值越小,元素排列越靠前
flex-grow 属性:
- flex-grow 属性:用于决定项目在有剩余空间的情况下是否放大(即使设置了固定宽度,也会放大)
- 属性值:0(默认),表示不放大
flex-shrink 属性:
- flex-shrink 属性:用于决定项目在空间不足时是否缩小(即使设置了固定宽度,也会缩小)
- 属性值:1(默认),表示空间不足时所有项目一起等比例缩小
flex-basis 属性:
- flex-basis 属性:用于设置项目宽度
- 属性值:auto(默认),表示使用默认宽度,或者以 width 为自身的宽度
flex 属性:
- flex 属性是 flex-grow、flex-shrink 与 flex-basis 三个属性的简写形式,用于设置项目的放大、缩小与宽度
- 属性值:0 1 auto(默认),表示不放大、等比例缩小、使用默认宽度
align-self 属性:
- align-self 属性允许单个项目有与其它项目不一样的对齐方式,可覆盖 align-items 属性
- 属性值:auto(默认),表示继承父容器的 align-items 属性;如果没有父容器,则等同于 stretch
- 属性值:stretch,表示如果项目没有设置高度,或高度为 auto,则占满整个容器高度
- 属性值:flex-start,表示紧贴容器顶部
- 属性值:center,表示在竖直方向居中
- 属性值:flex-end,表示紧贴容器底部
// 示例
background: url(../images/icons.png) no-repeat -21px -94px;
旋转变形:
- 将 transform 属性的值设置为 rotate(旋转角度单位:deg),即可实现旋转变形
- 如果角度为正值,则顺时针方向旋转,否则逆时针方向旋转
- 可以使用 transform-origin 属性设置自己的自定义变换原点
缩放变形:
- 将 transform 属性的值设置为 scale(缩放倍数),即可实现缩放变形
- 当数值小于 1 时,表示缩小元素;大于 1 则表示放大元素
- 可以使用 transform-origin 属性设置缩放的中心点
斜切变形:
- 将 transform 属性的值设置为 skew(x斜切角度,y斜切角度),即可实现斜切变形,单位为:deg
位移变形:
- 将 transform 属性的值设置为 translate(向右位移,向下位移),即可实现位移变形
- 和相对定位非常相似,位移变形也会“原位留坑”,该元素不影响其它元素
3D 旋转:
- 将 transform 属性的值设置为 rotateX(度数)或者rotateY(度数),即可实现绕横轴、纵轴旋转
- perspective 属性用来定义透视强度,可以理解为“人眼到舞台的距离”,单位是px
/* 此处的 div 标签当作是舞台,p标签是演员(即盒子) */
/* 舞台必须设置 perspacetive 属性 */
/* 演员必须设置 transform 属性 */
<div>
<p></p>
</div>
空间移动:
- 当元素进行 3D 旋转后,即可继续添加 translateX()、translateY()、translateZ() 属性让元素在空间进行移动
- 空间移动要添加在 3D旋转之后。示例:transform: rotateX(30deg) translateX(30px) translateY(30px)
过渡的基本使用:
- transition 过渡属性是CSS3的一个特性,过渡可以为一个元素在不同样式之间变化自动添加“补间动画”
- 过渡从IE10开始兼容,移动端兼容良好
- 之前网页上的动画特效基本都是由JavaScript定时器实现的,现在逐步改为使用CSS3过渡
- 过渡的优点:动画更细腻,内存开销小
- transition 属性有4个要素:什么属性要过渡、动画时长、变化速度曲线、延迟时间。示例:transition: width 1s linear(匀速) 0s(单位秒不能省略);
- 如果要所有属性都参与过渡,可以写 all。示例:transition: all 1s linear 0s;
过渡的四个小属性:
- transition-property:哪些属性要过渡
- transition-duration:动画时间
- transition-timing-function:动画变化曲线(缓动效果)
- transition-delay:延迟时间
哪些属性可以参与过渡:
- 所有数值类型的属性都可以参与过渡,比如:width、height、left、top、border-radius
- 背景颜色和文字颜色都可以被过渡
- 所有变形(包括2D和3D)都能被过渡
常用的缓动参数:
- linear:匀速
- ease:
- ease-in:
- ease-out:
- ease-in-out:
- 网站https://cubic-bezier.com/可以生成贝塞尔曲线,可以自定义动画缓动参数
动画的定义:
- 可以使用 @keyframes 来定义动画,keyframes 表示“关键帧”,在项目上线前,要补上 @-webkit-这样的私有前缀
/* @keyframes 是定义动画的关键字。 r 是自定义动画的名字 */
@keyframes r {
/* 起始状态 */
form {
transform: rotate(0);
}
/* 结束状态 */
to {
transform: rotate(360deg);
}
}
动画的调用:
- 定义动画之后,就可以使用 animation 属性调用动画
- 第一个参数是:动画名字;第二个参数是:总时长;第三个参数是:缓动效果;第四个参数是:延迟;也可以有第五个参数:动画执行的次数。
- 如果想永远执行,可以在第五个参数写 infinite
- 如果想让动画的第偶数次自动逆向执行,那么在第五个参数后加 alternate 参数即可。示例:animation: r 1s linear 0s infinite alternate;
- 如果想让动画停止在最后结束状态,那么要加上 forwards。示例:animation: r 1s linear 0s forwards;
.box {
animation: r 1s linear 0s;
}
// 超出部分隐藏
overflow: hidden;
// 不让换行
white-space: nowrap;
// 内容多出部分用 ... 替代
text-overflow: ellipsis;
// html
<li class="have-menu">
<a href="">社区</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
// css
ul li.have-menu .arrow {
position: absolute;
width: 12px;
height: 12px;
right: 0;
top: 50%;
margin-top: -6px;
transition: transform .2s ease 0s;
}
ul li.have-menu:hover .arrow {
transform: rotate(180deg);
}
ul li.have-menu .arrow b {
position: absolute;
width: 6px;
height: 6px;
top: 3px;
left: 3px;
transform: rotate(45deg);
background-color: #fff;
}
ul li.have-menu .arrow i {
position: absolute;
width: 6px;
height: 6px;
top: 1px;
left: 3px;
transform: rotate(45deg);
background-color: #2a2a2a;
}
// html
<ul>
<li class="have-menu">
<a href="">当地玩乐</a>
</li>
</ul>
// css
ul li.have-menu::before {
content: '';
position: absolute;
right: 0;
top: 18px;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-top-color: #fff;
border-bottom: none;
transition: transform .2s ease 0s;
}
ul li.have-menu:hover::before {
transform: rotate(180deg);
}
html 部分结构:
- 这部分只需要在 \<ul> 标签中添加轮播图对应的 \<li> 标签和 \<img> 标签中的图片即可
- 别忘了引入 css 和 js
<body>
<section class="banner" id="banner">
<!-- <img src="images/banner1.jpg" alt=""> -->
<ul id="carousel_list" class="carousel_list">
<li>
<img src="images/banner1.jpg" alt="">
</li>
<li>
<img src="images/banner2.jpg" alt="">
</li>
<li>
<img src="images/banner3.jpg" alt="">
</li>
<li>
<img src="images/banner4.jpg" alt="">
</li>
<li>
<img src="images/banner5.jpg" alt="">
</li>
</ul>
<ol class="circles" id="circle_ol">
<!-- <li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ol>
<div class="center-wrap">
<a href="javascript:;" id="left_btn" class="leftbtn"></a>
<a href="javascript:;" id="right_btn" class="rightbtn"></a>
<!-- <nav class="banner-nav">
</nav> -->
</div>
</section>
</body>
<!-- 引入 JS 和 CSS -->
<script src="./js/carousel.js"></script>
<link rel="stylesheet" href="css/css.css">
css 部分结构:
- 原来代码中轮播图数量为:5
- 需要修改第 1、处的 width 为 轮播图数量加 1 再乘以百分之百,即:600%
- 还需要修改第 2、处的 width 为 轮播图数量加 1 分之一再乘百分百,即:16.666%
// css.css
/* 取消边距,并且取消 ul、ol、li 的样式 */
body,ul,ol,li {
margin: 0;
padding: 0;
list-style: none;
}
/* banner */
.banner {
position: relative;
overflow: hidden;
}
/* 轮播图 */
.banner .carousel_list {
/* 1、此处需要根据具体情况修改 */
width: 600%;
overflow: hidden;
}
.banner .carousel_list li {
float: left;
/* 2、此处需要根据具体情况修改 */
width: 16.666%;
}
.banner .carousel_list li img {
width: 100%;
/* 白边的处理 */
vertical-align: middle;
}
/* 轮播图下的点 */
.banner .circles {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -75px;
width: 140px;
height: 20px;
z-index: 9999;
}
.banner .circles li {
float: left;
width: 16px;
height: 16px;
background-color: rgb(27, 233, 147);
margin-right: 10px;
/* border-radius 设为高度一半 */
border-radius: 8px;
transition: all .5s ease 0s;
/* 鼠标指针变为小手状 */
cursor: pointer;
}
.banner .circles li:last-child {
margin-right: 0;
}
.banner .circles li.current {
width: 32px;
background-color: #20bd9a;
}
.banner .center-wrap {
/* 只要有压盖,第一时间想到绝对定位 */
position: absolute;
top: 0;
left: 0px;
width: 1152px;
left: 50%;
margin-left: -576px;
height: 100%;
}
.banner .center-wrap .leftbtn {
position: absolute;
top: 50%;
left: -38px;
margin-top: -22px;
width: 28px;
height: 44px;
background: url(../images/icons.png) no-repeat -21px -94px;
}
.banner .center-wrap .rightbtn {
position: absolute;
top: 50%;
right: -38px;
margin-top: -22px;
width: 28px;
height: 44px;
background: url(../images/icons.png) no-repeat -21px -29px;
}
.banner .center-wrap .leftbtn:hover,
.banner .center-wrap .rightbtn:hover {
/* 透明度 */
opacity: .8;
}
images 中的 CSS精灵图片:
- 将该图片下载保存到项目的 images 目录下并将图片命名为 icons.png 即可
JS 部分结构:
- 这部分不需要改动
/*
* 描述:轮播图特效
* 日期:21年5月21日
* js/carousel.js
*/
(function() {
// 得到元素
var carousel_list = document.getElementById('carousel_list');
var left_btn = document.getElementById('left_btn');
var right_btn = document.getElementById('right_btn');
// banner 轮播图的数量
var count = carousel_list.getElementsByTagName('li').length;
// 百分比
var percentage = Math.floor((1 / (count + 1)).toFixed(4) * 10000) / 100;
// console.log(percentage)
// 克隆第一张 li
var clone_li = carousel_list.firstElementChild.cloneNode(true);
// 上树
carousel_list.appendChild(clone_li);
// 当前正在显示的图片的序号,从 0 开始
var idx = 0;
// 函数节流锁
var lock = true;
// 右按钮添加事件监听
right_btn.onclick = right_btn_handler;
// 右按钮的事件处理函数
function right_btn_handler() {
// 判断节流锁的状态,如果是关闭状态,就什么都不做
if (!lock) return;
// 否则就要关锁
lock = false;
// 当回到 idx = 0 时,又加上过渡
carousel_list.style.transition = 'transform .5s ease 0s';
// 点击右按钮之前先加 1,表示到下一张图片
idx++;
// 拉动
carousel_list.style.transform = 'translateX(' + -percentage * idx + '%)';
// 判断是否是最后一张,如果是最后一张,那么就要瞬间移动回来
if (idx > count - 1) {
// 设置 0.5s 的原因是过渡的时间是 0.5s
// 时间设置与过渡保持一致
setTimeout(function() {
// 去掉过渡
carousel_list.style.transition = 'none';
// 删除 transform 属性
carousel_list.style.transform = 'none';
// 然后将全局图片序号变为 0
idx = 0;
}, 500);
}
// 调用设置小圆点
setCircles();
// 执行完成后,开锁
setTimeout(function() {
lock = true;
}, 500);
};
// 左按钮的事件监听
left_btn.onclick = function() {
// 判断节流锁的状态,如果是关闭状态,就什么都不做
if (!lock) return;
// 否则就要关锁
lock = false;
// 左按钮很特殊,要先写 if 判断语句
if (idx == 0) {
// 先取消过渡
carousel_list.style.transition = 'none';
// 然后瞬间拉动到最后一张图片(瞬间移动)
carousel_list.style.transform = 'translateX(' + -percentage * count + '%)';
// 改变 idx = count - 1 的值
idx = count - 1;
// 如果不延时就直接加过渡,由于 JS 的预解析就会相当于没有取消过渡
// 所以必须加一个延时 0ms 的延时器,可以让瞬移发生之后,再把过渡加上
setTimeout(function() {
// 加上过渡
carousel_list.style.transition = 'transform .5s ease 0s';
// 动画
carousel_list.style.transform = 'translateX(' + -percentage * idx + '%)';
}, 0);
} else {
// 点击左按钮之前先减 1,表示到下一张图片
idx--;
// 再拉动图片
carousel_list.style.transform = 'translateX(' + -percentage * idx + '%)';
}
// 调用设置小圆点
setCircles();
// 执行完成后,开锁
setTimeout(function() {
lock = true;
}, 500);
};
/*
* 小圆点相关
*/
var circles_ol = document.getElementById('circle_ol');
// 创建 li 标签
for (var j = 0; j < count; j++) {
var li = document.createElement('li');
circles_ol.appendChild(li);
}
var circle_lis = circles_ol.getElementsByTagName('li');
// 使第 1 个 li 默认有 current 类名
circle_lis[0].className = 'current';
// 设置小圆点当前再哪个 li 标签上;
// 序号为 idx 的小圆点才有 current 类名,其它的 li 都没有类名
function setCircles() {
// 遍历 count 次,每遍历一次,都要和 idx 比一下,
// 如果相等,就将这项设置类名为 current,否则,去掉类名
for (var i = 0; i < count; i++) {
if (i == idx % count) {
circle_lis[i].className = 'current';
} else {
circle_lis[i].className = '';
}
}
};
// 小圆点的监听
circles_ol.onclick = function(e) {
for (var k = 0; k < count; k++) {
if (e.target == circle_lis[k]) {
idx = k;
// 加上过渡
// carousel_list.style.transition = 'transform .1s ease 0s';
carousel_list.style.transform = 'translateX(' + -percentage * idx + '%)';
setCircles();
}
}
}
// 使用定时器定时自动执行轮播
var timer = setInterval(right_btn_handler, 2000);
// 鼠标进入,自动轮播暂停
var banner = document.getElementById('banner');
banner.onmouseenter = function() {
clearInterval(timer);
}
// 鼠标离开,自动轮播重新开锁
banner.onmouseleave = function() {
// 设表先关
clearInterval(timer);
timer = setInterval(right_btn_handler, 2000);
}
})();
HTML 代码:
<!-- 返回顶部按钮 -->
<a href="javascript:;" class="backtop" id="backtopId">
返回<br>顶部
</a>
CSS 代码:
/* 返回顶部按钮 */
.backtop {
position: fixed;
bottom: 80px;
right: 80px;
width: 80px;
height: 80px;
background-color: #ccc;
font-size: 20px;
text-align: center;
padding-top: 12px;
box-sizing: border-box;
color: #000;
display: none;
}
JS 代码:
(function() {
var backtotop = document.getElementById('backtopId');
var timer;
// 返回顶部
backtotop.onclick = function() {
// 设表先关
clearInterval(timer);
// 设置定时器
timer = setInterval(function() {
document.documentElement.scrollTop -= 100;
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer);
}
}, 20);
}
// 监听页面的滚动
window.onscroll = function() {
// 卷动值
var scrollTop = document.documentElement.scrollTop || window.scrollY;
if (scrollTop == 0) {
backtotop.style.display = 'none';
} else {
backtotop.style.display = 'block';
}
}
})();
img {
vertical-align: top;
border: none;
}
/**
* 设置滚动条的样式
*/
::-webkit-scrollbar {
/* 滚动条整体样式:高宽分别对应横竖滚动条的尺寸 */
height: 2px;
width: 2px;
}
::-webkit-scrollbar-thumb {
/* 设置滚动条里面滑块的样式 */
/* border-radius: 5px; */
/* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
/* background: rgba(0, 0, 0, 0.2); */
}
::-webkit-scrollbar-track {
/* 设置滚动条里面轨道的样式 */
/* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
/* border-radius: 0; */
/* background: rgba(0, 0, 0, 0.1); */
}