1.标签
单标签<标签名>
双标签<标签名></标签名>
标题标签（h1~h6) align"设置位置" left/right/center
段落标签 <p></p>
换行标签<br>
空标签<span></span>
线条标签（分割线）hr
<hr color="pink" width="50%" align="left" size="5">
2.字体样式
字体的加粗<b></b> 斜体<i></i> 下划线<u></u>
上标<sup>[1]</sup>下标<sub>[1]</sub>
删除线<del>不</del>
3.特殊符号
¥198人民币
32°温度
©人民出版社
®注册商标
65²平方
空格
4.路径
src：表示图片的地址 图片的路径资源
相对路径：./相对当前目录
../相对于上一级目录
绝对路径：http://localhost:....
width：宽度
height：高度
title:当鼠标放到图片上面会出来提示
alt:图片显示失败后的提示
5.
超链接：a
href:表示请求的地址
target:_sele表示在当前目录打开
_blank表示想打开一个页面
<a href="https://www.baidu.com" target="_blank"><img src="../day01/img/3.jpg" width="400px" height="400px"></a>
此为点击图片跳转到百度界面
audio:音频
video:视频
autoplay:自动播放
loop:循环播放
marquee:弹幕
behavior:行为 移动方式 scroll:表示移动到边界后会默认出现
scroll:移动的速度
direction:方向 left/right/up/down
6.列表
ul（unorder list） 无序列表
ol（order list）有序列表
组合列表
<details>
<summary>标题</summary>
ul或者ol列表选项
</details>
7.表格table
table的属性：border表示边框的大小
cellspacing：表示单元格之间的距离 外边距
cellpadding：表示内容与单元格的距离 内边距
tr：行
td：列 colspan="占几列" rowspan："占几行"
8.表单
form 常见的标签内部元素
<input type="input的类型" value="表示这个input标签的内容">
type有如下常见的类型值
a.text：默认类型输入框
b.button：按钮
c.radio：单选
<p>性 别：<input type="radio" name="gender">boy
<input type="radio" name="gender">girl
单选按钮需要设置name属性进行多选1
d.checbox：复选框
<p>
爱好：
<input type="checkbox">车
<input type="checkbox">枪
<input type="checkbox">炮
</p>
e.password
<p>密 码：<input type="password"><br></p>
f.date/time：年月/时间
<p>
出生年月：<input type="date">
</p>
g.file：文件上传
<p>
请上传文件：<input type="file">
</p>
h.hidden：隐藏，数据想传递，但是不想给用户看到
<p>
银行卡密码：<input type="hidden" value="11111">
</p>
9.下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
10.文本域
cols:宽度
rows:高度
<textarea cols="30" rows="10"></textarea>
11.表单
from，数据提交
action:将数据发送给谁，请求地址
提交表单：<input type="button"无法提交>
<input type="sumbit"可以提交>
<button>提交</button>具备提交表单的效果
<form action="https://www.baidu.com">
用户名<input type="text" >
<input type="submit" value="提交">
</form>
12.CSS:cascading style sheet 层叠样式表
设置样式的属性：style
12.1内联样式
style="样式名1:样式内容1;样式名2:样式内容2;"
优点：优先级别很高，比较直观
缺点：样式较多的时候比较麻烦，不利于扩展和复用
<p style="color: green;">努力奋斗!砥砺前行!</p>
12.2内部样式
直接通过style标签进行设置
弊端：不够完全脱离，而且不利于多页面的样式共享
style>
p{
color: red;
font-size: 30pt;
}
</style>
12.3外部样式
单独在外部定一个样式.css文件，通过link标签进行引入
<link rel="stylesheet" href="./css/1.css">
12.4css的一些原则
a.优先性：就近原则，页面加载样式的先后
b.层叠性：如果多个样式设置，不冲突的样式会叠加
c.继承性：父标签的样式会被子标签继承
13.选择器：定位到目标标签的一种方式，通过选择器去定位到目标标签
13.1元素选择器
元素名{
样式设置
}
p{
color: khaki;
font-size: 30pt;
}
13.2id选择器:id是唯一的
#id名{}
#d1{
color: hotpink;
}
13.3类选择器:表示一类
.类名{}
.cl{
color: lawngreen;
font-weight: bold;
}
（123的组合）
<p id="d1">你就是</p>
<p id="d2">个猪</p>
<p class="c1">人生若只如初见</p>
<p class="c2">何事秋风悲画扇</p>
14.后代选择器和子代选择器
a.div:可以嵌套其他标签的元素
/* 后代选择器
.gf里面后代中p的内容p的内容变红色
父选择器+空格+目标后代选择器
*/
.gf p{
color: red;
}
/*
子代选择器
.gf里面子代中p的内容p的内容变红色
父选择器+>+目标子选择器
*/
.gf>p{
font-size: 60pt;
}
<!--1 <div class="gf">
<p>林允儿</p>
<div class="parent">
<p>是</p>
</div>
<div>
我的
</div>
<p>老婆</p>
</div> -->
b.兄弟选择器
a.普通的相邻兄弟:紧跟当前元素的第一个兄弟
b.普通的后面兄弟:紧跟当前元素的所有弟弟
当前选择器~弟弟选择器名
<style>
.c1~li
/* c1后面的所有兄弟 */
{
color: yellow;
}
.c1+li{
/* c1后面的一个兄弟 */
font-size: 30pt;
}
</style>
<ul>
<li>大伯</li>
<li class="c1">二伯</li>
<li>三伯</li>
<li>四伯</li>
</ul>
c.分组选择器
用逗号隔开不同的选择器
选择器1,选择器2,选择器3....
<style>
/* 分组选择器，用逗号隔开 */
h1,p{
color: tomato;
}
</style>
<h1>仰天大笑出门去</h1>
<p>我辈岂是蓬蒿人</p>
d.伪类选择器
:hover 当鼠标划过当前元素,设置样式
:link 未访问的链接样式设置
:visited 访问过的链接样式设置
<style>
p:hover{
color: turquoise;
font-size: 20pt;
}
a:visited{
color: violet;
}
a:link{
color: tomato;
}
</style> -->
e.结构伪类选择器-[了解下]
/* 给父类的子元素的第一个设置 */
ul>li:first-child{
color: red;
}
/* 最后一个 */
ul>li:last-child{
color: chartreuse;
}
/* 找到指定位置,第几个就写几 */
ul>li:nth-child(5){
color: crimson;
}
/* 偶数个 */
ul>li:nth-child(2n){
font-size: 50pt;
}
/* 奇数 */
/* ul>li:nth-child(2n+1){
font-size: 100pt;
} */
根据12-14知识点做下图
代码如下（运行软件vs-code）
<!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>
<style>
ol>li:nth-child(2n){
color: turquoise;
font-size: 20pt;
}
ol>li:nth-child(2n+1){
color: rgb(224, 64, 64);
font-size: 20pt;
}
h1:hover{
color:red;
font-size: 40pt;
}
.c1{
background-color: khaki;
}
.c2{
background-color: lightcoral;
}
.c3{
background-color: lightgreen;
}
.c4{
background-color: purple;
}
</style>
</head>
<body>
<h1>编程畅销书排行</h1>
<hr color="red" width="" align="left" size="1">
<ol>
<li>ThinkinJava</li>
<li>Java核心技术</li>
<li>疯狂Java</li>
<li>Java企业级开发手册</li>
<li>苏哥教你学Java</li>
<li>Java从精通到放弃</li>
</ol>
<hr color="red" width="" align="left" size="1">
<h1>人物九宫格</h1>
<hr color="red" width="" align="left" size="1">
<table border="1" cellpadding="1" cellspacing="1" align="left">
<tr class="c2">
<td>林允儿</td>
<td class="c3">iu</td>
<td>林允儿</td>
</tr>
<tr>
<td class="c4">迪丽热巴</td>
<td>赵丽颖</td>
<td class="c4">迪丽热巴</td>
</tr>
<tr class="c1">
<td>苏老师</td>
<td>阿乐老师</td>
<td>橙子老师</td>
</tr>
</table>
</body>
</html>15.css常用样式属性
15.1文字样式
1.字体文字类型：font-family:"楷体"
2.文字大小：font-size:20pt
3.文字风格 font-style:italic
4.文字粗细 font-weight:bold
直接一起设置 font:italic bold 20pt "楷体"
15.2文本样式
1.颜色
2.水平对齐方式：text-align
3.行高：line-height针对有高度定义的标签
4.首行缩进：text-indent可以使用px，也可以使用em，2em=16px即首行缩进两字符
5.下划线，上划线，删除线
text-decoration: overline/line-through/underline/none
6.设置图片旁边的文字对齐方式
vertical-align:top/middle/bottom（上中下）
7. 列表样式
1.设置符号样式 list-style-type: none/disc/circle/dicimal
2.list-style-image: url(./img/化蝶.png);//不推荐
8.背景样式
1.background-color:
2.background-image:url(地址位置)
3.background-size: cover;//整张图片放大填满整个元素
auto:使用默认大小 contain:按照图片的比例进行拉伸
16.盒子模型
a.盒子有大小
b.盒子有内容
c.盒子有厚度
d.盒子里面内容和盒子厚度之间有空隙
e.盒子与外部盒子之间也有间距
16.1盒子的边框：border
设置单边: 上(top) 右(right) 下(bottom) 左(left)
border-right-color:red ;
border-right-width: 20px;
border-right-style: solid;
/* 一起写: width style color */
border-right:20px solid red;
设置四边:
border:20px solid red
设置边框的角度,值越大,角度越明显
border-radius: 50px;
16.2外边距 margin
1.表示距离四边都是10px
margin:10px;
2.表示距离上下是10px 左右20px
margin:10px 20px;
3.表示距离上10px 右20px 下30px 左40px
margin:10px 20px 30px 40px;
4.也可以单边设置
margin-left
margin-right
margin-top
margin-bottom
5.水平方向
左外边距+
(左边边框的的厚度+左内边距+内容+右内边距+右边框)z
+右外边距
=父盒子的大小
水平居中: margin:0px auto;通过auto达到自动居中的目的
6.垂直方向的塌陷和折叠问题
1.如果子元素的高度大于父元素的高度以后
可以通过设置overflowlai解决
hidden:超过不显示
scroll:滚动条
visiable:正常显示
auto:根据需要进行滚动条
2.设置子元素的上外边距的折叠不显示问题
a.子元素上面输入内容
b.给父元素设置上内边距
c.设置父元素的overflow+子元素的margin-top
7.内边距padding
padding:上 右 下 左
padding:上 左
padding:四边的距离
单独的外边距
padding-left
padding-right
padding-top
padding-bottom
实例：
<!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>
<style>
.c1{
background-color:wheat;
width: 400px;
height: 350px;
}
.c2{
background-color:green;
width: 400px;
height: 30px;
}
ul li{
font-size: 15pt;
font-family: 楷体;
list-style-type: none;
color: white;
text-indent: -1.7em;
}
ol li{
font-size: 15pt;
font-family: 楷体;
list-style-type: none;
color: blue;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<ul>
<li>畅销书排行<img src="./img/bang.gif" align="center"></li>
</ul>
<ol>
<li><img src="./img/book_no01.gif" align="center"> 不抱怨的世界（畅销书）</li>
<li><img src="./img/book_no02.gif" align="center"> 遇见未知的自己</li>
<li><img src="./img/book_no03.gif" align="center"> 活法（季羡林....）</li>
<li><img src="./img/book_no04.gif" align="center">高效能人士的七个习惯</li>
<li><img src="./img/book_no05.gif" align="center">被迫强大（北外女生香奈儿）</li>
<li><img src="./img/book_no06.gif" align="center">遇见心想事成的自己（《遇见你是我最幸运的事》）</li>
<li><img src="./img/book_no07.gif" align="center">世界上最伟大的推销员（...）</li>
<li><img src="./img/book_no08.gif" align="center">我的成功可以复制（....）</li>
<li><img src="./img/book_no09.gif" align="center">少有人走的路，心智成熟的自己</li>
<li><img src="./img/book_no10.gif" align="center">活出全新的自己-唤醒深处的记忆</li>
</ol>
</div>
</div>
</body>
</html>一.文档流,元素的表现形式
1.CSS标准文档流
默认的网页的元素他的排版是从上到下,从左到右,不管是自动换行,还是需要手动换行
最终决定窗体从上到下一行一行的排版
根据跟文档流分为2类标签:
1.1 文本级: p,span,b,i,u (除了p都是从左到右)
1.2 容器级:div,li,dt (每个元素标签独占一行)
2.块级元素 div h p
2.1 独占一行
2.2 可以设置宽度和高度
2.3 可以通过margin:opx auto可以设置水平居中
2.4 块级元素默认宽度是100%,高度默认是0,但是可以通过内容撑开
3.行内元素:span a
3.1 默认在同一行
3.2 不能设置宽度和高度
3.3 需要设置其父元素(块元素)的居中属性, css : text-align:center
3.4 行内元素默认的宽度和高度都是0,但是可以通过内容撑开
3.5 外边距:左右有效果,上下无效
3.6 内边距:左右有效果,上下也有效果,撑不开父元素
行内元素尽量不要设置内边距
4.行内块元素:img
4.1 默认是一行
4.2 可以设置高度和宽度
4.3 居中,同行内元素
5.三种元素是可以相互转化的
可以通过display设置元素的类别属性
display:
5.1 block:块元素
5.2 inline:行内元素
5.3 inline-block:行内块元素
5.4 none:不显示,隐藏
div{
display:inline;
}
块元素 行内元素 行内块元素
独占一行 排在一起一行 排在一起一行
二.浮动
div实现布局的一种方式
float:left/none/right
1. 元素实现浮动以后,会脱离文档流,浮动可以使用属性
2. 元素设置浮动以后,会飘在上方,
如果上一个元素没有设置浮动,该元素不能上移
如果上一个元素也设置了浮动,该元素会和他排在一行,并且在他之后,不能重叠
3.浮动不会覆盖文字
4.clear: both;清除上下的浮动效果
还有一种办法[了解]
overflow
三.定位:position
偏移量:以一个参照物当做起始点的移动距离
left,right,top,bottom
根据参照物的不同,有如下几种方式
1.relative:相对定位
1.1 相对之前的位置进行偏移,的一个距离
1.2 相对定位不会脱离文档流
1.3 偏移一旦有重叠,会覆盖其他标签
2.absolute:绝对定位
1.1 绝对定位会脱离文档流
1.2 他的目标是父级别元素,如果父级别元素没有设置position
属性,就会继续往上寻找,直到找到一个设置position的祖先元素,如果都没有,就会根据body来进行偏移
1.3 偏移一旦有重叠,会覆盖其他标签
3.fixed:相对可视窗口body
4.static:默认,无法偏移
实例:京东导航栏
<!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>
<link rel="stylesheet" href="4.css">
</head>
<body>
<!-- 最外层的div页面 -->
<!-- <div class="wrap-content"></div> -->
<!-- 广告logo -->
<div class="logo">
<!-- logo图片 -->
<div class="logo-img">
<img src="./img/顶部logo.jpg" alt="">
<img class="close" src="./img/close.png" alt="">
</div>
</div>
<!-- 导航栏:地址,我的京东 -->
<div class="menu">
<!-- 详细信息 -->
<div class="menu-info">
<a href="#" class="addr">
<img src="./img/add.png" alt=""><span>湖北</span>
</a>
<a href="#" class="hello">你好,请登录</a>
<a href="#" class="zhuce">免费注册</a>
<ul>
<li>|<span><a href="#">我的订单</a></span></li>
<li>|<span><a href="#">我的京东</a><img src="./img/xia.png" alt=""></span></li>
<li>|<span><a href="#">企业会员</a></span></li>
<li>|<span><a href="#" class="qiye">企业采购</a><img src="./img/xia.png" alt=""></span></li>
<li>|<span><a href="#">客服服务</a><img src="./img/xia.png" alt=""></span></li>
<li>|<span><a href="#">导航网站</a><img src="./img/xia.png" alt=""></span></li>
</ul>
</div>
</div>
<!-- 搜索栏 -->
<div class="jd-pic">
<div class="search">
<!-- 左边狗 -->
<img src="./img/jd.png" alt="">
<!-- 搜索框 -->
<div class="search-info">
<input type="text" class="search-text">
<input type="button" class="button-sousou" value="">
<img src="./img/sousuo.png" >
</div>
</div>
<div class="car-content">
<img src="./img/car.png" class="car">
<a href="#"><span>我的购物车</span></a>
<img src="./img/num.png" class="num">
</div>
<div class="erweima">
<img src="./img/erweima.png" >
</div>
</div>
</body>
</html>*{
margin: 0 0;
padding: 0 0;
}
body{
background-color: #f6f6f6;
}
/* 取消掉图片的边框 */
img{
border: none;
}
.logo{
width: 100%;
height: auto;
background-color: #090359;
}
/* 承载图片的div */
.logo .logo-img{
width: 100%;
margin: 0px auto;
}
.logo .logo-img .close{
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
}
.menu{
position: relative;
width:100%;
height: 32px;
background-color: #e3e4e5e6;
}
.menu .menu-info{
position: relative;
width: 100%;
height: 32px;
background-color: #e3e4e5e6;
}
.menu .menu-info .addr{
/* 取消文字下划线 */
text-decoration: none;
}
/* 地址图片的位置 */
.menu .menu-info .addr img{
position: absolute;
top: 7px;
left: 209px;
}
.menu .menu-info a span{
position: relative;
font-family: 'Micsoft YaHei';
color: #a1a2a3;
font-size: 15px;
line-height: 32px;
top: 2px;
left: 225px;
}
.menu .menu-info .hello{
position: absolute;
text-decoration: none;
font-size: 15px;
font-family: 'Micsoft YaHei';
color: #a1a2a3;
top: 3px;
left: 480px;
}
.menu .menu-info .hello:hover{
color: #f10215;
}
.menu .menu-info .zhuce{
position: absolute;
text-decoration: none;
font-size: 15px;
font-family: 'Micsoft YaHei';
color: #f10215;
top: 3px;
left: 590px;
}
.menu .menu-info ul{
list-style-type: none;
position: absolute;
top: 2px;
right: 60px;
}
.menu .menu-info ul li{
font-size: 15px;
line-height: 30px;
font-family: 'Micsoft YaHei';
float: left;
padding-left: 8px;
}
.menu .menu-info ul li span{
padding-left: 8px;
}
.menu .menu-info ul li span a{
text-decoration: none;
color: #a1a2a3;
}
.menu .menu-info .qiye{
color: #f10215;
}
.menu .menu-info ul li span a:hover{
color: #f10215;
}
.menu .menu-info ul li span img{
margin-left: 3px;
}
.jd-pic{
width: 100%;
height: auto;
background-color:white ;
}
.jd-pic .search{
position: relative;
width: 100%;
height: 139px;
}
.jd-pic .search img{
display: block;
float: left;
}
.jd-pic .search .search-info {
width: 1000px;
height: 132px;
}
.jd-pic .search .search-info .search-text{
position: absolute;
width: 500px;
height: 32px;
border: red solid 2px;
top: 38px;
left: 320px;
}
.jd-pic .search .search-info img{
position: absolute;
top: 45px;
left: 835px;
}
.jd-pic .search .search-info .button-sousou{
position: absolute;
width: 45px;
height: 36px;
background-color: red;
border: 1px solid red;
top: 38px;
left: 823px;
}
.jd-pic .search .search-info .search-text:focus{
border: red solid 2px;
}
.car-content{
position: absolute;
background-color: white;
width: 200px;
margin-bottom: 10px;
margin-top: 10px;
height: 70px;
left: 1000px;
top: 130px;
border: red solid 2px;
}
.car-content .car{
position: absolute;
top: 30px;
width: 35px;
margin-top: -10px;
}
.car-content span{
position: absolute;
left: 45px;
font-size: 20px;
color: #f10215;
top: 35px;
margin-top: -10px;
}
.car-content .num{
position: absolute;
width: 35px;
left:155px;
top: 30px;
margin-top: -10px;
}
.erweima{
position: absolute;
left: 1300px;
top: 145px;
}
实例:王者荣耀英雄介绍页面
<!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>
<link rel="stylesheet" href="3.css">
</head>
<body>
<!-- 整个div -->
<div class="wrap-content">
<!-- 标题模块 -->
<div class="title-content">
<img src="./img/logo.png" alt="">
<img src="./img/wzry.png" alt="">
</div>
<!-- 英雄图片模块 -->
<div class="img-content">
<img src="./img/不知火舞.jpg" alt="">
<!-- 小白点 -->
<div id="point">
<a href="#" class="mychecked"></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
<a href="#" ></a>
</div>
</div>
<div class="p"><p>
<u>王者荣耀首页</u>><u>英雄介绍</u>><u>不知火舞</u>
</p></div>
<!-- 技能加点模块 -->
<div class="mode-skill">
<img src="./img/skill.png" alt="">
<div class="skill">
<!-- 技能1 -->
<div>
<!-- 技能图片 -->
<div class="skill-img">
<img src="./img/15700.png" alt="">
</div>
<!-- 技能描述 -->
<div class="skill-content">
<div>
<b style="font-size: 19pt;">忍蜂</b>
<span style="margin-left: 20px;">冷却值:0 消耗:0</span>
</div>
<div style="margin-top: 18px;">
<span>被动：不知火舞每隔5秒的第一次普通攻击将会向当前朝向释放忍蜂，额外造成100（+100%法术加成）的法术伤害并<br> 将敌人击退，忍蜂命中敌人回复10点能量；不知火舞使用技能后能翻滚一段距离，并且会增加50%移动速度，持续0.5秒，该效果会随时间衰减。
<br>普通技能命中敌人将会回复25点能量值，大招每命中一名敌人都将会回复25点能量值</span>
</div>
</div>
</div>
<!-- 技能2 -->
<div class="parent-skill">
<!-- 技能图片 -->
<div class="skill-img">
<img src="./img/15710.png" alt="">
</div>
<!-- 技能介绍 -->
<div class="skill-content">
<div>
<b style="font-size: 19pt;">飞翔龙炎阵</b>
<span style="margin-left: 20px;">冷却值：10/9.2/8.4/7.6/6.8/6 消耗：70</span><br>
</div>
<div style="margin-top: 18px;">
<span><b>被动</b>：不知火舞向上飞踢腾空，对范围内敌人造成550/620/690/760/830/900（+73%法术加成）<br> 点法术伤害并将其击飞0.75秒
</span>
</div>
</div>
</div>
<div class="parent-skill">
<!-- 技能图片 -->
<div class="skill-img">
<img src="./img/15720.png" alt="">
</div>
<!-- 技能介绍 -->
<div class="skill-content">
<div>
<b style="font-size: 19pt;">花蝶扇</b>
<span style="margin-left: 20px;">冷却值：3 消耗：40</span><br>
</div>
<div style="margin-top: 18px;">
<span><b>被动</b>：不知火舞扔出扇子，对第一个命中的目标造成500/590/680/770/860/950（+100%法术加成）
点法术伤害并减少其90%移动<br> 速度，持续0.5秒，同时减少50/80/110/140/170/200点法术防御，
持续3秒，命中敌人回复能量10点
</span>
</div>
</div>
</div>
<div class="parent-skill">
<!-- 技能图片 -->
<div class="skill-img">
<img src="./img/15730.png" alt="">
</div>
<!-- 技能介绍 -->
<div class="skill-content">
<div>
<b style="font-size: 19pt;">必杀·忍蜂</b>
<span style="margin-left: 20px;">冷却值：25/22.5/20 消耗：110</span><br>
</div>
<div style="margin-top: 18px;">
<span><b>被动</b>：不知火舞向前冲刺，对命中的敌人造成800/1000/1200（+110%法术加成）
<br> 点法术伤害并将其击退；同时敌人会减少20%/25%/30%物理攻击力，持续2.5秒
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 铭文 -->
<div class="mode-skill1">
<img src="./img/铭文搭配.png" alt="">
<!-- 铭文 -->
<div>
<table cellspacing="10" cellpadding="50">
<tr>
<td class="mytdimg"><img src="./img/1514.png"></td>
<td class="mytdimg"><img src="./img/3516.png"></td>
<td class="mytdimg"><img src="./img/2512.png"></td>
</tr>
<tr>
<td><b>梦魇</b></td>
<td><b>怜悯</b></td>
<td><b>轮回</b></td>
</tr>
<tr>
<td>法术攻击力+4.2 <br> 法术穿透+2.4</td>
<td>冷却缩减+1%</td>
<td>法术攻击力+2.4 <br> 法术吸血+1%</td>
</tr>
</table>
</div>
<!-- 铭文小技巧 -->
<div class="tps">
Tips：此铭文法术攻击加成能让火舞在前中期就打出一定的<br>伤害量，同时火舞没有蓝条的限制，
一定的吸血铭文可以在<br>很大程度上减少其回家补给的次数，冷却缩减可以更好的消耗<br>敌方，
同时再配上其被动以达到最优输出或是撤离战场。
</div>
</div>
<!-- 出装 -->
<div class="mode-skill2">
<img src="./img/出装建议.png" alt="">
<!-- 出装一 -->
<div class="equipment-content">
<b>出装建议一</b>
<div class="equipment-img">
<img src="./img/1423.jpg" alt="">
<img src="./img/1240.jpg" alt="">
<img src="./img/1233.jpg" alt="">
<img src="./img/1235.jpg" alt="">
<img src="./img/1239.jpg" alt="">
<img src="./img/1231.jpg" alt="">
</div>
<!-- 小建议 -->
<div class="tps">
Tips：冷静之靴能让不知火舞游弋在战场周围时更加灵活，辉月能增加操作的空间
</div>
<!-- 出装一 -->
<div class="equipment-content">
<b>出装建议一</b>
<div class="equipment-img">
<img src="./img/1423.jpg" alt="">
<img src="./img/1240.jpg" alt="">
<img src="./img/1233.jpg" alt="">
<img src="./img/1235.jpg" alt="">
<img src="./img/1239.jpg" alt="">
<img src="./img/1231.jpg" alt="">
</div>
<!-- 小建议 -->
<div class="tps">
Tips：冷静之靴能让不知火舞游弋在战场周围时更加灵活，辉月能增加操作的空间
</div>
</div>
</div>
<!-- 加点建议 -->
<div class="add-skill">
<img src="./img/建议加点.png" alt="">
<div class="add-skill2">
<b style="font-size: 19pt;">主升</b><br>
<span style="margin-left: 10px;" >飞翔龙炎阵</span>
</div>
<div class="add-skill1">
<img src="./img/15710.png" alt="">
</div>
<div class="add-skill3">
<b style="font-size: 19pt;">副升</b><br>
<span style="margin-left: 10px;" >化蝶扇</span>
</div>
<div class="add-skill4">
<img src="./img/15710.png" alt="">
</div>
<div class="add-skill5">
<b style="font-size: 19pt;">召唤师技能</b><br>
<span style="margin-left: 10px;" >闪现/治疗术</span>
</div>
<div class="add-skill6">
<img src="./img/80115.jpg" alt="">
<img src="./img/80102.jpg" alt="">
</div>
</div>
</div>
</body>
</html>/* 去掉默认的外边距内边距 */
*{
margin: 0 0;
padding: 0 0;
}
.wrap-content{
height: 2500px;
background-color: #FAFAFA ;
}
/* 设置标题的背景色 */
.title-content{
background-color: black;
}
/* 设置图片 */
.title-content img{
width: 200px;
height: 70px;
margin-left: 50px;
}
/* 英雄背景div */
.img-content{
position: relative;
width: 100%;
height: 800px;
background-color: darkslategray;
}
.img-content img{
width: 100%;
height: 800px;
}
/* 小白点div */
#point{
/* position: absolute; 跟随父标签*/
position: absolute;
/* width: 100px;
height: 50px;
background-color: deeppink; */
left: 350px;
bottom: 20px;
}
#point a{
float: left;
width: 10px;
height: 10px;
background-color:white;
border-radius: 50px;
/* z-index: 200; */
margin-left: 10px;
}
/* 第一个小白点的效果 */
#point .mychecked{
background-color: red;
border: 1px solid white;
}
#point a:hover{
background-color: red;
border: 1px solid white;
}
.mode-skill{
position: relative;
margin-left: 100px;
margin-top: 20px;
}
.mode-skill1{
position: relative;
left: 1350px;
bottom: 400px;
margin-left: 100px;
margin-top: -90px;
}
.mode-skill2{
position: relative;
bottom: 200px;
margin-left: 80px;
}
.mode-skill .skill{
width: 1300px;
height: 640px;
position: relative;
border:1px solid white;
}
/* 技能图标 */
.skill .skill-img{
margin: 20px 20px;
}
.parent-skill{
position: relative;
height: 140px;
}
/* 技能介绍 */
.skill .skill-content{
position: absolute;
left: 160px;
top: 40px;
}
.skill .myspeator{
margin-top: 30px;
height: 1px;
border-top-color: tomato;
border-top-width: 1px;
border-top-style: solid;
}
table{
text-align: center;
width: 1300px;
}
.mytdimg img{
width: 100px;
height: 100px;
}
.tps{
margin-top: 30px;
width: 1300px;
font-size: 15pt;
background-color: gainsboro;
}
.equipment-content{
position: relative;
margin-top: 40px;
width: 1300px;
}
/* 装备 */
.equipment-content .equipment-img img{
height: 90px;
width: 90px;
margin-left: 20px;
margin-top: 20px;
}
.p{
position: relative;
top: 20px;
left: 100px;
font-size: 22pt;
}
.add-skill{
position: relative;
left: 1350px;
bottom: 500px;
}
.add-skill .add-skill1{
position: relative;
left: 110px;
bottom: 30px;
}
.add-skill .add-skill2{
position: relative;
bottom: -50px;
}
.add-skill .add-skill3{
position: relative;
left:250px ;
bottom: 100px;
}
.add-skill .add-skill4{
position: relative;
left: 350px;
bottom: 180px;
}
.add-skill .add-skill5{
position: relative;
left: 0px;
bottom: 100px;
}
.add-skill .add-skill6{
position: relative;
left: 150px;
bottom: 180px;
}
扫一扫
2488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
