行内元素有哪些，块级元素有哪些，空(void)元素有哪些?

一、行内元素有哪些，块级元素有哪些，空(void)元素有哪些
行内元素: a、b、span、img、input、strong、select、label、em、button、textarea 。块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote 。空元素: 即系没有内容的HTML元素，例如: br、meta、hr、link、input、img 。
二、块级元素、行内元素、行内块元素的区别
1、块级元素 block
块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可自定义 width 和 height。除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。块级元素有以下特点：
每个块级元素都是独自占一行；高度，行高，外边距（margin）以及内边距（padding）都可以控制；元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；多个块状元素标签写在一起，默认排列方式为从上至下。
   // 定义地址    // 定义表格标题        // 定义列表中定义条目       // 定义文档中的分区或节      // 定义列表       // 定义列表中的项目    // 定义一个框架集    // 创建 HTML 表单      // 定义最大的标题     // 定义副标题 
     // 定义标题      // 定义标题 
     // 定义标题 
     // 定义最小的标题 
     // 创建一条水平线     // 元素为 fieldset 元素定义标题      // 标签定义列表项目     // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 <noscript>    // 定义在脚本未被执行时的替代内容 <ol>     // 定义有序列表 <ul>    // 定义无序列表 <p style="text-indent: 2em;">     // 标签定义段落 <pre>     // 定义预格式化的文本 <table>     // 标签定义 HTML 表格 <tbody>     // 标签表格主体（正文） <td>    // 表格中的标准单元格 <tfoot>     // 定义表格的页脚（脚注或表注） <th>    // 定义表头单元格 <thead>    // 标签定义表格的表头 <tr>     // 定义表格中的行</code></pre><p style="text-indent: 2em;"><strong>2、行内元素 inline</strong></p><p style="text-indent: 2em;">行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。 行内元素有以下特点：</p>不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；设置行高有效，等同于给父级元素设置行高；元素的宽度就是它包含的文字或图片的宽度，不可改变；行内元素中不能放块级元素，a 链接里面不能再放链接。<pre class="wp-block-preformatted"><code> <a>     // 标签可定义锚  <abbr>     // 表示一个缩写形式  <acronym>     // 定义只取首字母缩写  <b>     // 字体加粗  <bdo>     // 可覆盖默认的文本方向  <big>     // 大号字体加粗  <br>     // 换行  <cite>     // 引用进行定义  <code>    // 定义计算机代码文本 <dfn>     // 定义一个定义项目 <em>     // 定义为强调的内容 <i>     // 斜体文本效果 <kbd>     // 定义键盘文本 <label>     // 标签为 input 元素定义标注（标记） <q>     // 定义短的引用 <samp>     // 定义样本文本 <select> // 创建单选或多选菜单 <small>     // 呈现小号字体效果 <span>     // 组合文档中的行内元素 <strong> // 加粗 <sub>     // 定义下标文本 <sup>     // 定义上标文本 <textarea>     // 多行的文本输入控件 <tt>     // 打字机或者等宽的文本效果 <var>    // 定义变量</code></pre><p style="text-indent: 2em;"><strong>3、行内块级元素 inline-block</strong></p><p style="text-indent: 2em;">行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个。具体特点如下：</p>高度、行高、外边距以及内边距都可以控制；默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙。<pre class="wp-block-preformatted"><code><button> <input>   <textarea> <select> <img></code></pre><p style="text-indent: 2em;"><strong>4、元素类型转换 display</strong></p><strong>display：block</strong> ，定义元素为块级元素<strong>display : inline </strong>，定义元素为行内元素<strong>display：inline-block</strong>，定义元素为行内块级元素<p style="text-indent: 2em;"><strong>5、总结</strong></p><p style="text-indent: 2em;">不管块级元素还是行内元素，区别：一是排列方式，二是宽高边距设置，三是默认宽度。</p>块级元素会独占一行，而内联元素和内联块元素则会在一行内显示；块级元素和内联块元素可设置 width、height 属性，而内联元素设置无效；块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度；<p style="text-indent: 2em;">而行内块级元素又同时拥有块级元素和行内元素的特点。</p><p style="text-indent: 2em;"><strong><em>延伸阅读1：CSS简介</em></strong></p><p style="text-indent: 2em;">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></div>
              <div class="tag-wrap" style="margin: 30px auto 0;width: 810px;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;">
                <span class="tag-label" style="font-size: 16px; line-height: 22px;margin-right: 6px;">tags:</span>                <a id="tag_click" target="_blank" style="display: inline-block" href="http://www.mobiletrain.org/tag-0-1.html">it技术干货</a>
                              </div>
              <div class="con-left-bottom">
                声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。
              </div>
              <div class="left-form">
                <div class="left-form-left">
                  <div class="h3">10年以上业内强师集结，手把手带你蜕变精英</div>
                  <div class="list-form-item">
                    <i class="ypfont yp-name"></i>
                    <input type="text" placeholder="您的姓名" name="realname" id="realname" autocomplete="off" />
                  </div>
                  <div class="list-form-item list-form-item2">
                    <i class="ypfont yp-shouji"></i>
                    <input type="text" placeholder="您的电话" name="realphone" id="phone" autocomplete="off" />
                  </div>
                  <div class="h4">请您保持通讯畅通，专属学习老师24小时内将与您1V1沟通</div>
                  <div class="list-submit">
                    免费领取<br /><i class="ypfont yp-dianjitianjia"></i>
                  </div>
                </div>
                <div class="left-form-right">
                  <div class="h3">今日已有<span>369</span>人领取成功</div>
                  <div class="swiper-container swiper-phone swiper-no-swiping">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        刘同学 138****2860 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        王同学 131****2015 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        张同学 133****4652 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        李同学 135****8607 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        杨同学 132****5667 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        岳同学 134****6652 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        梁同学 157****2950 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        刘同学 189****1015 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        张同学 155****4678 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        邹同学 139****2907 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        董同学 138****2867 刚刚成功领取
                      </div>
                      <div class="swiper-slide">
                        周同学 136****3602 刚刚成功领取
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="c_page_bottom">
                            <div class="c_page_bottom_item">
                <div class="c_page_bottom_item_up"></div>
                <p>上一篇</p>
                <a href="http://www.mobiletrain.org/about/BBS/206146.html" title="206147" target="_blank">在app定制开发开发过程中有哪些需要注意的事项和问题?</a>
              </div>
                            <div class="c_page_bottom_item">
                <div class="c_page_bottom_item_next"></div>
                <p>下一篇</p>
                <a href="http://www.mobiletrain.org/about/BBS/206148.html" target="_blank" title="206147">MySQL InnoDB聚簇索引B+树的阶(m)是怎样决定的?</a>
              </div>
                          </div>
            <div class="left-ad">
              <a href="javascript:;" onclick="open53_pc()" rel="nofollow" class="left-ad-btn">
                免费打包获取<i class="ypfont yp-dianjitianjia"></i>
              </a>
            </div>
            <!-- <div class="article">
					<div class="article-left">
						<h3 class="art-tit">猜你喜欢<span>LIKE</span></h3>
						<div class="art-con">
												<a href="http://www.mobiletrain.org/zcjy/linux/136992.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/2023/0428/1682660765277.png" alt="" />
							</div>
							<div class="art-item-info">
							<h4>云计算技术就业前景以及发展方向怎样？</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-08-07							</span>
							</div>
						</a>
												<a href="http://www.mobiletrain.org/zcjy/html5/136991.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/2023/0428/1682660577662.png" alt="" />
							</div>
							<div class="art-item-info">
							<h4>HTML5开发就业前景以及发展方向怎样？</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-08-07							</span>
							</div>
						</a>
												<a href="http://www.mobiletrain.org/zcjy/bigdata/136903.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/2023/0428/1682660971839.png" alt="" />
							</div>
							<div class="art-item-info">
							<h4>大数据数据分析目前就业前景如何？</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-08-07							</span>
							</div>
						</a>
												</div>
					</div>
					<div class="article-right">
						<h3 class="art-tit">最新文章<span>NEW</span></h3>
						<div class="art-con">
												<a href="http://www.mobiletrain.org/about/BBS/206208.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/tywzt/ty35.jpg" alt="" />
							</div>
							<div class="art-item-info">
							<h4>两个人同时操纵数据库，怎么处理并发问题?</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-10-13							</span>
							</div>
						</a>
												<a href="http://www.mobiletrain.org/about/BBS/206200.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/tywzt/tongyong8.jpg" alt="" />
							</div>
							<div class="art-item-info">
							<h4>mysql varchar默认值‘’、null和空区别在哪里?</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-10-13							</span>
							</div>
						</a>
												<a href="http://www.mobiletrain.org/about/BBS/206197.html" target="_blank" class="art-item">
							<div class="art-item-img">
							<img src="/tywzt/tongyong9.jpg" alt="" />
							</div>
							<div class="art-item-info">
							<h4>大量读写的mysql表怎么优化?</h4>
							<span>
								<i class="ypfont yp-shijian"></i>
								2023-10-13							</span>
							</div>
						</a>
												</div>
					</div>
					</div> -->
            <div class="article article-hot" style="margin-top: 20px">
              <div class="article-tit-box">
                <div class="art-tit h3">
                  相关推荐<span class="art-hot">HOT</span>
                </div>
                <!-- <a href="javascript:;" onclick="open53_pc()">更多>></a> -->
              </div>
              <div class="art-con">
                                <a href="http://www.mobiletrain.org/about/BBS/206209.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/ty66.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">Lucene/ ElasticSearch这类的搜索引擎和SQL数据库里的查询/全文检索有什么区别?</div>
                    <p>
                      一、Lucene/ ElasticSearch这类的搜索引擎和SQL数据库里的查询/全文检索的区别es也可以理解成是一种数据库，不仅能提供全文检索功能，还可以支...<span>详情>></span>
                    </p>
                    <span>2023-10-13 12:17:32</span>
                  </div>
                </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206204.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/tongyong7.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">mysql的innodb通过nextkey lock解决了幻读，为什么还说默认隔离级别是可重复读?</div>
                    <p>
                      一、解决了幻读，为什么还说默认隔离级别是可重复读MySQL的可重复读隔离级别下是有“bug”的Snapshot Isolation，可以避免非write skew style的...<span>详情>></span>
                    </p>
                    <span>2023-10-13 12:09:00</span>
                  </div>
                </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206202.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/ty68.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">block为什么能够捕获外界变量?</div>
                    <p>
                      一、block能够捕获外界变量的原因在定义Block的时候，外界变量被编译器转换成了结构体成员变量，并且在调用Block的时候，这些变量的值会被拷贝...<span>详情>></span>
                    </p>
                    <span>2023-10-13 12:03:20</span>
                  </div>
                </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206199.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/ty61.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">CSS3有哪些特性?</div>
                    <p>
                      一、CSS3的特性 1、圆角（border-radius）在CSS3中，可以用border-radius属性来设置元素的圆角效果。这个属性可以用来为元素的四个角分别设置圆...<span>详情>></span>
                    </p>
                    <span>2023-10-13 11:56:19</span>
                  </div>
                </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206188.html" target="_blank" class="art-item">
                  <div class="art-item-img">
                    <img src="/tywzt/ty66.jpg" alt="" />
                  </div>
                  <div class="art-item-info">
                    <div class="h4">Linux服务器为什么要创建用户?</div>
                    <p>
                      一、Linux服务器要创建用户的原因1、安全性每个用户都应该有自己的用户账号，这样可以限制对系统资源和文件的访问权限。每个用户都有自己的用户...<span>详情>></span>
                    </p>
                    <span>2023-10-13 11:37:23</span>
                  </div>
                </a>
                              </div>
            </div>
          </div>
        </div>
				<div class="con-right">
            <div class="con-right-rywd">
              <div class="rywd-tit h3">
                <i class="ypfont yp-weinituijian"></i>热门推荐
              </div>
              <div class="swiper3">
                                <a href="http://www.mobiletrain.org/about/BBS/206209.html" target="_blank">
                                    <div class="ypfont yp-zhiding"></div>
                                    <p>Lucene/ ElasticSearch这类的搜索引擎和SQL数据库里的查询/全文检索有什么区别?</p>
                  <span class="a11">沸</span>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206208.html" target="_blank">
                                    <div class="ypfont yp-1"></div>
                                    <p>两个人同时操纵数据库，怎么处理并发问题?</p>
                  <span class="a21">热</span>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206207.html" target="_blank">
                                    <div class="ypfont yp-2"></div>
                                    <p>美国seer数据库怎么用?</p>
                  <span class="a31">热</span>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206206.html" target="_blank">
                                    <div class="ypfont yp-3"></div>
                                    <p>一个事务提交时，redo log和undo log以及bin log的生成流程是怎么样的?</p>
                  <span class="a41">新</span>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206205.html" target="_blank">
                                    <div class="a5">
                    4                  </div>
                                    <p>MYSQL中on duplicatekey update有什么优缺点?</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206204.html" target="_blank">
                                    <div class="a6">
                    5                  </div>
                                    <p>mysql的innodb通过nextkey lock解决了幻读，为什么还说默认隔离级别是可重复读?</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206203.html" target="_blank">
                                    <div class="a7">
                    6                  </div>
                                    <p>Xshell是做什么用的?</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206202.html" target="_blank">
                                    <div class="a8">
                    7                  </div>
                                    <p>block为什么能够捕获外界变量?</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206201.html" target="_blank">
                                    <div class="a9">
                    8                  </div>
                                    <p>Gradle Transform到底是什么怎么用?</p>
                                  </a>
                                <a href="http://www.mobiletrain.org/about/BBS/206200.html" target="_blank">
                                    <div class="a10">
                    9                  </div>
                                    <p>mysql varchar默认值‘’、null和空区别在哪里?</p>
                                  </a>
                              </div>
              <!-- <div class="swiper-button-prev swiper-button-prev3">
								<i class="indexfont index-youjiantou-copy"></i>
							</div>
							<div class="swiper-button-next swiper-button-next3">
								<i class="ypfont yp-huanyipi"></i>换一批
							</div> -->
            </div>
            <!-- 面试题库 -->

            <a href="javascript:;" rel="nofollow" onclick="open53_pc()" class="right-ad">
              <img src="/images/right-ad.jpg" alt="" /></a>
            <!-- 技术干货 -->
              <div class="con-right-rywd">
              <div class="tk-tit h3">
                <a class="left"  href="http://www.mobiletrain.org/about/BBS/" target="_blank"><i class="ypfont yp-fabujishu" ></i>技术干货</a>
                <a href="http://www.mobiletrain.org/about/BBS/" target="_blank">更多>></a>
              </div>
              <div class="swiper2 ">
                 
                  <a href="http://www.mobiletrain.org/about/BBS/258998.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/ty33.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">如何实现服务器负载均衡</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/about/BBS/258997.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/tongyong12.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">linux有哪些优势和劣势</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/about/BBS/258996.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/ty64.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">linux需要驱动吗</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/about/BBS/258995.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/tongyong7.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">android与linux的区别</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/about/BBS/258994.html" class="swiper-slide" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/ty64.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">如何搭建基于容器的深度学习环境</div>
                      <p>2023-12-06</p>
                    </div>
                  </a>
                                </div>
            </div>

            <!-- 职场就业 -->
              <div class="con-right-rywd">
              <div class="tk-tit h3">
                <a class="left"  href="http://www.mobiletrain.org/zcjy/" target="_blank"><i class="ypfont yp-minzhengtubiao1-46" ></i>职场就业</a>
                <a href="http://www.mobiletrain.org/zcjy/" target="_blank">更多>></a>
              </div>
              <div class="swiper2 ">
                 
                  <a href="http://www.mobiletrain.org/zcjy/wlaq/259025.html" class="swiper-slide zcjy" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/ty41.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">网络安全软件开发的就业前景</div>
                      <p>2023-12-09</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/zcjy/python/259024.html" class="swiper-slide zcjy" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/tongyong6.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">学会python工程师后的就业前景</div>
                      <p>2023-12-09</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/zcjy/java/259023.html" class="swiper-slide zcjy" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//tywzt/tongyong2.jpg"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">学会java工程师后的就业前景</div>
                      <p>2023-12-09</p>
                    </div>
                  </a>
                  
                  <a href="http://www.mobiletrain.org/zcjy/linux/136992.html" class="swiper-slide zcjy" target="_blank">
                    <div class="img-box">
                      <img
                        src="http://www.mobiletrain.org//2023/0428/1682660765277.png"
                        alt=""
                      />
                    </div>
                    <div>
                      <div class="h3">云计算技术就业前景以及发展方向怎样？</div>
                      <p>2023-08-07</p>
                    </div>
                  </a>
                                </div>
            </div>
			            <!-- 快速通道 -->
            <div class="con-right-rywd">
              <div class="rywd-tit h3">
                <i class="ypfont yp-weinituijian"></i>快速通道</div>
              <ul class="kstd">
                <li>
                  <div class="h3">培训机构</div>
                  <a href="http://www.mobiletrain.org/training/" target="_blank">了解培训相关</a>
                </li>
                <li>
                  <div class="h3">就业前景</div>
                  <a href="http://www.mobiletrain.org/zcjy/" target="_blank">查看就业前景</a>
                </li>
                <li>
                  <div class="h3">培训门槛</div>
                  <a href="http://www.mobiletrain.org/ljc/" target="_blank">了解学习门槛</a>
                </li>
                <li>
                  <div class="h3">应聘面试</div>
                  <a href="http://www.mobiletrain.org/interview/" target="_blank">常见面试考题</a>
                </li>
                <li>
                  <div class="h3">就业服务</div>
                  <a href="http://www.mobiletrain.org/employ/"  target="_blank" rel="nofollow">毕业推荐就业</a>
                </li>
                <li>
                  <div class="h3">师资团队</div>
                  <a href="http://www.mobiletrain.org/teachers/" target="_blank" rel="nofollow">了解师资团队</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <link rel="stylesheet" href="/css/css3451.css">
<div class="edu-footer">
  <div class="base">
    <div class="con-left">
      <img src="http://www.mobiletrain.org/images_index/new-logo-white.png" class="edu-footer-logo" />
      <p class="edu-footer-sologan">初心至善&nbsp;&nbsp;匠心育人</p>
      <p class="edu-footer-phoneNumber">
        <i class="icon icon-dianhua1"></i>400-811-9990
        <a href="javascript:;" onclick="open53_pc()" rel="nofollow">24小时在线咨询</a>
      </p>
    </div>
    <div class="con-right">
      <div class="edu-footer-about-links">
        <div class="list1 list">
          <div class="h4">关于千锋</div>
          <ul>
            <li>
              <a href="http://www.mobiletrain.org/about/" target="_blank" rel="nofollow">千锋简介</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/about/contact.html" target="_blank" rel="nofollow">联系我们</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/qynx/" target="_blank" rel="nofollow">企业服务</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/topic/fygy.html" target="_blank" rel="nofollow">锋益公益</a>
            </li>
          </ul>
        </div>
        <div class="list1 list">
          <div class="h4">学习资源</div>
          <ul>
            <li>
              <a href="http://prj.qfedu.com/" target="_blank" rel="nofollow">项目库</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/open/" target="_blank" rel="nofollow">公开课</a>
            </li>
            <li>
              <a href="http://video.mobiletrain.org/" target="_blank" rel="nofollow">视频教程</a>
            </li>
            <!-- <li>
              <a href="http://www.mobiletrain.org/book/index.html?type=1" target="_blank" rel="nofollow">原创丛书</a>
            </li> -->
          </ul>
        </div>
        <div class="list1 list">
          <div class="h4">服务指南</div>
          <ul>
            <li>
              <a href="javascript:;" onclick="open53_pc()" rel="nofollow">报名咨询</a>
            </li>
            <li>
              <a href="javascript:;" onclick="open53_pc()" rel="nofollow">校区分布</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/sitemap.html" target="_blank" rel="nofollow">网站地图</a>
            </li>
            <li>
              <a href="http://www.mobiletrain.org/privacyPolicy.html" target="_blank" rel="nofollow">隐私声明</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="qrcode-box">
        <div class="qrcode flex-center">
          <img src="/wzt/qr-code-new.png" alt="千锋教育" />
        </div>
        <div class="h4">千锋学习站 | <span>随时随地免费学</span></div>
      </div>
      <div class="qrcode-box">
        <div class="qrcode flex-center">
          <img src="http://www.mobiletrain.org/images_index/qr-code-new2.png" alt="千锋教育" />
        </div>
        <div class="h4">扫一扫进入千锋手机站</div>
      </div>
    </div>
  </div>
</div>
  <div class="footer-link">
  <div class="base">
    <div class="links-tab">
      <span class="active">热门课程</span>
      <!-- <span>热点话题</span> -->
      <!-- <span>学习线路图</span> -->
      <!-- <span>千锋全国</span> -->
    </div>
    <div class="links-a active">
      <!-- 编辑配置cms -->
      <a href="http://www.mobiletrain.org/" target="_blank">IT培训</a>
<a href="http://java.mobiletrain.org/" target="_blank">java培训</a>
<a href="http://www.mobiletrain.org/special/harmonyos.html" target="_blank">鸿蒙开发培训</a>
<a href="http://www.mobiletrain.org/special/emb.html" target="_blank">嵌入式培训</a>
<a href="http://www.mobiletrain.org/special/python.html" target="_blank">python培训</a>
<a href="http://www.mobiletrain.org/special/ui.html" target="_blank">UI培训</a>
<a href="http://www.mobiletrain.org/special/test.html" target="_blank">软件测试培训</a>
<a href="http://www.mobiletrain.org/special/linux.html" target="_blank">云计算培训</a>
<a href="http://www.mobiletrain.org/special/bigdata.html" target="_blank">大数据培训</a>
<a href="http://www.mobiletrain.org/special/wlw.html" target="_blank">物联网培训</a>
<a href="http://www.mobiletrain.org/special/wlw.html" target="_blank">游戏开发培训</a>
<a href="http://www.mobiletrain.org/special/qmt.html" target="_blank">全媒体运营培训</a>
<a href="http://www.mobiletrain.org/special/ysjj.html" target="_blank">影视剪辑培训</a>
<a href="http://www.mobiletrain.org/special/wlaq.html" target="_blank">网络安全培训</a>
    </div>
    <!-- <div class="links-a"> -->
    <!-- 编辑配置cms3490 -->
    <!-- </div> -->
    <!-- <div class="links-a">
       编辑配置cms 3442
    </div> -->
    <!-- <div class="links-a"> -->
    <!-- 编辑配置cms3443 -->
    <!-- </div> -->
  </div>
  <div class="copyright">
  <p class="copyright-p">
    Copyright 2011-2024
    <a href="javascript:;" rel="nofollow" title="千锋互联">北京千锋互联科技有限公司</a>
    <a href="https://beian.miit.gov.cn/" rel="nofollow">
      京ICP备12003911号-3
    </a>
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802035719" rel="nofollow" style="display: inline-block;text-decoration: none;height: 20px;line-height: 20px;">
      <img src="/wzt/beian.png" />京公网安备 11010802030320号
    </a>
  </p>
  <p>千锋教育 运营主体：北京千锋互联科技有限公司，属具备计算机技术培训资质的教育培训机构。</p>
</div>
</div>
  <script src="http://www.mobiletrain.org/js/jquery.min.js"></script>
  <script src="http://www.mobiletrain.org/js/swiper4.5.0.min.js"></script>
  <script src="http://www.mobiletrain.org/js/common1.js?111"></script>
  <script src="/js/highlight.min.js"></script>
  <script>
    hljs.highlightAll();
  </script>
  <script>
    $(document).ready(function () {
      var href = $("#tag_click").attr("href");
      if (href && href.indexOf("-0-") != -1) {
        var tag_code = $("#tag_click").html();
        $.ajax({
          url: "http://app.mobiletrain.org/tags.php",
          type: "get",
          dataType: "json",
          data: { tag_code: tag_code },
          success: function (data) {
            $("#tag_click").attr(
              "href",
              "http://www.mobiletrain.org/tag-" + data + "-1.html"
            );
          },
        });
      }
    });
    if (
      location.href.indexOf("/about/info/") > -1 ||
      location.href.indexOf("/about/news/") > -1
    ) {
      document
        .getElementsByClassName("topicactive")[0]
        .classList.remove("topicactive");
      document
        .getElementsByClassName("interviewactive")[0]
        .classList.remove("interviewactive");
    } else if (location.href.indexOf("/interview/") > -1) {
      document
        .getElementsByClassName("topicactive")[0]
        .classList.remove("topicactive");
      document
        .getElementsByClassName("xwzxactive")[0]
        .classList.remove("xwzxactive");
    } else {
      document
        .getElementsByClassName("xwzxactive")[0]
        .classList.remove("xwzxactive");
      document
        .getElementsByClassName("interviewactive")[0]
        .classList.remove("interviewactive");
    }

    new Swiper(".swiper1", {
      loop: true,
      autoplay: true,
      pagination: {
        el: ".swiper-pagination1",
      },
    });
    // new Swiper(".swiper3", {
    //   slidesPerView: 14,
    //   slidesPerGroup: 14,
    //   spaceBetween: 20,
    //   loop: true,
    //   direction: "vertical",
    //   // navigation: {
    //   //   nextEl: ".swiper-button-next3",
    //   //   prevEl: ".swiper-button-prev3",
    //   // },
    // });
    // new Swiper(".swiper4", {
    //   slidesPerView: 6,
    //   slidesPerGroup: 6,
    //   spaceBetween: 21,
    //   loop: true,
    //   direction: "vertical",
    //   navigation: {
    //     nextEl: ".swiper-button-next4",
    //     prevEl: ".swiper-button-prev4",
    //   },
    // });
    // new Swiper(".swiper-phone", {
    //   slidesPerView: 4,
    //   autoplay: true,
    //   spaceBetween: 0,
    //   loop: true,
    //   direction: "vertical",
    // });

    // $(".select_txt,.selet_open").hover(function (event) {
    //   $(".option").hide();
    //   $(this).siblings(".option").show();
    //   $(".select_box").removeClass("uiChooseActiveS");
    //   $(this).parent(".select_box").addClass("uiChooseActiveS");
    // });
    // $(document).click(function (event) {
    //   var eo = $(event.target);
    //   if (
    //     $(".select_box").is(":visible") &&
    //     eo.attr("class") != "option" &&
    //     !eo.parent(".option").length
    //   )
    //     $(".option").hide();
    //   $(".select_box").removeClass("uiChooseActiveS");
    // });
    // $(".option a").click(function () {
    //   var value = $(this).text();
    //   $(this).parent().siblings(".select_txt").text(value);
    //   $(".select_value").val(value);
    //   $(".option").hide();
    //   $(".select_box").removeClass("uiChooseActiveS");
    // });
    // $(".option").each(function (d) {
    //   var optionSize = 6;
    //   var optionLiHeight = $(".option a").height();
    //   var optionVarS = $(this).find("a").length - 2;
    //   console.log(optionVarS, optionSize);
    //   if (optionVarS > optionSize) {
    //     var optionSheight = 175;
    //     $(this).height(optionSheight);
    //   } else {
    //     var optionLiTal = optionVarS * optionLiHeight;
    //     $(this).height(optionLiTal);
    //   }
    // });
    // $(".option,.uiChooseTable,.mod_select ").mouseleave(function () {
    //   $(".select_box").removeClass("uiChooseActiveS");
    //   $(".option").hide();
    // });
    // $(".option a").each(function () {
    //   $(this).html("第" + $(this).text() + "页");
    // });
    new Swiper(".swiper-news", {
      autoplay: true,
      loop: true,
      direction: "vertical",
    });
    $(".footer-link .links-tab span").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
      $(".footer-link .links-a").removeClass("active");
      $(".footer-link .links-a").eq($(this).index()).addClass("active");
    });
    // 开班信息模块
    function kbxx () {
      // var courseId =
      //   arguments.length > 0 && arguments[0] !== undefined
      //     ? arguments[0]
      //     : 13;
      var cityId = arguments[0] !== undefined ? arguments[0] : 10;

      $.ajax({
        url: "https://owzsapi.qfedu.com/v1/api/openApiRestController/getAllClass?type=1",
        type: "GET",
        success: function success (res) {
          var r = "";
          var curTime = new Date().getTime();
          var filterArr = res.data.filter(function (v) {
            return v.cityId == cityId;
          });
          console.log(filterArr);
          filterArr.reverse().forEach(function (v, idx) {
            // 最大条数
            if (idx > 14) return;
            // 判断时间
            var timeMode = "预约占座";
            var kbTime = new Date(v.beginTime).getTime();
            // 一个月
            if (kbTime - curTime > 2592000000) {
              timeMode = "预约占座";
            }
            if (kbTime - curTime > 0 && kbTime - curTime < 2642268030) {
              timeMode = "即将报满";
            }
            if (kbTime - curTime < 0) {
              timeMode = "爆满开班";
            }

            r +=
              "<li class='swiper-slide'>\n        <a href='javascript:;' rel='nofollow'  onclick='open53_pc()'>\n        <span>" +
              (v.name.replace(v.cityName, "").split("班")[0] + "班") +
              "</span>\n          <span>" +
              v.beginTime +
              "</span>\n          <span data-mode='" +
              (timeMode === "即将报满"
                ? 0
                : timeMode === "爆满开班"
                  ? 2
                  : 1) +
              "'>" +
              timeMode +
              " " +
              (timeMode === "即将报满" ? "" : "") +
              "</span>\n          </a>\n          </li>";
          });

          $(".des-right-classes .swiper-wrapper").html(r);
          new Swiper(".swiper6", {
            slidesPerView: 5,
            slidesPerGroup: 5,
            spaceBetween: 10,
            loop: true,
            autoplay: true,
            direction: "vertical",
          });
        },
      });
    }
    kbxx(10);
    $(".kbxx_showXq_btn").click(function () {
      $(".kbxx_showXq_box").css("display", "block");
    });
    $(".kbxx_showXq_box ul li").click(function () {
      kbxx($(this).data("cityid"));
      $(".choose-xq").html($(this).context.innerText);
      $(".kbxx_showXq_box").css("display", "none");
    });

    /******************表单提交start********************/
    // (function () {
    //   var timer = setInterval(function () {
    //     if (window.$) {
    //       clearInterval(timer);
    //       $(".list-submit").click(function () {
    //         var params = {
    //           name: $("#realname").val(),
    //           phone: $("#phone").val(),
    //         };
    //         var phReg = /^[\u4e00-\u9fa5a-zA-Z0-9-]{2,20}$/;
    //         var nameReg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]8$/;
    //         // if (!nameReg.test($("#realname").val())) {
    //         //   alert("请正确输入姓名");
    //         //   return;
    //         // }

    //         if (!phReg.test($("#phone").val())) {
    //           alert("请正确输入手机号");
    //           return;
    //         }

    //         $.ajax({
    //           type: "POST",
    //           contentType: "application/json",
    //           url:
    //             "http://api-newzs.1000phone.net//v1/api/seoFormController/add",
    //           data: JSON.stringify(params),
    //           success: function success(res) {
    //             alert(res.msg);
    //           },
    //         });
    //       });
    //     }
    //   }, 1000);
    // })();
    /******************表单提交end********************/

    console.log($(".content-left-box-child").height());
    console.log($(".content-right-box-child").height());
    if (
      $(".content-left-box-child").height() >
      $(".content-right-box-child").height()
    ) {
      $(".content-right-box-child").addClass("sticky");
    } else if (
      $(".content-left-box-child").height() <
      $(".content-right-box-child").height()
    ) {
      $(".content-left-box-child").addClass("sticky");
    }

      // var bot =
      // 	$(".con-right-rywd").offset().top +
      // 	$(".con-right-rywd").outerHeight() -
      // 	$(window).height() +
      // 	30;
      // console.log(bot);
      // var left = $("#fixTop").offset().left;
      // $(document).scroll(function () {
      // 	var scroH = $(document).scrollTop();
      // 	var footTop = $(".edu-footer").offset().top - $(window).height();
      // 	if (scroH > bot) {
      // 		$("#fixTop").addClass("rig_fixed");
      // 		$("#fixTop").css({ left: left });
      // 		if (scroH > footTop) {
      // 			$("#fixTop").addClass("rig_bottom");
      // 			$("#fixTop").css({ left: "909px" });
      // 		} else {
      // 			$("#fixTop").removeClass("rig_bottom");
      // 			// $("#fixTop").css({ left: "auto" });
      // 		}
      // 	} else {
      // 		$("#fixTop").removeClass("rig_fixed");
      // 		$("#fixTop").removeClass("rig_bottom");
      // 		// $("#fixTop").css({ left: "auto" });
      // 	}
      // });
  </script>
</body>

</html>