03.01_css选择器-属性选择器
选择器[属性名]{
属性名称1：值1；
属性名称2：值2；
....
}
选择器[属性名="属性值"]{
属性名称1：值1；
属性名称2：值2；
....
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[title]{
width: 300px;
background-color: red;
}
p[title]{
height: 50px;
}
</style>
</head>
<body>
<!--
登瓦官阁
唐代：李白
晨登瓦官阁，极眺金陵城。
钟山对北户，淮水入南荣。
漫漫雨花落，嘈嘈天乐鸣。
两廊振法鼓，四角吟风筝。
杳出霄汉上，仰攀日月行。
山空霸气灭，地古寒阴生。
寥廓云海晚，苍茫宫观平。
门馀阊阖字，楼识凤凰名。
雷作百山动，神扶万栱倾。
灵光何足贵? 长此镇吴京。
-->
<img src="../Day02/img/1.jpg" title="img01"/>
<br />
<a href="#" title="本地连接01" style="display: block;">登瓦官阁</a>
<p title="context01">晨登瓦官阁，极眺金陵城。</p>
<p>钟山对北户，淮水入南荣。</p>
</body>
</html>
03.02_css选择器-包含选择器：
- 安照标签在代码中的位置层级选择
- 父级标签 必须写在前面，子级写在后面，可以跨级操作
- 名称可以使用标签名/类名/id。。。
先辈和后辈标签
中间可以跨级操作
先辈选择器 后辈选择器{
属性名称1：值1；
属性名称2：值2；
....
}
包含选择器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div table tr td p{
font-size: 30px;
}
#box01 td{
background-color: gray;
}
</style>
</head>
<body>
<div id="box01">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>漫漫雨花落，</td>
<td>嘈嘈天乐鸣。</td>
</tr>
<tr>
<td>两廊振法鼓，</td>
<td>四角吟风筝。</td>
</tr>
<tr>
<td>杳出霄汉上，</td>
<td><p>仰攀日月行。</p></td>
</tr>
</table>
<p>山空霸气灭，地古寒阴生。</p>
</div>
</body>
</html>
父标签选择器>子标签选择器{
只能是 父级>子级 中间不能跨级，否则无效
属性名称1：值1；
属性名称2：值2；
....
}
父子选择器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div td{
color: red;
}
div>table{
font-size: 30px;
}
</style>
</head>
<body>
<div id="box01">
<table border="1" cellspacing="0" cellpadding="0">
<caption>登瓦官阁</caption>
<tr>
<td>晨登瓦官阁，极眺金陵城。</td>
<td>钟山对北户，淮水入南荣。</td>
</tr>
<tr>
<td>漫漫雨花落，嘈嘈天乐鸣。</td>
<td>两廊振法鼓，四角吟风筝。</td>
</tr>
<tr>
<td class="context">杳出霄汉上，仰攀日月行。</td>
<td id="context06">山空霸气灭，地古寒阴生。</td>
</tr>
</table>
</div>
</body>
</html>
03.03_css选择器-组合选择器：
- 可以把标签名、类名、id写在一起修饰
- 多个标签使用 ， 分割
选择器1，选择器2，。。。。{
属性名称1：值1；
属性名称2：值2；
....
}
组合选择器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2, p, span{
background-color: gold;
}
h2, #span01, .a01{
font-size: 30px;
}
</style>
</head>
<body>
<div id="box01">
<h2>登瓦官阁</h2>
<p>晨登瓦官阁，极眺金陵城。</p>
<p>钟山对北户，淮水入南荣。</p>
<p>漫漫雨花落，嘈嘈天乐鸣。</p>
<p>两廊振法鼓，四角吟风筝。</p>
<span id="span01">
杳出霄汉上，仰攀日月行。
</span>
<br />
<a class="a01" href="#">山空霸气灭，地古寒阴生。</a>
</div>
</body>
</html>
03.04_css选择器-伪类选择器
类/id/标签名选择器：特定的设置{
属性名称1：值1；
属性名称2：值2；
....
}
伪类选择器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
color: red;
}
/* 光标悬浮 */
a:hover{
font-size: 30px;
}
/* 点击 */
a:active{
color: blue;
}
/* 访问过后 */
a:visited{
color: black;
}
</style>
</head>
<body>
<a href="#">点我点我</a>
</body>
</html>
通配选择器
- 给当前标签内部的所有内容设置样式
- 使用 *{} 的方式选择
通配选择器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 50px;
}
body{
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="box01">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>漫漫雨花落，</td>
<td>嘈嘈天乐鸣。</td>
</tr>
<tr>
<td>两廊振法鼓，</td>
<td>四角吟风筝。</td>
</tr>
<tr>
<td>杳出霄汉上，</td>
<td><p>仰攀日月行。</p></td>
</tr>
</table>
<p>山空霸气灭，地古寒阴生。</p>
</div>
</body>
</html>
03.05_CSS和html的结合方式–行内样式
- 属性和值写在标签内部，适合单独修饰特殊的标签属性
- 内个行内样式只能修改一个标签
- 作用和写在头部基本相同，可以使用style
行内样式案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
蝶恋花·伫倚危楼风细细
宋代：柳永
伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭阑意。(阑 通 栏)
拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。
-->
<h2 style="font-size: 30px;background-color: cornsilk;width: 400px;">蝶恋花·伫倚危楼风细细</h2>
<p style="background-color: gold;">伫倚危楼风细细，望极春愁，黯黯生天际。</p>
<p style="background-color: grey;">草色烟光残照里，无言谁会凭阑意。</p>
<p style="background-color: burlywood;">拟把疏狂图一醉，对酒当歌，强乐还无味。</p>
<p>衣带渐宽终不悔，为伊消得人憔悴。</p>
</body>
</html>
03.06_CSS和html的结合方式–内嵌样式
- css样式表写在头部
- 能一次修饰所有同名的标签
- 能单独修饰某一个标签
- 需要使用包裹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-size: 18px;
}
#context01{
background-color: chartreuse;
}
#context02{
background-color: gainsboro;
}
#context03{
background-color: cornflowerblue;
}
#context04{
background-color: yellowgreen;
}
</style>
</head>
<body>
<!--
清平乐·画堂晨起
唐代：李白
画堂晨起，来报雪花坠。高卷帘栊看佳瑞，皓色远迷庭砌。
盛气光引炉烟，素草寒生玉佩。应是天仙狂醉，乱把白云揉碎。
-->
<h2>清平乐·画堂晨起</h2>
<p id="context01">画堂晨起，来报雪花坠。</p>
<p id="context02">高卷帘栊看佳瑞，皓色远迷庭砌。</p>
<p id="context03">盛气光引炉烟，素草寒生玉佩。</p>
<p id="context04">应是天仙狂醉，乱把白云揉碎。</p>
</body>
</html>
03.07_CSS和html的结合方式–链接样式
- 在文件外部编写css代码形成单独的文件
- 使用引入css样式表
- 作用和内嵌样式/行内样式相同
- 样式和标签分开，代码更清晰
- 同一个样式表可以修饰多个HTML文件，提高开发效率
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main10.css" />
</head>
<body>
<!--
赤壁歌送别
唐代：李白
二龙争战决雌雄，赤壁楼船扫地空。
烈火张天照云海，周瑜于此破曹公。
君去沧江望澄碧，鲸鲵唐突留馀迹。
一一书来报故人，我欲因之壮心魄。
-->
<h3 id="title">赤壁歌送别</h3>
<p id="context001">二龙争战决雌雄，赤壁楼船扫地空。</p>
<p id="context002">烈火张天照云海，周瑜于此破曹公。</p>
<p id="context003">君去沧江望澄碧，鲸鲵唐突留馀迹。</p>
<p id="context004">一一书来报故人，我欲因之壮心魄。</p>
</body>
</html>
03.08_CSS和html的结合方式–导入样式
- 使用@import url(“css/main10.css”);带入css样式表
- 作用和外部链接link导入一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("css/main10.css");
#context004{
background-color: maroon;
}
</style>
</head>
<body>
<!--
春宿左省
唐代：杜甫
花隐掖垣暮，啾啾栖鸟过。
星临万户动，月傍九霄多。
不寝听金钥，因风想玉珂。
明朝有封事，数问夜如何。
-->
<h3 id="title">春宿左省</h3>
<p id="context001">花隐掖垣暮，啾啾栖鸟过。</p>
<p id="context002">星临万户动，月傍九霄多。</p>
<p id="context003">不寝听金钥，因风想玉珂。</p>
<p id="context004">明朝有封事，数问夜如何。</p>
</body>
</html>
03.09_CSS和html的结合方式–各种样式的优先级问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#context004{
background-color: chartreuse;
}
#context001{
background-color: yellow;
}
</style>
<link rel="stylesheet" href="css/main10.css" />
</head>
<body>
<!--
迢迢牵牛星
两汉：佚名
迢迢牵牛星，皎皎河汉女。
纤纤擢素手，札札弄机杼。
终日不成章，泣涕零如雨。
河汉清且浅，相去复几许！
盈盈一水间，脉脉不得语。
-->
<h3 id="title">迢迢牵牛星</h3>
<p id="context001">迢迢牵牛星，皎皎河汉女。</p>
<p id="context002">纤纤擢素手，札札弄机杼。</p>
<p id="context003">终日不成章，泣涕零如雨。</p>
<p id="context004">河汉清且浅，相去复几许！</p>
<p id="context005" style="background-color: darkgreen;">盈盈一水间，脉脉不得语。</p>
</body>
</html>
03.10_css中的属性–字体属性
- font-family
- oblique 真正的斜体
- italic 意大利体
- normal 正常显示
- font-style
- font-weight
- 字体加粗
- 取值范围100~900之间，数值越大，字体越粗
- normal:正常
- bold：加粗
- bolder：比bold还加粗
- lighter:比normal更细
- font-size
- px和em
- 1em = 16px
- 12pt = 16px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#context1405{
/*font: bold;*/
/*font-family: "bookman old style";*/
color: red;
font-weight: normal;
font-style:initial;
/*font-size: 2em;*/
/*font-size: 16px;*/
font-size: 12pt;
}
</style>
</head>
<body>
<h3>欲与元八卜邻先有是赠</h3>
<p id="context1401">平生心迹最相亲，欲隐墙东不为身。</p>
<p id="context1402">明月好同三径夜，绿杨宜作两家春。</p>
<p id="context1403">每因暂出犹思伴，岂得安居不择邻。</p>
<p id="context1404">可独终身数相见，子孙长作隔墙人。</p>
<font id="context1405">平生心迹最相亲，欲隐墙东不为身。</font>
</body>
</html>
03.11_css中的属性–文本属性
- text-decoration
- 文本装饰
- none:正常
- underline:下划线
- line-through:删除线
- overline:顶线
- blink:文字闪烁【不是所有的浏览器都支持】
- text-indent
- word-spacing
- letter-spacing
- text-align
- direction
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#con1502{
text-indent: 2em;
/*letter-spacing: 1em;*/
word-spacing: 1em;
}
#con1505{
width: 1000px;
height: 300px;
/*word-spacing: 2em;*/
letter-spacing: 2em;
direction: rtl;
border: 1px red solid;
}
#con1503{
border: 1px red solid;
text-align: center;
}
#con1504{
/*text-decoration: underline;*/
/*text-decoration: line-through;*/
text-decoration: blink;
background-color: red;
color: blue;
}
</style>
</head>
<body>
<h3 id="con1501">琵琶行</h3>
<p id="con1502">元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，
听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，
委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。
予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。</p>
<p id="con1503">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</p>
<p id="con1504">醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。</p>
<p>寻声暗问弹者谁？琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。</p>
<p id="con1505">hello world good morning</p>
</body>
</html>
03.12_css中的属性–盒子属性
- border
- 边框属性
- border-top
- border-top:
- border-bottom:
- border-left:
- border-right:
- border-width:边框的宽度
- border-style:边框样式，实线，虚线
- dotted：点画线
- dashed:虚线
- solid:实线
- double：双画线
- border-color:边框的颜色
- padding
- 内边距
- padding
- padding-left:
- padding-right:
- padding-top:
- padding-bottom:
- margin
- 外边距
- margin-left
- margin-right
- margin-top
- margin-bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1601{
border: 3px red solid;
margin: 30px;
padding: 30px;
}
h3,p{
border: 1px blue solid;
}
#con1601{
margin-left: 100px;
margin-bottom: 100px;
}
#con1602{
padding-left: 50px;
padding-right: 50px;
}
#con1606{
border-top: 1px;
border-bottom: 1px;
border-style:double;
border-color: red;
}
</style>
</head>
<body>
<div id="box1601">
<h3 id="con1601">琵琶行</h3>
<p id="con1602">元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。</p>
<p id="con1603">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</p>
<p id="con1604">醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。</p>
<p>寻声暗问弹者谁？琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。</p>
<p id="con1605">hello world good morning</p>
<span id="con1606">
浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。
</span>
</div>
</body>
</html>
03.13_css中的属性–尺寸属性
03.14_css中的属性–背景属性
- background
- linear-gradient(to right bottom,red,blue)
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- 背景位置 left right top bottom center
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*body{
background: url(../Day01/img/pic01.jpg);
background-repeat: no-repeat;
background-size: 100%;
}*/
/*body{
background-image: url(../Day01/img/pic02.jpg);
background-repeat: no-repeat;
background-size: 100%;
}*/
/*body{
background: url(../Day01/img/pic05.jpg);
background-attachment: scroll;
background-size: 100%;
background-repeat: no-repeat;
}*/
body{
background-image: url(../Day02/img/2.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="box2001">
<h3 id="con2001">琵琶行</h3>
<p id="con2002">元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。</p>
<p id="con2003">浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。</p>
<p id="con2004">醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。</p>
<p>寻声暗问弹者谁？琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。</p>
<p id="con2005">hello world good morning</p>
<span id="con2006">
浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。
</span>
</div>
<ol>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ol>
</body>
</html>
03.15_css中的属性–列表相关的属性
- background-color
- list-style
- list-style-image
- list-style-position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ol{
background-color: aquamarine;
line-height: 50px;
/*list-style: none;*/
list-style-image: url(img/QQ.png);
list-style-position: outside;
}
</style>
</head>
<body>
<ol>
<li>行政部</li>
<li>人事部</li>
<li>财务部</li>
<li>市场部</li>
<li>后勤部</li>
</ol>
</body>
</html>
03.16_css中的属性–浮动属性
- float
- 浮动属性
- div是块标签，在页面中独占一行，从上向下依次排列，这种排列方式称为流
- 经典案例：百度百科
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img1901{
width: 100px;
float: right;
}
#con1901{
margin-left: 300px;
}
</style>
</head>
<body>
<div id="box1901">
<img id="img1901" src="img/pic01.jpg" />
<p id="con1901">
东坡肉相传为北宋词人苏东坡（四川眉山人）所创制，最早发源地是四川眉山。
原型是徐州回赠肉， 为徐州“东坡四珍”之一。
宋神宗熙宁十年（1077年）四月，苏轼赴任徐州知州。七月七日，黄河在澶州曹村埽一带决口，
至八月二十一日洪水围困徐州，水位竟高达二丈八尺。苏轼以身卒之，亲荷畚插，率领禁军武卫营，
和全城百姓抗洪筑堤保城。经过七十多个昼夜的艰苦奋战，终于保住了徐州城。
全城百姓无不欢欣鼓舞，他们为感谢这位领导有方，与徐州人民同呼吸、共存亡的好知州，
纷纷杀猪宰羊，担酒携菜上府慰劳。苏轼推辞不掉，收下后亲自指点家人制成红烧肉，
又回赠给参加抗洪的百姓。百姓食后，都觉得此肉肥而不腻、酥香味美，一致称他为“回赠肉”。
此后，“回赠肉”就在徐州一带流传，并成徐州传统名菜。这在《徐州文史资料》、《徐州风物志》、
《徐州古今名馔》中都有记述 [1] 。
元丰三年(公元1080年)二月一日，苏轼被贬到黄州任团练副使。他自己开荒种地，
便把此地号称“东坡居士”。这就是“苏东坡”的由来。在黄州期间，
他亲自动手烹饪红烧肉并将经验写入《食猪肉诗》中。苏轼在徐州及黄州时烹制的红烧肉，
只是在当地有影响，在全国并没有多大名气。真正叫得响并闻名全国的红烧肉，
是苏轼第二次在杭州时的“东坡肉” [2] 。
</p>
</div>
</body>
</html>
03.17_css中的属性–定位属性
- absolute:
- 绝对定位，将对象从文档流中拖出，可以使用top，bottom等属性设置定位
- 不会保留位置
- fixed
- z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*img{
position: absolute;
left: 100px;
top: 100px;
}*/
/*img{
position: fixed;
left: 100px;
top: 300px;
}*/
span{
display: block;
border: 2px blue solid;
}
#span2201{
position: absolute;
left: 500px;
top: 100px;
height: 200px;
width: 500px;
text-align: right;
z-index: 1000;
}
#span2202{
position: absolute;
left: 500px;
top: 100px;
height: 200px;
width: 500px;
text-align: center;
z-index: 20;
}
#span2203{
position: absolute;
left: 500px;
top: 100px;
height: 200px;
width: 500px;
text-align: left;
z-index: 100;
}
</style>
</head>
<body>
<img src="../Day02/img/2.jpg" alt="" />
<span id="span2201" onclick="alert('AAAAA')">AAAAAAAAAAAAAAAAAAAAAAAA</span>
<span id="span2202" onclick="alert('BBBBB')">BBBBBBBBBBBBBBBBBBBBBB</span>
<span id="span2203" onclick="alert('CCCCC')">CCCCCCCCCCCCCCCCCC</span>
<ol>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
<li>hallo</li>
</ol>
</body>
</html>
03.18_形变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img2301{
position: absolute;
width: 300px;
left: 300px;
top: 200px;
}
#img2301:hover{
/*transform: scale(1.5);*/
/*transform: rotate(30deg);*/
/*transform: translate(100px);*/
/*transform: skew(30deg);*/
transform: scale(1.5) rotate(30deg);
}
</style>
</head>
<body>
<a href="22.定位属性.html">
<img id="img2301" src="../Day02/img/game01.jpg"/>
</a>
</body>
</html>
03.19_动画animation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {
width: 300px;
position: absolute;
left: 300px;
top: 200px;
}
img:hover {
animation: 5s anim;
}
@keyframes anim {
from {
left: 300px;
top: 200px;
transform: scale(1) rotate(0deg);
}
to {
left: 600px;
top: 100px;
transform: scale(1.5) rotate(360deg);
}
}
</style>
</head>
<body>
<img src="../Day01/img/pic05.jpg" />
</body>
</html>
扫一扫
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
