一、Boostrap
1、什么是Boostrap？
Boostrap是基于HTML、CSS和JS语言编写的框架，具有简单、灵活的特性，用于样式库、组件和插件。常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。
2、组成：
（1）、基本框架：栅格系统
（2）、丰富的CSS样式库；只需要改变标签的class属性值，就可以给标签应用不同的样式，
（3）、丰富的布局组件：有丰富的组件库
（4）、插件：基于jQuery的插件，功能强大
3、浏览器
PC端
Chrome浏览器的优势:
①市场占有率高，兼容性好，界面简洁、简单易用。基于强大的JavaScript V8引擎,速度很快。 ②可通过扩展插件增强功能，便于开发人员使用。内置防止网络钓鱼及恶意软件功能，更加安全。
③跨平台，支持PC端的Windows、Linux和Mac系统，以及移动端的Android和iOS系统。
（1）浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。
（2）浏览器内核主要包括Blink、WebKit和Trident等。
（3）PC端的浏览器主要包括Google (谷歌)公司的Chrome浏览器、Mozilla公司的Firefox浏览器、和Edge浏览器等。
移动端：
①移动端设备主要包括Android、iOS等手机设备。
②屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。
（1）移动端的浏览器主要包括Android Browser和Mobile Safari,以及国产浏览器。
（2）浏览器的内核主要是Webkit内核，对HTML5提供了很好的支持。
（3）国产浏览器主要包括UC浏览器、QQ浏览器和百度浏览器等。
4、视口
视口(Viewport)：能将大分辨率网页缩小在手机浏览器上
1）布局视口（layout viewport)：是指网页的宽度
（2）视觉视口（visual viewport)：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。
（3）理想视口（ideal viewport)：是指对设备来讲最理想的窗口尺寸。
（4）视口的设置：在<mete>标签中，将name属性设置为viewport，即可设置视口。在终端中以理想视口打开网页。
5、可缩放的矢量图形(SAG）:是一种开放标准的描述矢量图像语言，它基于XML(可扩展标记语言)
（1）、SVG使用标签的方式定义图形、外层标签是<svg>
（2)、它的属性包括x、y、width、height用数字表示，每个数字之间用空格或逗号隔开，表示定义在一个左上角（x,y)坐标位置，宽度为width,高度为height的矩形。
二、boorstrap的环境配置
1、在页面中引入本地文件
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="../js/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
2、使用CDN加速器：
（1）、CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
（2）、用法：(前提是必须联网)
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
三、bootstrap的全局CSS样式：
1、HTML5文档类型
bootstrap使用到的某些HtmL元素和css属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
<!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>
</body>
</html>
2、移动设备优先
Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在之中添加viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3、禁用移动设备上的缩放功能
在移动设备浏览器上，通过为视口(viewport) 设置meta属性为user-scalable=no ,可以禁用其缩放(zooming) 功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
<meta name="viewport" content=" width=device-width，initial-scale=1,maximum-scale=l，user-scalable=no">
4、布局容器：
1.1、container：用于固定宽度并支持响应式布局的容器
1.2、container-fluid：类用于 100% 宽度，占据全部视口（viewport）的容器
例子：
<!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="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
div{
width: 300px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="container text-center text-uppercase">
西安<br>
abcd
</div>
<br><br><br>
<div class="container-fluid"></div>
</body>
</html>
5、文本排版样式
| 语法 | 用途 |
|---|---|
| class=‘text-left’ | 文本左对齐 |
| class=‘text-right’ | 文本右对齐 |
| class=‘text-center’ | 文本居中 |
| class=’ text-justify’ | 文本两端对齐 |
| class=‘text-nowrap’ | 禁止文本换行 |
6、设置字母大小写
| 样式 | 用途 |
|---|---|
| class=‘text-lowercase’ | 转成小写 |
| class=‘text-uppercase’ | 转成大写 |
| class=‘text-capitalize’ | 首字母大写 |
7、列表样式
7.1、无样式列表
class=‘list-unstyled’
(1)、无序列表-顺序无关紧要的一组元素
<!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="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-unstyled">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
修改样式前：
修改后：
(2)、有序列表
<!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="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-unstyled">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
修改前：
修改后：
7.2、内联列表：
class = "list-inline"
例子：
<!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="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-inline">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
修改前：
修改后：
8、表格样式
（1）、表格的全局样式：class=“table”
（2）、给一个带边框的表格：class=“table-bordered”
（3）、表格隔行变色：class=“table-striped”
（4）、鼠标悬停效果：class=“table-hover”
（5）、缩紧表格：class=“table-condensed”
(6)、状态类：通过这些状态类可以为行或单元格设置颜色。
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
例子：
<!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="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>朝代</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>秦朝</td>
<td>秦始皇</td>
<td>男</td>
<td>50</td>
</tr>
<tr>
<td>汉朝</td>
<td>刘邦</td>
<td>男</td>
<td>48</td>
</tr>
<tr>
<td>唐朝</td>
<td>李世民</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>唐朝</td>
<td>武则天</td>
<td>女</td>
<td>60</td>
</tr>
</tbody>
</table>
</body>
</html>
9、表单样式
9.1、html中的表单：
<form action="远程服务器地址" method="请求方式"></form>
9.2、bootstrap应用到form的样式属性：
a、form-control：应用该样式,则表单控件<input>、<textarea>、<select>的宽度，默认为100%(即占容器宽度的100%)
<input class="form-control"/>
<textarea class="form-control"></textarea>
<select class="form-control"></select>
b、内联表单：
<form class="form-inline"></form>
c、水平排列的表单
<form class="form-horizontal"></form>
10、按钮
10.1、可作为按钮使用的标签或元素
（1）、为<a>、<button> 或<input> 元素添加按钮类(button class) 即可使用Bootstrap提供的样式。
（2）、虽然按钮类可以应用到<a>和<button>元素上，但是，导航和导航条组件只支持<button>元素。
（3）、如果<a>元素被作为按钮使用，那么，务必为其设置role= “button” 属性。
（4）、兼容性:强烈建议尽可能使用元素来获得在各个浏览器上获得相匹配的绘制效果。
<a>、<button>、<input type=“button”/>
<!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="./css/bootstrap.min.css">
<script src="./6.25/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<a href="#" class="btn btn-default" role="button">公司首页</a>
<button class="btn btn-default">公司简介</button>
<input type="button" class="btn btn-default" value="新闻中心"> <!--普通按钮-->
<input type="submit" class="btn btn-default" value="在线留言"> <!--提交按钮，在form表单外没有意义，form表单里面提交给远程服务器-->
</body>
</html>
10.2、样式
<!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="./css/bootstrap.min.css">
<script src="./6.25/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<!-- 样式 -->
<button class="btn btn-default">default</button><!-- 默认样式 -->
<button class="btn btn-primary">primary</button><!-- 首选项 -->
<button class="btn btn-success">success</button><!-- 成功 -->
<button class="btn btn-info">info</button><!-- 一般信息 -->
<button class="btn btn-warning">warning</button><!-- 警告 -->
<button class="btn btn-danger">danger</button><!-- 危险 -->
<button class="btn btn-link">link</button><!-- 链接 -->
</body>
</html>
<button type="button" class="btn btn-primary active">激活状态</button>
<button class="btn btn-default" disabled>禁用状态</button>
10.3、尺寸
| 样式 | 用途 |
|---|---|
| btn-lg | 大按钮 |
| btn-sm | 小按钮 |
| btn-xs | 超小按钮 |
<button class="btn btn-success btn-lg">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning btn-sm">warning</button>
<button class="btn btn-danger btn-xs">danger</button>
11、图片
| 样式 | 用途 |
|---|---|
| class=“img-rounded” | 圆角图片 |
| class=“img-circle” | 圆形图片 |
| class=“img-thumbnail” | 边框圆角 |
<!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="./css/bootstrap.min.css">
<script src="./6.25/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<img src="./img/car.jpg" class="img-rounded" width="480px" height="280px">
<img src="./img/car.jpg" class="img-circle" width="480px" height="280px">
<img src="./img/car.jpg" class="img-thumbnail" width="480px" height="280px">
</body>
</html>
四、栅格系统
1、将屏幕或视口(viewport)自动分为最多12列
2、通过一些列的行和列来创建页面布局
3、通过行(row)在水平方向创建一组列(column).内容应当放置于列(column)内，并且，只有列(column)可以作为行(row)的直接子元素
4、通过行(row)在水平方向创建一组列(column).内容应当放置于列(column)内，并且，只有列(column)可以作为行(row)的直接子元素
5、如果一行(row)中包含了的列(column)大于 12，多余的列(column)所在的元素将被作为一个整体另起一行排列。
6、栅格参数：'*'表示1~12数字
| 样式 | 含义 |
|---|---|
| col-xs-* | 超小屏幕、手机 |
| col-sm-* | 小屏幕、平板 |
| col-md-* | 中等屏幕、桌面显示器 |
| col-lg-* | 大屏幕、大桌面显示器 |
举例：
<!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="./css/bootstrap.min.css">
<script src="./6.25/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-1 bg-success">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1 bg-danger">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1 bg-primary">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1 bg-warning">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1 bg-info">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1 bg-success">1</div>
<div class="col-md-1">1</div>
</div>
<br><br>
<div class="container">
<div class="col-md-8 bg-danger">col-md-8</div>
<div class="col-md-4 bg-info">col-md-4</div>
</div>
<br><br>
<div class="container">
<div class="col-md-4 bg-danger col-md-offset-1 ">col-md-4</div>
<div class="col-md-4 bg-info">col-md-4</div>
<div class="col-md-4 bg-warning">col-md-4</div>
</div>
</body>
</html>
7、栅格系统的列漂移：
7.1、列偏移：col-md-offset-*
例子：
<div class="container">
<div class="col-md-4 bg-danger col-md-offset-1 ">col-md-4</div>
<div class="col-md-4 bg-info">col-md-4</div>
<div class="col-md-4 bg-warning">col-md-4</div>
</div>
8、字体图标
(1)、如何使用字体图标，出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补(padding) ，务必在图标和文本之间添加一个空格。
(2)、不要和其他组件混合使用，图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的标签，并将图标类应用到这个标签上。
(3)、只对内容为空的元素起作用，图标类只能应用在不包含任何文本内容或子元素的元素上。
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
9、下拉菜单
(1)、定义容器(容器的class为：dropdown)
(2)、在容器中添加菜单触发器和菜单项
例子：
<!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="./css/bootstrap.min.css">
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-defalut" data-toggle="dropdown">
关于我们
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> <a href="">公司简介</a> </li>
<li><a href="">公司荣誉</a></li>
<li ><a href="">发展历程</a></li>
<li><a href="">组织结构</a></li>
</ul>
</div>
</body>
</html>
（3）、分割线：
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">关于我们<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">公司荣誉</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">组织结构</a></li>
</ul>
</div>
（4）、禁用菜单
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">关于我们<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">公司荣誉</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">组织结构</a></li>
</ul>
</div>
10、按钮组：将按钮放在btn-group的容器中
（1）、通过按钮组容器.btn-group把一组按钮放在同一行里。 （2）、按钮组中，除第一个和最后一个按钮外，中间按钮没有圆角。
10.1、按钮工具栏
<!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="./css/bootstrap.min.css">
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">Left</button>
<button class="btn btn-default">Middle</button>
<button class="btn btn-default">Right</button>
</div>
<div class="btn-group">
<button class="btn btn-default">a</button>
<button class="btn btn-default">b</button>
<button class="btn btn-default">c</button>
</div>
</div>
</body>
</html>
10.2、按钮组的尺寸：
<!-- 按钮组大小 -->
<div class="btn-group btn-group-lg">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<br><br>
<div class="btn-group btn-group-md">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<br><br>
<div class="btn-group btn-group-sm">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<br><br>
<div class="btn-group btn-group-xs">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
10.3、嵌套
<div class="btn-group">
<button class="btn btn-defalut">Left</button>
<button class="btn btn-defalu">Middle</button>
<button class="btn btn-defalut">Right</button>
<div class="btn-group">
<button class="btn btn-default " data-toggle="dropdown">
More
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li><a href="#">Top</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Bottom</a></li>
</ul>
</div>
</div>
11、输入框组
11.1、描述
通过在文本输入框<input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为.input-group 赋予.input-group-addon 类，可以给.form-control的前面或后面添加额外的元素。只支持文本输入框<input>, 不能用于<select>和<textarea>元素。
11.2、尺寸
为.input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。尺寸类包括: .input-group-lg和.input-group-sm。
例子：
<!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="./css/bootstrap.min.css">
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
关于我们
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> <a href="">公司简介</a> </li>
<li><a href="">公司荣誉</a></li>
<li role="separator" class="divider"></li>
<li ><a href="">发展历程</a></li>
<li class="disabled"><a href="">组织结构</a></li>
</ul>
</div>
<br><br><br>
<div class="btn-group">
<button class="btn btn-default">Left</button>
<button class="btn btn-default">Middle</button>
<button class="btn btn-default">Right</button>
<div class="btn-group">
<button class="btn btn-default" data-toggle="dropdown">
More
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li><a href="#">Top</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Bottom</a></li>
</ul>
</div>
</div>
<br><br><br>
<!-- 输入框组 -->
<div class="container">
<div class="input-group col-md-2">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="username">
</div>
</body>
</html>
11.3、作为额外元素的按钮
<!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="./css/bootstrap.min.css">
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="input-group col-md-2">
<input type="text"class="form-control" placeholder="username" >
<span class="input-group-btn">
<button class="btn btn-danger" data-toggle="dropdown">
开始搜索
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> <a href="#">AAAAAA</a> </li>
<li> <a href="#">BBBBBB</a> </li>
<li> <a href="#">CCCCCC</a> </li>
<li class="divider"></li>
<li> <a href="#">DDDDDD</a> </li>
</ul>
</span>
</div>
</div>
</body>
</html>
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
