文档章节

HTML+CSS

o
 osc_1ee7cxmx
发布于 2018/08/06 17:38
字数 11958
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>

WEB概述:
    1、什么是WEB
        1、WEB就是互联网上的一种应用程序(网页程序)
    2、程序结构:
        1、C/S: C:Client 客户端, S:Server 服务器
            1、缺点:需要经常更新
        2、B/S:B:Browser 浏览器,S:Server 服务器
    3、WEB的组成和运行流程
        1、web组成:浏览器,服务器,和 通信协议组成
            1、浏览器:代替用户向服务器发送请求(User Agent)
            2、服务器:接收用户请求并给出响应
            3、通信协议:规范了请求和响应数据是如何打包以及传递的(http协议)
                HTTP:Hyper Text Transfer Protocal(超文本传输协议)
    4、web服务器:
        1、服务器的作用:
            1、用于接收用户的请求并给出响应
            2、存储web的信息(视频等)
            3、具备安全性能功能(密码需要加密等)
        2、产品:
            1、Apache
            2、Tomcat
            3、IIS
            4、Nginx
        3、技术:
            1、Python Web
            2、JSP
            3、PHP
            4、ASP.NET
    5、WEB浏览器:
        1、作用:
            1、代替用户向服务器发送求情
            2、作为响应数据的解释和执行引擎
        2、主要浏览器产品:
            1、Microsoft IE(Internet Explorer)
            2、Google Chrome
            3、Mozilla Firefox
            4、Apple Safari
            5、Opera Opera
        3、浏览器靠内核处理数据,内核包括以下两个部分:
            1、内容排版引擎——HTML,CSS
            2、脚本解释引擎——JavaScript
        4、浏览器技术
            1、HTML
            2、CSS
            3、JavaScript

HTML概述
    1、HTML介绍 和 基础语法
        1、什么是HTML
            Hyper Text Markup Language(超级本文标记语言)
            1、超文本:具有特殊功能的文本
                示例:
                    1、普通文本 a:普通字符a      ;b:普通字符b
                    2、超级文本 a:表示超级连接功能;b:表示加粗功能
            2、标记:超文本的组成形式
                示例:
                    1、普通文本 a:a
                    2、超级文本 a:<a></a>
            3、HTML是由W3C负责制定和推广规范的
                1、W3C:World Wide Web Consortium(万维网联盟)
        2、HTML在计算机中的表现
            1、HTML在计算机中以.html 或者.htm 为结尾的文件存在的
            2、开发工具:所有的文本编辑软件
                1、Windows 记事本
                2、Editplus,Sublime
                3、Webstorm,Dreamweaver,...
            3、运行工具:浏览器
        3、标记的语法规范
            1、什么是标记
                在网页中用于表示功能的符号称为‘标记’/'标签'/‘元素’
            2、语法
                1、标记在使用过程中,需要用<>括起来
                2、标记分为双标记和单标记
                    1、双标记
                        1、双标记是有显示的开始 和结束标记组成的,<标记>内容</标记>
                        2、示例:
                            1、<s>删除线</s>
                            2、<b>加粗</b>
                        3、注意:有开始,必须有结束,否则会产生意想不到的效果
                    2、单标记
                        1、只有一个标记,既要表示开始,也能表示结束
                        2、语法:<标记>  或者  <标记/>
                        3、示例
                            1、<br> 或 <br/>:换行
                            2、<hr> 或 <hr/>:一条水平线
                            3、<img> 或 <img/>:图片
                            4、<input> 或 <input/>:表单空间
            3、标记的嵌套    
                1、在一对标记中,又出现了其他的标记,相当于就是功能的嵌套
                2、示例:
                        <s>
                            <b>文本内容</b>
                        </s>
                3、注意:标记嵌套时一定要注意格式问题:
                    1、被嵌套的内容一定要加缩进
            4、标记的属性 和 值
                1、什么是属性
                    1、在标记中,属性是用来修饰标记的显示效果的
                2、语法:
                    1、属性必须要声明在开始标记中
                    2、属性和标记之间要用空格隔开
                    3、属性和值之间要使用=号连接,值要用‘’或者“”号引起来
                    4、一个元素允许设置多个属性,并且排名不分先后,多属性之间用 空格 隔开
            5、HTML中的注释:
                1、<!--备注内容-->
                2、注意:
                    1、注释不能出现在<>中
                    2、注释不能嵌套
    2、HTML文档结构
        1、文档类型声明
            1、出现在网页最顶端的第一个标记
            2、作用:告诉浏览器使用的是HTML的哪个版本
                示例:<!doctype html>:h5的文本声明,不区分大小写
        2、html页面:
            1、在文档类型声明之下,使用一对<html></html>根标记来表示页面
            2、html根标记要包含两对子标记:
                1、<head></head>:表示网页头部信息
                2、<body></body>:表示网页的主体,显示给用户看的内容
        3、<head></head>元素
            1、<title>标题</title>
            2、<meta charset='utf-8'/>:指定网页内容的编码格式,此处需要与html文件保存的编码一致
            3、指定网页的关键字——面向搜索引擎(用户看不到),营销网站必须有的
                <meta name='keywords' contnet='关键字1,关键字2,关键字3'>
            4、指定网页的描述文本——面向搜索引擎
                <meta name='description' content='描述的内容一般大概100字之内字之内'>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name='keywords' content="减肥,减肥妙招,一天瘦十斤"/>
        <meta name='description' content='还在为肥胖而感到苦恼吗?'/>
        <title>我的第一个网页</title>
    </head>
        <body>
    </body>
</html>

HTML标记
    1、文本
        1、HTML中的特殊字符
            1、&nbsp:表示一个空格,多个&nbsp之间用;分号分开
            2、&lt:表示一个<
            3、&gt:表示一个>
            4、&copy:表示一个©(copyright)
            5、&yen:表示¥

    6、注意:使用&lt和&gt生成的尖括号将失去原有标签的功能

&lt;p&gt;&lt;/p&gt;&nbsp;&nbsp;&nbsp:在网页中表示的是一个段落元素&copy版权所有:&yen:9999
<p></p>   :在网页中表示的是一个段落元素©版权所有:¥:9999

        2、文本样式标记
            1、作用:改变文本在网页中的表现形式
            2、标记:
                1、<i></i>:斜体
                2、<u></u>:下划线
                3、<s></s>:删除线
                4、<b></b>:加粗
                5、<sup></sup>:上标
                6、<sub></sub>:下标
                7、特点:以上标记允许与其他文本内容在一行内显示

这是一段有<b>加粗</b><i>斜体</i><s>删除线</s><u>下划线</u>,上<sup></sup>,下<sub></sub>的文本
这是一段有加粗斜体删除线下划线, 上
,下
的文本

        3、标题标记
            1、语法:<h#></h#> ,#表示1-6
            2、特点:
                1、改变文字的大小以及加粗效果
                2、每个标题都具备垂直的空白距离
                3、每个标题独占一行
                4、每个标题都具有一个属性
                    1、属性:align
                    2、值:
                        1、left:居左显示(默认)
                        2、center:居中显示
                        3、right:居右显示

<h1 align='center'>静夜思</h1>
<h2 align="center">李白</h2>
<h3 align="right">床前明月光</h3>
<h4 align="left">疑是地上霜</h4>
<h5>举头望明月</h5>
<h6>低头思故乡</h6>

        4、段落元素:
            1、作用:突出显示一段文本
            2、特点:
                1、独占一行
                2、每个元素有具备垂直空白距离
            3、语法:<p></p>
                1、属性:alig
                2、值:left/center/right
                3、特点:不能嵌套块级元素
        5、换行元素:<br> 或者 <br/>
        6、水平线元素:<hr> 或者 <hr/>
        7、分区元素:
            1、块分区元素
                标记:<div></div>
                特点:独占一行,可以嵌套任何内容
                属性:align(取值:left/center/right)
                作用:布局
            2、行内分区元素
                标记:<span></span>
                特点:能在一行中显示多个,只能嵌套文本,i,u,s,b,等元素
                作用:设置同一行文本的不同样式
        8、行内元素 与 块级元素
            1、按照元素不同的表现形式,对元素进行一个类别的划分
            2、块级元素:
                1、在网页中能独占一行的元素都是块级元素
                2、比如:p,div, h1~h6,
                3、特点:块级元素都有align属性
            3、行内元素:
                1、多个元素能够在一行内显示的,都是行内元素
                2、比如:span,i,b,s,u,sup,sub等元素

1、列表标记
    1、列表的组成
        1、列表的类型
            1、有序列表:<ol></ol> (Order List)
            2、无序列表:<ul></ul>(Unorder List)
        2、列表项:<li></li>(List Item)
    2、列表的属性
        1、<ol></ol>
            属性:type
            取值:
                1、1:按数字方式显示标识,默认值
                2、A:按大写英文字母方式显示标识,Z之后是AA,AB....
                3、a:按小写英文字母方式显示标识
                4、I:按大写罗马数字方式显示标识
                5、i:按小写罗马数字方式显示标识
        2、<ul></ul>
            属性:type
            取值:
                1、disc:默认值,实心圆点
                2、circle:空心圆点
                3、square:实心方块
                4、none:不显示任何符号

<ol>
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>水浒传</li>
        </ol>
        <ol type="1">
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>水浒传</li>
        </ol>
        <ol type="A">
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>水浒传</li>
        </ol>
        <ol type="a">
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>水浒传</li>
        </ol>
        <ol type="I">
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>水浒传</li>
        </ol>
        <ol type="i">
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
            <li>水浒传</li>
        </ol>

        <ul>
            <li>金毛狮王</li>
            <li>青翼蝠王</li>
            <li>紫衫龙王</li>
            <li>白眉鹰王</li>
        </ul>
        <ul type="disc">
            <li>金毛狮王</li>
            <li>青翼蝠王</li>
            <li>紫衫龙王</li>
            <li>白眉鹰王</li>
        </ul>
        <ul type="circle">
            <li>金毛狮王</li>
            <li>青翼蝠王</li>
            <li>紫衫龙王</li>
            <li>白眉鹰王</li>
        </ul>
        <ul type="square">
            <li>金毛狮王</li>
            <li>青翼蝠王</li>
            <li>紫衫龙王</li>
            <li>白眉鹰王</li>
        </ul>
        <ul type="none">
            <li>金毛狮王</li>
            <li>青翼蝠王</li>
            <li>紫衫龙王</li>
            <li>白眉鹰王</li>
        </ul>
View Code

    3、列表的嵌套
        1、被嵌套的内容必须放在li中

<ol>
    <li>
        水浒传
        <ol type='a'>
            <li>西门庆</li>
            <li>潘金莲</li>
            <li>武大郎</li>
        </ol>
    </li>
    <li>
             三国演义
        <ol type='i'>
            <li>吕布</li>
            <li>貂蝉</li>
            <li>董卓</li>
        </ol>
    </li>
</ol>

2、图形 和 链接
    1、URL
        1、什么是URL
            1、Uniform Resource Locator(统一资源定位符),主要用于标识网络中资源的位置,俗称路径
        2、URL分类
            1、绝对路径
                1、从一个固定的位置处去查找资源文件的地址
                2、网络资源:
                    1、协议名称(https)
                    2、主机名称/域名/IP地址(www.baidu.com)
                    3、目录路径(文件所在的文件夹)(img)
                    4、文件名称(bd_logo1.png)
                    https://www.baidu.com/img/bd_logo1.png
            2、相对路径
                1、从当前的文件位置处开始查找资源文件所经过的路径就是相对路径
            3、根相对路径
                1、以‘/’作为开始来标识的路径
    2、图像
        1、标记:<img/>
        2、属性:
            1、src:要显示的图片的URL(相对/绝对/根相对)
            2、width:设置图片的宽度,以px为单位的数值(允许省略px)
            3、height:设置图片的高度,同上

    4、title:表示没有刷新出来图片的时候显示的
            5、注意:width和height,如果只设置一个属性值,那么另外一个属性值也会跟着等比缩放

<img src="https://www.baidu.com/img/bd_logo1.png" title="百度" width="270" />

    3、超链接
        1、什么是超链接
            允许通过鼠标的点击完成页面跳转的行为就是超链接
        1、标记:<a>内容</a>
        2、属性:
            1、href:标识要链接到的文件的地址,href='#'表示链接到本页
            2、target:指定打开新网页的方式
                取值:
                    1、_self:默认值,在自身标签页中打开新网页
                    2、_blank:在新标签页中打开新网页

<a href="https://www.baidu.com/img/bd_logo1.png" target="_blank">百度</a>

3、表格
    1、什么是表格
        1、表格是按照一定的结构来展示数据的,表格是按照从上到下,从左到右的方式来展示数据的,数据全部都存在单元格中
    2、表格的语法:
        1、标记
            1、表格:<table></table>
            2、表行:<tr></tr>(Table Row)
            3、单元格(列):<td></td>(Table Data)
        2、属性
            1、表格
                1、border:指定表格的边框宽度,以px为单位(px可以省略)
                2、width:指定表格的宽度,以px为单位
                3、height:指定表格的高度
                4、align:指定表格在父元素中的水平对齐方式
                    取值:(left,center,right)
                5、cellpadding:单元格内边距
                6、cellspacing:单元格外边距
            2、tr属性
                1、align:控制当前行的文本的水平对齐方式
                    取值:left/center/right
                2、valign:控制当先列的文本的垂直对齐方式
                    取值:top/middle/bottom
                3、bgcolor:控制当前行的背景颜色
                    1、取值:表示颜色的英文单词
            3、td属性:
                1、width:单元格的宽度,改变一个单元格的宽度将改变该列的宽度
                2、height:单元格的高度,改变一个单元格的高度将改变该行的高度
                3、align:
                4、valign:
                5、bgcolor
                6、colspan:跨列
                7、rowspan:跨行
    3、不规则表格的创建
        1、单元格的跨列
            1、从指定单元格位置开始,横向向右合并几个单元格(包括自己),需要手动删除被合并掉的单元格
            2、语法:colspan=‘n’
        2、单元格的跨行
            1、从指定单元格位置开始,纵向向下合并几个单元格(包括自己),需要手动删除被合并掉的单元格
            2、语法:rowspan=‘n’
    4、行分组
        1、语法
            1、表头行分组:<thead></thead>
            2、表尾行分组:<tfoot></tfoot>
                表格的最后一行如果要分组的话,放在表尾行分组
            3、表主题行分组:<tbody></tbody>
                除表头和表尾分组之外,剩余的放在表主题分组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <table border="1" width="400" align="center" cellpadding="10" cellspacing="0">
        <thead bgcolor='blue'>
        <tr align="center">
            <td bgcolor="red">姓名</td>
            <td>身高</td>
            <td>体重</td>
            <td>年龄</td>
        </tr>
        </thead> 
        <tr>
            <td bgcolor="red" width="600" height="60" align="center" valign="bottom">范冰冰</td>
            <td colspan="2" align="center">158</td>
            <td>58</td>
        </tr>
        <tr>
            <td>李冰冰</td>
            <td>166</td>
            <td rowspan="2">92</td>
            <td>40</td>
        </tr>
        <tr>
            <td>孙冰冰</td>
            <td>172</td>
        
            <td>24</td>
        </tr>
    </table>

</body>
</html>

4、表单
    1、作用:收集用户信息并提交给服务器
    2、特点:表单在网页中是不可见的,但是功能是不能忽略的
    3、表单中的两个要素:
        1、form元素:收集用户的信息
        2、表单控件:能够与用户进行数据交互的可视化组件
    4、form元素
        1、作用:就是表单,收集信息并提交给服务器
        2、语法:<form></form>
            注意:只有放在form中的表单控件,才能被提交
        3、属性:
            1、action:指定要提交给服务器上处理程序的地址,默认提交给本页
            2、method:提交方法/方式
                取值:
                    1、get:默认值,向服务器要数据的时候使用get
                        特点:
                            1、提交的数据会显示在地址栏上
                            2、安全性较低
                            3、有提交数据的大小限制(在2KB之内)
                    2、post:要提交数据给服务器处理时,使用post
                        特点:
                            1、隐式提交,看不到提交的数据
                            2、安全性较高
                            3、无提交数据的大小限制
            3、enctype(encoding type):指定表单数据进行编码的方式,即允许将什么样的数据提交给服务器
                取值:    
                    1、application/x-www-form-urlencoded:默认值,允许将所有的文本数据提交给服务器
                    2、multipart/form-data:允许将文件提交给服务器
                    3、text/plain:允许将普通字符([0-9A-Za-z_])提交给服务器,特殊字符不能提交
    5、表单控件
        1、作用:可视化的组件,用于与用户进行数据交互,表单控件只有放在<form>中才允许被提交
        2、表单控件详解
            1、文本框 与 密码框
                1、文本框:<input type='text'>
                2、密码框:<input type='password'>
                3、属性:
                    1、name:为控件起名,在服务器上使用,如果不声明name属性,则无法提交
                    2、value:值,控件上所显示的值
                    3、maxlength:限制输入的最大数字数,不能限制value值的默认值的长度
                    4、palceholder:提示占位符,该值不会被提交,如果不设置value值,则输入框中显示该值,不受maxlength的限制
            2、按钮
                1、提交按钮:<input type='submit'>或者<button type='submit'>按钮上的文字</button>
                2、重置按钮:<input type='reset'>或者<button type='reset'>按钮上的文字</button>
                3、普通按钮:<input type='button'>或者<button type='button'>按钮上的文字</button>
                4、属性:
                    1、value:控制按钮上面的文字

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
    <form action="login" method="GET">
        <p>
        用户名称:<input type="text" name="username" value='123456785' maxlength='5' placeholder="请输入用户名称">
        </p>
        <p>
            用户密码:<input type="password" name="userpwd" maxlength="6" placeholder="请输入用户密码">
        </p>
        <p>
            <input type="submit" name="" value="提交按钮">
        </p>
        <p>
            <input type="reset" name="" value="重置按钮">
        </p>
        <p>
            <input type="button" name="" value="普通按钮">
        </p>
    </form>

</body>
</html>
View Code

    3、单选按钮 和 复选框
                1、单选框:<input type='radio'>
                2、复选框:<input type='checkbox'>
                3、属性:
                    1、name:为控件定义名称,除了定义名称之外,name属性也起到了分组的作用,
                        注意:一组的单选按钮和复选框,名称必须一致
                    2、value:定义控件的值,当用户选中控件的时候,则将该控件的value值提交给服务器
                    3、checked:设置预选中,该属性无值
            4、隐藏域 和 文件选择框
                1、隐藏域
                    1、作用:想提交给服务器但是不想给用户看的数据要放在隐藏域中
                    2、语法:<input type='hidden'>
                        属性:
                            1、name:定义控件的名称
                            2、value:定义控件的值
                2、文件选择框:用于向服务器发送文件
                    1、语法:<input type='file'>
                        属性:name:定义控件的名称
                    2、注意:
                        1、表单的method必须为post
                        2、表单的enctype必须为multipart/form-data
            5、多行文本域:
                1、标记:<textarea></textarea>
                2、属性:
                    1、name:定义控件的名称
                    2、cols:指定文本域的列数(一行中最多能显示多少个英文字符,中文减半),滚动条占一列
                    3、rows:指定文本域的默认行数(超过这个行数将出现滚动条)
            6、下拉选项框:
                1、语法:
                    <select name=''>
                        <option value='值1'>显示内容1</option>
                        <option value='值2'>显示内容2</option>
                        <option value='值3'>显示内容3</option>
                        ...
                    </select>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
    <form action="login" method="post" enctype="multipart/form-data">
        <p>
            性别:
            <input type="radio" name="gender" value="0"><input type="radio" name="gender" value="1" checked></p>
        <p>
            爱好:
            <input type="checkbox" name="hobby" checked><input type="checkbox" name="hobby" checked><input type="checkbox" name="hobby"><input type="checkbox" name="hobby"></p>
        <p>
            <input type="hidden" name="uid" value="123456">
        </p>
        <p>
            用户头像:
            <input type="file" name="uImg">
        </p>
        <p>
            自我介绍:
            <textarea name="into" cols="10" rows="5">fsfsdfsdfsdfsdfsdfdsfdsfsdfdsfsdfdsfsd</textarea>
        </p>
        <P>
            所在地址:
            <select name='addr'>
                <option value="1">北京市</option>
                <option value="2">上海市</option>
                <option value="3">重庆市</option>
                <option value="4">天津市</option>
            </select>
        </P>
    </form>

</body>
</html>
View Code

 CSS
    1、CSS介绍
        CSS:Cascading Style Sheets 级联样式表
            HTML:搭建网页结构
            CSS:在网页结构基础上进行网页的美化
    2、CSS的使用方式(重点)
        1、内联方式:将CSS内容定义在单独的HTML元素中
            1、语法:<ANY style='样式声明'>
            1、样式声明:
                1、每个样式声明都是由样式属性名称和样式属性值来组成的
                2、属性名称和属性值之间使用:冒号连接
                3、在一个style中允许出现多个样式声明,多个样式声明之间使用;分号分割
                4、示例:<ANY style='属性1:值1;属性2:值2;属性3:值3...'>
                5、常用的属性和值
                    1、文字大小
                        属性:font-size
                        取值:以px为单位的数值,px不能省略
                    2、文本的颜色
                        属性:color
                        取值:表示颜色的英文单词
                    3、背景颜色
                        属性:background-color
                        取值:表示颜色的英文单词
        2、内部样式表
            1、作用:让定义好的样式使用在多个元素中
            2、语法:
                <head>
                    <style>
                        样式规则1
                        样式规则2
                        ...
                        样式规则n
                    </style>
                </head>
                样式规则:
                    1、由选择器 和 样式声明组成
                    2、选择器:规范了页面中哪些元素能够使用声明好的样式
                    3、示例:
                        选择器{
                            样式声明1;
                            样式声明2;
                            ...
                        }
            3、注释:在<style>中使用/*  */来表示注释
        3、外部样式表
            1、作用:让声明好的样式适用于多个网页中
                将样式规则声明在独立的css文件中(xxx.css)
                在使用的网页上对xxx.css文件进行引用
                <head>
                    <link rel='stylesheet' href='css文件路径'>
                </head>
    3、CSS样式表的特征
        1、继承性:大部分的CSS属性是可以由父元素继承给子元素的
        2、层叠性:
            允许为一个元素定义多种使用方式(内联,内部样式表,外部样式表)。如果定义的属性不冲突的话,那么所有的属性都可以应用到元素上
        3、优先级:如果样式声明冲突的话,则按照不同的优先级来应用样式
            1、浏览器缺省设置:最低
            2、内部或外部样式表:中
                1、就近原则:后定义者优先
            3、内联方式:最高

     4、可以在样式后面添加 !import表示优先级最高
        4、调错:
            1、Unknown property name:样式属性名称写错了
            2、Invalid property value:样式属性值写错了
    4、css选择器(重难点)
        1、CSS选择器的作用
            1、规范了页面中哪些元素能够使用声明好的样式
            2、为了匹配页面中的元素
        2、选择器详解
            1、元素选择器
                1、特点:由元素名称作为选择器,目的是为了匹配页面中指定元素名称的所有标记
                2、语法:
                    元素名{
                        样式声明1
                        ...
                    }
            2、类选择器:
                1、特点:允许被页面上任意一个元素所引用
                2、语法:
                    .类选择器名称{
                        样式声明1
                        ....
                    }
                3、命名规范:字母,数字下划线组成,数字不能开头
                4、引用类选择器:
                    <ANY class='类名'>
                5、特殊用法:
                    1、分类选择器的定义方式
                        1、特点:允许将元素选择器或类选择器结合到一起使用
                        2、目的:为了实现对某种元素不同样式的细分控制
                        3、语法:
                            元素选择器.类选择器{
                                ...
                            }
                    2、多 类选择器的引用方式:
                        1、特点:让一个元素引用多个类选择器,多个类选择器名称之间用空格分开
                        2、<ANY class='类名1 类名2'>
            3、id选择器
                1、id:在HTMl中,每个元素都可以声明一个id属性,取值在网页中必须是独一无二的,不能重复的
                2、id选择器的作用:为了匹配页面中指定id值的元素
                3、语法:
                    #id选择器名{...}    
            4、群组选择器
                1、作用:定义多个选择器们共有的样式
                2、声明方式是一个以,逗号隔开的选择器列表
                3、语法:选择器1,选择器2,选择器3...{...}
            5、后代选择器:(只要具备层级关系,不管是几层层级关系,子代也属于后代)
                1、作用:
                    依托于元素的后代关系来匹配某元素的后代元素(不限制层级)
                2、语法:
                    选择器1 选择器2{}
                3、示例:
                    1、div span{
                                匹配所有的div中所有的span元素    
                            }
                    2、#top .important{
                                匹配id为top中所有class为important的元素
                            }
            6、子代选择器:(具有一层层级关系)
                1、作用:
                    依托于元素的子代关系来匹配元素(只有一层层级)
                2、语法:选择器1>选择器2>选择器3...{....}
                3、示例:
                    1、#main>.important{
                                匹配id为main中子代class为important的元素
                            }
            7、伪类选择器
                1、作用:为了匹配元素不同状态的选择器,通常会配合其他选择器一起使用(选择器:伪类状态{...})
                2、语法::伪类状态
                    1、连接伪类
                        1、:link:匹配超链接未被访问时的状态
                        2、:visited:匹配超链接被访问过后的状态
                    2、动态伪类
                        1、:hover:匹配当鼠标悬停在元素上时的状态
                        2、:active:匹配当元素被激活是的状态(点击时的状态)
         3、:focus:匹配元素获取焦点时的样式(在输入框内显示光标时)
    5、选择器的优先级
        1、选择器的优先级看权值

选择器 权值
元素选择器 1
伪类/类选择器 10
id选择器 100
内联方式 1000

 

 

 

 

 

  2、说明:

     1、复杂的选择器,权值进行累加计算

     2、当权值相同时,且属性有相同的,则按就近原则进行选择

1、尺寸 与 边框
    1、CSS单位
        1、尺寸单位
            1、px:像素
            2、%: 百分比
            3、in:英寸  1 in = 2.54cm,对角线
            4、pt:磅        1 pt = 1/72in
                ppi:Pixel Per Inch = 72(一英寸中含有72个点)
            5、mm:毫米
            6、cm:厘米
            7、注意:在CSS中,尺寸的单位是不能省略的
        2、颜色单位(取值)
            1、rgb(R,G,B)
                r:red(0-255)
                g:green(0-255)
                b:blue(0-255)
                rgb(0,0,0):黑色
            2、rgba(r,g,b,alpha)
                alpha:0-1的小数,0:完全透明,1:完全不透明
                rgba(0,0,0,0.3):黑色加0.3的透明度
            3、#rrggbb
                由6位16进制数字表示一种颜色
                #000000:黑色
                #111111:白色
            4、#rgb
                #rrggbb的缩写,每两位数字相同时,可以采用缩写
                #000:黑色
                #111:白色
    2、尺寸:
        1、作用:改变元素的宽度和高度
        2、属性:
            1、width:改变元素的宽度
            2、height:改变元素的高度
            块级元素的默认尺寸:
                1、宽度:占父元素的100%
                2、高度:以内容为准
            行内元素的默认尺寸
                1、宽度:以内容为准
                2、高度:以内容为准
        3、允许修改尺寸的元素:
            1、所有的块级元素都可以修改
            2、所有的行内块(表单控件)元素都可以修改
            3、table(不是块级,行内,行内快元素)允许修改尺寸
            4、除img以外的行内元素们,不允许修改尺寸
        4、溢出处理
            1、什么是溢出
                当使用尺寸属性限制元素的尺寸时,如果内容所需要的空间大于元素尺寸时,就会产生溢出效果
            2、溢出处理属性:
                属性:overflow
                取值:
                    1、visible:默认值,可见的
                    2、hidden:隐藏
                    3、scroll:显示滚动条,溢出时可用,没溢出时不可用
                    4、auto:自动,溢出方向会产生滚动条,没溢出时不显示滚动条
    3、边框:
        1、边框的实现
            1、简写方式
                通过一个属性设置4个方向边框的所有效果(宽度,样式,颜色)
                属性:border
                取值:width style color
                    width:边框的宽度,以px为单位
                    style:边框的样式
                        solid:实线
                        dotted:虚线(点)
                        dashed:虚线(线)
                    color:颜色 或者 transparent(透明)
                特殊用法:border:none 或者 border:0
            2、单边定义
                只设定某一条边的边框的宽度,样式,颜色
                语法:
                    border-方向:width style color
                    方向:top,bottom,left,right
                特殊用法:border-方向:none
            3、单属性定义
                设置四条边框的某一个属性值
                语法:
                    border-属性:值
                属性:
                    border-width
                    border-style
                    border-color
            4、单边单属性设置
                设置某一方向边框的某一属性值
                语法:
                    border-方向-属性:值
                    方向:top/bottom/left/right
                    属性:width/style/color
        2、边框的组成:
            1、边框是由四个三角形组成的(宽高都为0的时候),或四个梯形组成的(宽高不为0的时候)
        3、轮廓:(边框外围的边框,一般表单控件都有轮廓)
            outline:none;
        4、边框倒角
            将边框的四个直角变为圆角
            属性:border-radius
            取值:
                1、以px为单位的数值
                2、以%为单位的数值(一般为50%)
        5、边框阴影
            属性:box-shadow
            取值:h-shadow v-shadow blur spread color
                h-shadow:以px为单位的数值,水平偏移,取正值,阴影右偏移,负,左偏移(必须的)
                v-shadow:以px为单位的数值,垂直偏移,正,下偏,负,上偏(必须的)    
                bulr:以px为单位的数值,模糊距离,数值越大,模糊效果越强烈
                spread:以px为单位的数值,阴影尺寸
                color:阴影颜色
    4、框模型(盒子模型)
        1、什么是框模型
            1、框:Box ,页面元素皆为框
            2、框模型:Box Modle,定义了元素的尺寸和距离的一种计算方式
                1、包含:尺寸属性,边框属性,外边距属性,内边距属性
                2、当框模型的属性们应用到元素中的时候,那么元素整体所占尺寸就会发生变化
                3、元素的实际宽度=左右外边距+左右边框宽度+左右内边距宽度+width
                4、元素的实际高度=上下外边距+上下边框宽度+上下内边距宽度+height
        2、外边距:
            1、什么是外边距
                围绕在元素边框/边缘之外的空白距离就是外边距
            2、语法:
                1、margin:控制四个方向的外边距
                2、margin-top:上边距
                3、margin-bottom:下边距
                4、margin-left:左边距
                5、margin-right:右边距
            3、取值:
                1、以 px为单位的数值
                2、以% 为单位的数值(占父元素的百分比)
                3、取值为负数:移动元素时使用,(一般用在margin-top和margin-left)
                    1、为元素设置上外边距为正数时向下移动
                    2、为元素设置上外边距为负数时向上移动
                    3、为元素设置左外边距为正数时向右移动
                    4、为元素设置左外边距为负数时向左移动
                4、取值为auto:自动
                    1、只对左右外边距有效,上下无效
                    2、只能为设置宽度的块级元素设置左右外边距为auto
                    3、作用:让块级元素是水平居中
                5、margin属性的简洁用法:
                    1、margin:value
                        value表示上下左右四个方向的外边距距离
                    2、margin:v1,v2
                        v1:表示上下外边距的距离
                        v2:表示左右外边距的距离
                    3、margin:v1,v2,v3
                        v1:表示上外边距的距离
                        v2:表示左右外边距距离
                        v3:表示下外边距的距离
                    4、margin:v1,v2,v3,v4
                        v1:上
                        v2:右
                        v3:下
                        v4:左
            4、页面中具有默认外边距的距离
                1、<p></p>
                2、h1~h6
                3、ol,ul
                4、body
                会通过CSS重写的方式,取消默认的外边距
                body,p,h1,h2,h3,h4,h5,h6,ol,ul{
                    margin:0;
                }

        3、内边距
            1、什么是内边距
                内容与元素边缘之间的距离,内边距会扩大元素边框内所占的区域
            2、语法:
                1、属性
                    1、padding:四个方向的内边距
                    2、padding-top
                    3、padding-bottom
                    4、padding-left
                    5、padding-right
                2、取值:
                    1、以px为单位的数值
                    2、以%为单位的数值
                3、padding的简洁写法
                    1、padding:value:四个方向内边距
                    2、padding:v1 v2:上下,左右
                    3、padding:v1 v2 v3:上,左右,下
                    4、padding:v1 v2 v3 v4:上,右,下,左
                4、页面中具有默认内边距的元素:
                    1、ol,ul:左右内边距为40px
                    2、文本框,按钮
        4、box-sizing属性:
            1、作用:重新指定框模型的计算方式
            2、属性:box-sizing
            3、取值:
                1、content-box(默认值)
                    1、元素的width属性只表示内容区域的宽度
                    2、元素的hegiht属性只表示内容区域的高度
                2、border-box
                    1、元素的width属性包括内容区域宽度,左右内边距和左右边框的值
                    2、元素的height属性包括内容区域高度,上下内边距和上下边框的值
    5、背景属性:
        1、背景颜色
            属性:background-color
            取值:合法的颜色值
            注意:背景颜色是从border位置处开始绘制的(包括内边距和内容)
        2、背景图像
            属性:background-image
            取值:url(‘图片路径’)
        3、背景图片平铺
            属性:background-repeat
            取值:
                1、repeat:默认值,横向纵向都平铺
                2、no-repeat:不平铺
                3、repeat-x:只在横向平铺
                4、repeat-y:只在纵向平铺
        4、背景图片尺寸
            属性:background-size
            取值:
                1、width:宽度,以px为单位,以%为单位
                2、height:高度,以px为单位,以%为单位
        5、背景图片位置
            1、作用:改变背景图片在元素中的位置
            2、属性:background-position
            3、取值:
                1、x  y:以px为单位的数值,用空格隔开
                    x:背景图像的水平偏移位置,取值为正,图片右移,负,左偏移
                    y:背景图像的垂直偏移位置,取值为正,图片下移,负,上偏移
                2、x% y%:
                    0% 0%:在左上角
                    100% 100%:在右下角
                    50% 50%:在中间
                3、关键字
                    x可以被left/ center/ right所取代
                    y可以被top/ center/ bottom所取代
        6、背景属性
            属性:background
            取值:color url() repeat position
            示例:
                1、background:red
                2、background:rul(‘a.png’ no-repeat -30px 90%)
    6、文本格式化属性
        1、字体属性
            1、指定字体
                属性:font-family
                取值:使用,逗号隔开的字体值的列表
                示例:font-family:‘微软雅黑’,‘黑体‘;
                说明:如果第一个字体不支持则匹配下一个字体,依次类推
            2、指定文字大小
                属性font-size
                取值:以px或pt为单位的数值
            3、字体加粗
                属性:font-weight
                取值:
                    1、normal:正常体,无加粗效果
                    2、bold:加粗
                    3、value:取值为无单位的数字(400等同于normal效果,900等同于bold效果)
            4、字体的样式:
                属性:font-style
                取值:
                    1、normal:正常,无斜体效果
                    2、italic:斜体
            5、小型大写字母:
                1、作用:将文本中的所有小写字母都变为大写字母,但是大小和小写字母一样
                2、属性:font-variant
                3、取值:
                    1、normal
                    2、small-caps
            6、字体属性
                1、属性:font
                2、取值:style variant weight size family
                3、注意:使用简写属性时,必须要设置family的值,否则无效

        2、文本属性
            1、文本颜色
                1、属性:color
                2、取值:合法颜色值
            2、文本的排列方式:控制内容的水平对齐方式(只对行内元素有效,对块级元素无效)
                1、属性:text-align
                2、取值:left/ center /right/ justify(两端对齐,最后一行数据无效)
            3、文字修饰
                属性:text-decoration
                作用:指定某元素中文字的线条修饰效果
                取值:
                    1、none:无任何线条修饰
                    2、underline:下划线(<u></u>)
                    3、overline:上划线
                    4、line-through:删除线(<s></s>)
            4、行高:
                1、作用:指定一行文本数据所占的高度是多少(不是字高)
                2、特点:如果行高的高度高于文本的高度,那么文本将在行高范围内垂直居中显示
                3、属性:line-height
                4、取值:
                    1、以 px 为单位的数字
                    2、无单位的数字,表示当前文本大小的倍数
            5、首行文本缩进
                属性:text-indent
                取值:以px为单位的数字,表示缩进距离
            6、文本的阴影
                属性:text-shadow
                取值:h-shadow v-shadow bulr color
    7、表格属性
        1、表格常用属性
            1、尺寸属性:width,height
            2、边框属性:border(给table元素设置border时只有table有边框,td没有边框),tr没有border属性
            3、文本格式化属性
                1、font-*
                2、text-*
            4、背景属性
            5、框模型属性
                margin不能应用在td上
                margin,padding不能应用在tr上
            6、vertical-align
                取值:top / middle / bottom
        2、表格特有属性
            1、边框合并
                属性:border-collapse
                取值:
                    1、separate:默认值,分离边框模式
                    2、collapse:边框合并模式
            2、边框边距:设置单元格四周的距离
                属性:border-spacing
                取值:
                    1、指定一个值:表示水平和垂直的间距是相等的
                    2、指定两个值:第一个值表示水平间距,第二个值表示垂直间距,两个值之间用空格隔开
                注意:只有在分离边框模式(border-collapse:separate)下才有效
    8、过渡效果
        1、什么是过度
            使得CSS属性值在一段时间内变化成另外一个属性值
        2、过渡的语法
            1、指定过渡属性
                作用:指定哪个属性值在变化的时候使用过渡的效果
                属性:transition-property(必须的)
                取值:
                    1、属性名称
                    2、all(凡是能用过渡效果的属性的值在变化时一律使用过渡效果体现)
                    允许使用过渡效果的属性:
                        1、与颜色相关的属性都可以使用过渡
                        2、取值为数字的属性都可以使用过渡
            2、指定多度时长(必须的)
                属性:transition-duration
                取值:以秒或毫秒为单位的数字
            3、指定过渡的速度时间曲线函数(指定变化速率)
                属性:transition-timing-function
                取值:
                    1、ease:默认值,慢速度开始,快速变化,慢速结束
                    2、linear:匀速
                    3、ease-in:慢速开始,加速结束
                    4、ease-out:快速开始,减速结束
                    5、ease-in-out:慢速开始和结束,中间先加速后减速
            4、指定过渡延迟
                属性:transition-delay
                取值:以s或ms为单位的数值
            5、简洁属性:
                属性:transition
                取值:property duration timing-function delay

        练习:创建一个div 200*200,鼠标悬停时:1、背景颜色变为紫色 2、由正方形变为长方向 3、向右偏移500px,鼠标移出时,使用过渡效果显示回来

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过渡效果</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            border: 1px solid yellow;
            transition: all 5s ease 1s;

        }
        div:hover{
            /*如果将transition放在此处,则只在鼠标悬停上面有效,离开时无效*/
            height: 100px;
            background-color: purple;
            margin-left: 500px;
        }
    </style>
</head>
<body>
    <div></div>

</body>
</html>

 1、定位(重点)
    1、什么是定位:表示元素在页面中的位置
    2、为什么需要定位:元素在默认位置无法满足页面的需求,所以需要通过定位改变元素默认的位置
    3、css中定位的分类
        1、普通流定位(默认定位方式)
        2、浮动定位(重难点)
        3、相对定位
        4、绝对定位(难点)
        5、固定定位
    4、普通流定位
        普通定位,又称‘文档流定位’,是页面中所有元素的默认定位方式。典型的‘流式布局’
        特点:
            1、每个元素在页面中都有自己的位置,并占据一定的页面空间
            2、每个元素都是从其父元素的左上角开始排列的
            3、每个元素基本上都是按照从上到下,从左到右的方式进行排列的
                块级元素:从上到下排列
                行内元素&行内快:从左到右排列,只有一行内显示不下的时候才换行
        问题:如何能够让多个块级元素子在一行显示呢?
    5、浮动定位(重难点)
        1、什么是浮动&浮动的特点
            1、浮动元素会被排除在文档流之外(脱离文档流),那么元素将不再占据页面的空间
            2、未浮动的元素们会上前占位
            3、浮动元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
            4、浮动只能在当前行浮动
            5、浮动解决的问题(让多个块级元素子啊一行内排列)
        2、语法:
            属性:float
            取值:
                1、none:默认值,无任何浮动效果
                2、left:浮动到父元素的左边,或停靠在左边已有浮动元素的边缘上,左浮动
                3、rgiht:浮动到父元素的右边,或停靠在右边已有浮动元素的边缘上,右浮动
        3、浮动引发的特殊效果
            1、如果父元素中显示不下所有的已浮动元素的话,那么最后一个将换行显示,但是有可能被卡主
            2、元素一旦浮动起来之后,将都变成块级元素,行内元素们是可以修改尺寸的
            3、元素一旦浮动起来,在未指定宽度的情况下,那么宽度将由内容来决定
            4、文字,图片,行内元素是采用环绕的方式来排列的,是不能被浮动元素压在下面的
        4、清除浮动
            1、浮动带来的影响
                当前元素浮动,会受到后面元素浮的位置。
                如果后面的元素不想受到当前元素浮动影响的话,则可以通过清除浮动的方式来解决问题
            2、语法:
                属性:clear
                取值:
                    1、none:默认值,即不做任何清除浮动的操作
                    2、left:清除前面元素左浮动带来的影响
                    3、right:清除前面元素右浮动带来的影响
                    4、both:清除前面元素任何一种浮动方式带来的影响
        5、浮动元素对父元素高度的影响
            1、父元素的高度是以未浮动的子元素的高度为准的,
            2、如果一个父元素中所有的子元素都是浮动的,那么他的高度会变为0
            3、解决方案:
                1、为父元素增加overflow属性,取值为auto或hidden
                    有弊端:如果有溢出要显示的内容,也一同被隐藏了
                2、在父元素的末尾处,增加一个空块级元素,并设置其为clear为both
2、其他定位方式(相对,绝对,固定)
    1、相关属性
        1、定位方式
            作用:改变元素默认的定位方式
            属性:position
            取值:
                1、static:默认值,静态的
                2、relative:相对定位
                3、absolute:绝对定位
                4、fixed:固定定位
            注意:将元素的position设置为relative/absolute/fixed任何一种的话,那么该元素就称为‘已定位元素’
        2、偏移属性(共四个)
            作用:配合已定位元素去实现位置的偏移
            属性:
                top:以元素的上边为基准边去移动元素
                bottom:以元素的下边为基准去移动元素
                left:以元素的左边为基准去移动元素
                right:以元素的右边为基准去移动元素
            取值:以px 为单位的数值
            注意:只有已定位(相对,绝对,固定)的元素才能使用偏移属性
    2、相对定位
        1、什么是相对定位
            元素会相对它原来的位置偏移某个距离
        2、语法
            属性:position
            取值:relative
            配合 偏移属性 实现位置的移动
    3、绝对定位
        1、什么是绝对位置 &特点
            1、绝对定位的元素会脱离文档流(不占据页面空间)
            2、决定定位的元素会相对于离他 最近 的,已经定位的 祖先 元素去实现位置初始化
            3、如果没有元素离他最近,已定位的祖先元素的话,那么元素就会相对于body去实现位置的初始化
        2、语法
            属性:position
            取值:absolute
            配合 偏移属性 实现位置的变化
    4、堆叠顺序
        属性:z-index
        取值:无单位的数字,默认值为0,数字越大越靠前
    5、固定定位
        1、什么是固定定位
            将元素固定在浏览器窗口的某个位置处,不会随着滚动条的滚动而发生位置的改变
        2、语法
            属性:position
            取值:fixed
            配合着 属性属性 实现位置的初始化
        3、注意:固定定位的元素永远都是相对于body去实现位置的初始化的
3、显示
    1、显示方式:
        1、作用:决定了元素以什么样的方式(块级,行内)显示在网页中
    2、语法:
        属性:display
        取值:
            1、none:让元素不显示(隐藏),脱离文档流(不占页面空间)
            2、block:让元素显示的和块级元素一致
            3、inline:让元素显示和行内元素一致
            4、inline—block:让元素显示的和行内块一致
                特点:
                    1、多个元素能够在一行内显示
                    2、每个元素是允许修改尺寸的
    2、显示效果
        1、visibility 属性
            作用:控制元素的可见性
            取值:
                1、visible:可见的,默认值
                2、hidden:隐藏,该隐藏方式并未脱离文档流,所以还占据页面空间
        2、opacity 属性
            作用:控制元素的透明度
            取值:0(完全透明)~1(完全不透明)之间的数字
        3、vertical-align 属性
            1、用在td中,设置td内容的垂直对齐方式
            2、用在图片 和 行内快元素上
                设置图片和行内块的文本相对于图片和行内块元素的垂直对齐方式
                取值:
                    1、top
                    2、middle
                    3、bottom
                    4、baseline:基线对齐,默认值
    3、光标
        作用:指定当鼠标悬停在元素上时鼠标的表现形式(可不必加在hover上面)
        属性:cursor
        取值:
            1、default:默认
            2、pointer:小手
            3、crosshair:+
            4、text:I
            5、wait:等待
            6、help:帮助
4、列表:
    常用属性:
        list-style:none;
5、转换:
    1、什么是转换
        改变元素在页面中的位置,尺寸,角度的一种方式
    2、属性:
        1、转换属性
            属性:transform
            取值:
                1、none:默认值,没有任何转换效果
                2、一组转换函数,如果是多个函数的话,中间用 空格 隔开
        2、转换原点:
            属性:transform-origin
            取值:连个数字,中间用空格隔开
                1、以px为单位的数值,(以元素的左上角0 0为准)
                2、以%为单位的数值,以元素的左上角0 0为准)
                3、关键字:top/ bottom /center /left /right
        3、转换效果
            1、位移
                作用:改变元素在页面中的位置
                属性:transform
                取值:
                    1、translateX(x),x表示水平位移动距离和方向,+:右移,-:左移
                    2、translateY(y),y表示垂直位移动距离和方向,+:下移,-:上移
                    3、translate(x):等同于translateX(x)
                    4、translate(x,y):同时指定x,y轴移动距离和方向
            2、缩放
                作用:改变元素的尺寸
                属性:transform
                取值:
                    1、scaleX(x):x表示横向缩放比例,大于1放大,大于0小于1缩小,小于0的话,物极必反
                    2、scaleY(y):y表示纵向缩放比例,同上
                    3、scale(value):水平和垂直的缩放比例相同
            3、旋转:
                作用:改变元素在页面中的角度
                属性:transform
                取值:rotate(ndeg):n取值为正,顺时针,n取值为负,逆时针,deg为度数单位
                注意:
                    1、转换原点会影响转换效果
                    2、旋转操作会连同坐标轴一起跟着旋转,他会影响旋转之后的位移效果

图例 

<body style="background-color:011624">
    <div class="legend" style="width:120px; height:170px; background-color:rgba(0,8,14,0.5); margin-top:10%; margin-left:30%">
    <ul class="colors" id="legend-color" style="font:normal normal normal 16px '微软雅黑'; color: white; line-height:29px">
        <li style="list-style: url('1.png');">0~35</li>
        <li style="list-style: url('2.png');">35~75</li>
        <li style="list-style: url('3.png');">75~115</li>
        <li style="list-style: url('4.png');">115~150</li>
        <li style="list-style: url('5.png');">150~250</li>
        <li style="list-style: url('6.png');">250+</li>
    </ul>
</div>

 实现呼吸点效果

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    <style>
        .round{
            width: 36px;
            height: 36px;
            margin:100px auto;
            position: relative;
        }
        .circle {
            background-color: #AC002F;
            width:12px;
            height:12px;
            border-radius:50%;
            top:12px;
            left: 12px;
            position:absolute;
        }
        .circle_bottom {
            background-color: #AC002F;
            width:24px;
            height:24px;
            border-radius:50%;
            filter:alpha(opacity=40);
            top: 6px;
            left: 6px;
            position:absolute;
        }
        .circle_bottom2 {
            background-color: #AC002F;
            width:36px;
            height:36px;
            border-radius:50%;
            filter:alpha(opacity=20);
        }
        .animation {
            ;-webkit-animation:twinkling 2.1s infinite ease-in-out;
            animation:twinkling 2.1s infinite ease-in-out;
            -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
        }
        .animation2 {
            ;-webkit-animation:twinkling 2.1s infinite ease-in-out;
            animation:twinkling 2.1s infinite ease-in-out;
            -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
        }
        @-webkit-keyframes twinkling {
            0% {
            opacity:0.2;
            filter:alpha(opacity=20);
            -webkit-transform:scale(1);
        }
        50% {
            opacity:0.5;
            filter:alpha(opacity=50);
            -webkit-transform:scale(1.12);
        }
        100% {
            opacity:0.2;
            filter:alpha(opacity=20);
            -webkit-transform:scale(1);
        }
        }@keyframes twinkling {
            0% {
            opacity:0.2;
            filter:alpha(opacity=20);
            -webkit-transform:scale(1);
        }
        50% {
            opacity:0.5;
            filter:alpha(opacity=50);
            -webkit-transform:scale(1.12);
        }
        100% {
            opacity:0.2;
            filter:alpha(opacity=20);
            -webkit-transform:scale(1);
        }
        }
    </style>
    </head>
    <body>
    <div class="round">
        <div class="circle"></div>
        <div class="circle_bottom animation "></div>
        <div class="circle_bottom2 animation2 "></div>
    </div>
    </body>
</html>

 

上一篇: CRC校验8
下一篇: 稳定婚姻模型
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Git本地分支和远程分支关联

转载:https://blog.csdn.net/cherishhere/article/details/52606884 转载:https://blog.zengrong.net/post/1746.html 转载:https://blog.csdn.net/xinghuowuzhao/article/details/78663526 转......

osc_ur9jjorb
11分钟前
10
0
移动应用测试方法与思路

标签(空格分隔): 浅谈移动应用测试方法与思路 在 GUI 自动化测试这个系列,我讲了很多基于浏览器的业务测试的内容,你可能会说,现在移动 App 大行其道,对移动应用测试的方法和思路才更重...

osc_avdbd8s3
12分钟前
6
0
搜索所有Git历史记录中的字符串? [重复] - Search all of Git history for a string? [duplicate]

问题: This question already has an answer here: 这个问题在这里已有答案: How to grep Git commit diffs or contents for a certain word? 如何grep Git为某个单词提交差异或内容? 8 ...

fyin1314
13分钟前
12
0
css实现圆形倒计时效果

实现思想: 1.最外层包裹内部的div1(.box) 2.内部左右两边div2(.left_box和.right_box),宽度为div1的一半,通过overflow:hidden隐藏其内部的div 3.在左右两个div2中各有一个div3(.left_item...

osc_sg74u54s
14分钟前
4
0
python语言中threading.Thread类的使用方法

1. 编程语言里面的任务和线程是很重要的一个功能。在python里面,线程的创建有两种方式,其一使用Thread类创建 # 导入Python标准库中的Thread模块 from threading import Thread # 创建一...

osc_q5urtsdm
15分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部