国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 行內元素有哪些,塊級元素有哪些,空(void)元素有哪些?

行內元素有哪些,塊級元素有哪些,空(void)元素有哪些?

來源:千鋒教育
發布人:xqq
時間: 2023-10-13 10:25:00 1697163900

一、行內元素有哪些,塊級元素有哪些,空(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 id="izxyvyb" class="tag-wrap" style="margin: 30px auto 0;width: 810px;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;"> <span id="ihfzyx3" 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.kei0345678.cn/tag-0-1.html">it技術干貨</a> </div> <div id="sp42uwn" class="con-left-bottom"> 聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。 </div> <div id="d22dopn" class="left-form"> <div id="opmrq2d" class="left-form-left"> <div id="gk6ygco" class="h3">10年以上業內強師集結,手把手帶你蛻變精英</div> <div id="di3x74x" class="list-form-item"> <i class="ypfont yp-name"></i> <input type="text" placeholder="您的姓名" name="realname" id="realname" autocomplete="off" /> </div> <div id="fjkmhdj" 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 id="kpkm7ja" class="h4">請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通</div> <div id="fkl2nj4" class="list-submit"> 免費領取<br /><i class="ypfont yp-dianjitianjia"></i> </div> </div> <div id="62pwtst" class="left-form-right"> <div id="wv8fazc" class="h3">今日已有<span>369</span>人領取成功</div> <div id="94hegji" class="swiper-container swiper-phone swiper-no-swiping"> <div id="kgehtvt" class="swiper-wrapper"> <div id="ij10azd" class="swiper-slide"> 劉同學 138****2860 剛剛成功領取 </div> <div id="ekkmlkk" class="swiper-slide"> 王同學 131****2015 剛剛成功領取 </div> <div id="6hmxtux" class="swiper-slide"> 張同學 133****4652 剛剛成功領取 </div> <div id="gfgbvgh" class="swiper-slide"> 李同學 135****8607 剛剛成功領取 </div> <div id="9jej9a7" class="swiper-slide"> 楊同學 132****5667 剛剛成功領取 </div> <div id="rwvvwpo" class="swiper-slide"> 岳同學 134****6652 剛剛成功領取 </div> <div id="mjie6co" class="swiper-slide"> 梁同學 157****2950 剛剛成功領取 </div> <div id="wxrol42" class="swiper-slide"> 劉同學 189****1015 剛剛成功領取 </div> <div id="6zxyppq" class="swiper-slide"> 張同學 155****4678 剛剛成功領取 </div> <div id="znqqssc" class="swiper-slide"> 鄒同學 139****2907 剛剛成功領取 </div> <div id="lhp12dc" class="swiper-slide"> 董同學 138****2867 剛剛成功領取 </div> <div id="997mmmk" class="swiper-slide"> 周同學 136****3602 剛剛成功領取 </div> </div> </div> </div> </div> </div> <div id="dk3v9ab" class="c_page_bottom"> <div id="3vusmnm" class="c_page_bottom_item"> <div id="cjdffhi" class="c_page_bottom_item_up"></div> <p>上一篇</p> <a href="http://www.kei0345678.cn/about/BBS/206146.html" title="206147" target="_blank">在app定制開發開發過程中有哪些需要注意的事項和問題?</a> </div> <div id="pn2klh4" class="c_page_bottom_item"> <div id="xxxu7mu" class="c_page_bottom_item_next"></div> <p>下一篇</p> <a href="http://www.kei0345678.cn/about/BBS/206148.html" target="_blank" title="206147">MySQL InnoDB聚簇索引B+樹的階(m)是怎樣決定的?</a> </div> </div> <div id="sp74b2e" class="left-ad"> <a href="javascript:;" onclick="open53_pc()" rel="nofollow" class="left-ad-btn"> 免費打包獲取<i class="ypfont yp-dianjitianjia"></i> </a> </div> <!-- <div id="ihzbwyt" class="article"> <div id="hbcffzw" class="article-left"> <h3 class="art-tit">猜你喜歡<span>LIKE</span></h3> <div id="abxwvy7" class="art-con"> <a href="http://www.kei0345678.cn/zcjy/linux/136992.html" target="_blank" class="art-item"> <div id="knm2okf" class="art-item-img"> <img src="/2023/0428/1682660765277.png" alt="" /> </div> <div id="6kmhkpo" class="art-item-info"> <h4>云計算技術就業前景以及發展方向怎樣?</h4> <span> <i class="ypfont yp-shijian"></i> 2023-08-07 </span> </div> </a> <a href="http://www.kei0345678.cn/zcjy/html5/136991.html" target="_blank" class="art-item"> <div id="1xytrus" class="art-item-img"> <img src="/2023/0428/1682660577662.png" alt="" /> </div> <div id="vyzw7kj" class="art-item-info"> <h4>HTML5開發就業前景以及發展方向怎樣?</h4> <span> <i class="ypfont yp-shijian"></i> 2023-08-07 </span> </div> </a> <a href="http://www.kei0345678.cn/zcjy/bigdata/136903.html" target="_blank" class="art-item"> <div id="cddbef2" class="art-item-img"> <img src="/2023/0428/1682660971839.png" alt="" /> </div> <div id="b9quzvu" class="art-item-info"> <h4>大數據數據分析目前就業前景如何?</h4> <span> <i class="ypfont yp-shijian"></i> 2023-08-07 </span> </div> </a> </div> </div> <div id="noojfdj" class="article-right"> <h3 class="art-tit">最新文章<span>NEW</span></h3> <div id="wutuvwt" class="art-con"> <a href="http://www.kei0345678.cn/about/BBS/206208.html" target="_blank" class="art-item"> <div id="njjqqoo" class="art-item-img"> <img src="/tywzt/ty35.jpg" alt="" /> </div> <div id="g6qax7w" class="art-item-info"> <h4>兩個人同時操縱數據庫,怎么處理并發問題?</h4> <span> <i class="ypfont yp-shijian"></i> 2023-10-13 </span> </div> </a> <a href="http://www.kei0345678.cn/about/BBS/206200.html" target="_blank" class="art-item"> <div id="mphgzaz" class="art-item-img"> <img src="/tywzt/tongyong8.jpg" alt="" /> </div> <div id="vywqop2" 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.kei0345678.cn/about/BBS/206197.html" target="_blank" class="art-item"> <div id="172kggn" class="art-item-img"> <img src="/tywzt/tongyong9.jpg" alt="" /> </div> <div id="jgefxtt" class="art-item-info"> <h4>大量讀寫的mysql表怎么優化?</h4> <span> <i class="ypfont yp-shijian"></i> 2023-10-13 </span> </div> </a> </div> </div> </div> --> <div id="wtuxcbz" class="article article-hot" style="margin-top: 20px"> <div id="ghihkko" class="article-tit-box"> <div id="po69k7j" class="art-tit h3"> 相關推薦<span id="sp9uvqo" class="art-hot">HOT</span> </div> <!-- <a href="javascript:;" onclick="open53_pc()">更多>></a> --> </div> <div id="xaw6yt9" class="art-con"> <a href="http://www.kei0345678.cn/about/BBS/206209.html" target="_blank" class="art-item"> <div id="vrxyu4z" class="art-item-img"> <img src="/tywzt/ty66.jpg" alt="" /> </div> <div id="6ecwpxu" class="art-item-info"> <div id="oit7vyz" 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.kei0345678.cn/about/BBS/206204.html" target="_blank" class="art-item"> <div id="1ppm9sr" class="art-item-img"> <img src="/tywzt/tongyong7.jpg" alt="" /> </div> <div id="yzawt4p" class="art-item-info"> <div id="ys19ifg" 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.kei0345678.cn/about/BBS/206202.html" target="_blank" class="art-item"> <div id="dc9vybm" class="art-item-img"> <img src="/tywzt/ty68.jpg" alt="" /> </div> <div id="h9xvvzy" class="art-item-info"> <div id="9rtuzts" 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.kei0345678.cn/about/BBS/206199.html" target="_blank" class="art-item"> <div id="ffcbdhi" class="art-item-img"> <img src="/tywzt/ty61.jpg" alt="" /> </div> <div id="moneglk" class="art-item-info"> <div id="77rp9ml" 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.kei0345678.cn/about/BBS/206188.html" target="_blank" class="art-item"> <div id="67ohnky" class="art-item-img"> <img src="/tywzt/ty66.jpg" alt="" /> </div> <div id="ol9eyxv" class="art-item-info"> <div id="tnso4s9" 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 id="yyxuxfi" class="con-right"> <div id="6q7lnjj" class="con-right-rywd"> <div id="h1uq3lh" class="rywd-tit h3"> <i class="ypfont yp-weinituijian"></i>熱門推薦 </div> <div id="kied74a" class="swiper3"> <a href="http://www.kei0345678.cn/about/BBS/206209.html" target="_blank"> <div id="vnjpsqm" class="ypfont yp-zhiding"></div> <p>Lucene/ ElasticSearch這類的搜索引擎和SQL數據庫里的查詢/全文檢索有什么區別?</p> <span id="2ngbxab" class="a11">沸</span> </a> <a href="http://www.kei0345678.cn/about/BBS/206208.html" target="_blank"> <div id="fzuspua" class="ypfont yp-1"></div> <p>兩個人同時操縱數據庫,怎么處理并發問題?</p> <span id="qmm37u7" class="a21">熱</span> </a> <a href="http://www.kei0345678.cn/about/BBS/206207.html" target="_blank"> <div id="qcdegbe" class="ypfont yp-2"></div> <p>美國seer數據庫怎么用?</p> <span id="broopvs" class="a31">熱</span> </a> <a href="http://www.kei0345678.cn/about/BBS/206206.html" target="_blank"> <div id="ylffjkl" class="ypfont yp-3"></div> <p>一個事務提交時,redo log和undo log以及bin log的生成流程是怎么樣的?</p> <span id="kwtt692" class="a41">新</span> </a> <a href="http://www.kei0345678.cn/about/BBS/206205.html" target="_blank"> <div id="vqr6nct" class="a5"> 4 </div> <p>MYSQL中on duplicatekey update有什么優缺點?</p> </a> <a href="http://www.kei0345678.cn/about/BBS/206204.html" target="_blank"> <div id="xwdd1xr" class="a6"> 5 </div> <p>mysql的innodb通過nextkey lock解決了幻讀,為什么還說默認隔離級別是可重復讀?</p> </a> <a href="http://www.kei0345678.cn/about/BBS/206203.html" target="_blank"> <div id="la1aazj" class="a7"> 6 </div> <p>Xshell是做什么用的?</p> </a> <a href="http://www.kei0345678.cn/about/BBS/206202.html" target="_blank"> <div id="till4zy" class="a8"> 7 </div> <p>block為什么能夠捕獲外界變量?</p> </a> <a href="http://www.kei0345678.cn/about/BBS/206201.html" target="_blank"> <div id="7rsvsuq" class="a9"> 8 </div> <p>Gradle Transform到底是什么怎么用?</p> </a> <a href="http://www.kei0345678.cn/about/BBS/206200.html" target="_blank"> <div id="fcwv4ke" class="a10"> 9 </div> <p>mysql varchar默認值‘’、null和空區別在哪里?</p> </a> </div> <!-- <div id="6xt4297" class="swiper-button-prev swiper-button-prev3"> <i class="indexfont index-youjiantou-copy"></i> </div> <div id="2s0pnik" 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 id="x4fhgdn" class="con-right-rywd"> <div id="sec6f2h" class="tk-tit h3"> <a class="left" href="http://www.kei0345678.cn/about/BBS/" target="_blank"><i class="ypfont yp-fabujishu" ></i>技術干貨</a> <a href="http://www.kei0345678.cn/about/BBS/" target="_blank">更多>></a> </div> <div id="skk62sn" class="swiper2 "> <a href="http://www.kei0345678.cn/about/BBS/258998.html" class="swiper-slide" target="_blank"> <div id="wlg7lhx" class="img-box"> <img src="http://www.kei0345678.cn//tywzt/ty33.jpg" alt="" /> </div> <div> <div id="er9srsq" class="h3">如何實現服務器負載均衡</div> <p>2023-12-06</p> </div> </a> <a href="http://www.kei0345678.cn/about/BBS/258997.html" class="swiper-slide" target="_blank"> <div id="jcdt4lc" class="img-box"> <img src="http://www.kei0345678.cn//tywzt/tongyong12.jpg" alt="" /> </div> <div> <div id="7c42vq9" class="h3">linux有哪些優勢和劣勢</div> <p>2023-12-06</p> </div> </a> <a href="http://www.kei0345678.cn/about/BBS/258996.html" class="swiper-slide" target="_blank"> <div id="p4q4jh9" class="img-box"> <img src="http://www.kei0345678.cn//tywzt/ty64.jpg" alt="" /> </div> <div> <div id="gs1cfhz" class="h3">linux需要驅動嗎</div> <p>2023-12-06</p> </div> </a> <a href="http://www.kei0345678.cn/about/BBS/258995.html" class="swiper-slide" target="_blank"> <div id="cv9fgfg" class="img-box"> <img src="http://www.kei0345678.cn//tywzt/tongyong7.jpg" alt="" /> </div> <div> <div id="rkkli94" class="h3">android與linux的區別</div> <p>2023-12-06</p> </div> </a> <a href="http://www.kei0345678.cn/about/BBS/258994.html" class="swiper-slide" target="_blank"> <div id="fvsuwbp" class="img-box"> <img src="http://www.kei0345678.cn//tywzt/ty64.jpg" alt="" /> </div> <div> <div id="ykh20b7" class="h3">如何搭建基于容器的深度學習環境</div> <p>2023-12-06</p> </div> </a> </div> </div> <!-- 職場就業 --> <div id="kw2i2m2" class="con-right-rywd"> <div id="qarmefe" class="tk-tit h3"> <a class="left" href="http://www.kei0345678.cn/zcjy/" target="_blank"><i class="ypfont yp-minzhengtubiao1-46" ></i>職場就業</a> <a href="http://www.kei0345678.cn/zcjy/" target="_blank">更多>></a> </div> <div id="mdedd6i" class="swiper2 "> <a href="http://www.kei0345678.cn/zcjy/wlaq/259025.html" class="swiper-slide zcjy" target="_blank"> <div id="kusyzyb" class="img-box"> <img src="http://www.kei0345678.cn//tywzt/ty41.jpg" alt="" /> </div> <div> <div id="f47dzc7" class="h3">網絡安全軟件開發的就業前景</div> <p>2023-12-09</p> </div> </a> <a href="http://www.kei0345678.cn/zcjy/python/259024.html" class="swiper-slide zcjy" target="_blank"> <div id="ndwu4m2" class="img-box"> <img src="http://www.kei0345678.cn//tywzt/tongyong6.jpg" alt="" /> </div> <div> <div id="7ijk4ot" class="h3">學會python工程師后的就業前景</div> <p>2023-12-09</p> </div> </a> <a href="http://www.kei0345678.cn/zcjy/java/259023.html" class="swiper-slide zcjy" target="_blank"> <div id="comr74e" class="img-box"> <img src="http://www.kei0345678.cn//tywzt/tongyong2.jpg" alt="" /> </div> <div> <div id="t7b3lni" class="h3">學會java工程師后的就業前景</div> <p>2023-12-09</p> </div> </a> <a href="http://www.kei0345678.cn/zcjy/linux/136992.html" class="swiper-slide zcjy" target="_blank"> <div id="nxaws6i" class="img-box"> <img src="http://www.kei0345678.cn//2023/0428/1682660765277.png" alt="" /> </div> <div> <div id="fpqppni" class="h3">云計算技術就業前景以及發展方向怎樣?</div> <p>2023-08-07</p> </div> </a> </div> </div> <!-- 快速通道 --> <div id="bhji7je" class="con-right-rywd"> <div id="bn3bekp" class="rywd-tit h3"> <i class="ypfont yp-weinituijian"></i>快速通道</div> <ul class="kstd"> <li> <div id="tc3r2op" class="h3">培訓機構</div> <a href="http://www.kei0345678.cn/training/" target="_blank">了解培訓相關</a> </li> <li> <div id="ahhku8p" class="h3">就業前景</div> <a href="http://www.kei0345678.cn/zcjy/" target="_blank">查看就業前景</a> </li> <li> <div id="mdbaydx" class="h3">培訓門檻</div> <a href="http://www.kei0345678.cn/ljc/" target="_blank">了解學習門檻</a> </li> <li> <div id="n924uw9" class="h3">應聘面試</div> <a href="http://www.kei0345678.cn/interview/" target="_blank">常見面試考題</a> </li> <li> <div id="kvx9fhd" class="h3">就業服務</div> <a href="http://www.kei0345678.cn/employ/" target="_blank" rel="nofollow">畢業推薦就業</a> </li> <li> <div id="dklmp4h" class="h3">師資團隊</div> <a href="http://www.kei0345678.cn/teachers/" target="_blank" rel="nofollow">了解師資團隊</a> </li> </ul> </div> </div> </div> </div> </div> </div> <link rel="stylesheet" href="/css/css3451.css"> <div id="rcdcayv" class="edu-footer"> <div id="rzyvrjo" class="base"> <div id="1axvvvx" class="con-left"> <img src="http://www.kei0345678.cn/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 id="a49s297" class="con-right"> <div id="sji7iij" class="edu-footer-about-links"> <div id="kvrv65n" class="list1 list"> <div id="psup7i2" class="h4">關于千鋒</div> <ul> <li> <a href="http://www.kei0345678.cn/about/" target="_blank" rel="nofollow">千鋒簡介</a> </li> <li> <a href="http://www.kei0345678.cn/about/contact.html" target="_blank" rel="nofollow">聯系我們</a> </li> <li> <a href="http://www.kei0345678.cn/qynx/" target="_blank" rel="nofollow">企業服務</a> </li> <li> <a href="http://www.kei0345678.cn/topic/fygy.html" target="_blank" rel="nofollow">鋒益公益</a> </li> </ul> </div> <div id="nr6tabw" class="list1 list"> <div id="g9ibbw4" class="h4">學習資源</div> <ul> <li> <a target="_blank" rel="nofollow">項目庫</a> </li> <li> <a href="http://www.kei0345678.cn/open/" target="_blank" rel="nofollow">公開課</a> </li> <li> <a target="_blank" rel="nofollow">視頻教程</a> </li> <!-- <li> <a href="http://www.kei0345678.cn/book/index.html?type=1" target="_blank" rel="nofollow">原創叢書</a> </li> --> </ul> </div> <div id="qccabxs" class="list1 list"> <div id="mvwtuut" 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.kei0345678.cn/sitemap.html" target="_blank" rel="nofollow">網站地圖</a> </li> <li> <a href="http://www.kei0345678.cn/privacyPolicy.html" target="_blank" rel="nofollow">隱私聲明</a> </li> </ul> </div> </div> <div id="ktroopo" class="qrcode-box"> <div id="1edxcfg" class="qrcode flex-center"> <img src="/wzt/qr-code-new.png" alt="千鋒教育" /> </div> <div id="sa9tvvx" class="h4">千鋒學習站 | <span>隨時隨地免費學</span></div> </div> <div id="8gjgf4z" class="qrcode-box"> <div id="w2wmu7y" class="qrcode flex-center"> <img src="http://www.kei0345678.cn/images_index/qr-code-new2.png" alt="千鋒教育" /> </div> <div id="thiecej" class="h4">掃一掃進入千鋒手機站</div> </div> </div> </div> </div> <div id="4abywvv" class="footer-link"> <div id="r4rpopn" class="base"> <div id="lv7mon4" class="links-tab"> <span id="c97cx4o" class="active">熱門課程</span> <!-- <span>熱點話題</span> --> <!-- <span>學習線路圖</span> --> <!-- <span>千鋒全國</span> --> </div> <div id="2xzckie" class="links-a active"> <!-- 編輯配置cms --> <a href="http://www.kei0345678.cn/" target="_blank">IT培訓</a> <a target="_blank">java培訓</a> <a href="http://www.kei0345678.cn/special/harmonyos.html" target="_blank">鴻蒙開發培訓</a> <a href="http://www.kei0345678.cn/special/emb.html" target="_blank">嵌入式培訓</a> <a href="http://www.kei0345678.cn/special/python.html" target="_blank">python培訓</a> <a href="http://www.kei0345678.cn/special/ui.html" target="_blank">UI培訓</a> <a href="http://www.kei0345678.cn/special/test.html" target="_blank">軟件測試培訓</a> <a href="http://www.kei0345678.cn/special/linux.html" target="_blank">云計算培訓</a> <a href="http://www.kei0345678.cn/special/bigdata.html" target="_blank">大數據培訓</a> <a href="http://www.kei0345678.cn/special/wlw.html" target="_blank">物聯網培訓</a> <a href="http://www.kei0345678.cn/special/wlw.html" target="_blank">游戲開發培訓</a> <a href="http://www.kei0345678.cn/special/qmt.html" target="_blank">全媒體運營培訓</a> <a href="http://www.kei0345678.cn/special/ysjj.html" target="_blank">影視剪輯培訓</a> <a href="http://www.kei0345678.cn/special/wlaq.html" target="_blank">網絡安全培訓</a> </div> <!-- <div id="jmjknl1" class="links-a"> --> <!-- 編輯配置cms3490 --> <!-- </div> --> <!-- <div id="ydzkq7k" class="links-a"> 編輯配置cms 3442 </div> --> <!-- <div id="cohfz7a" class="links-a"> --> <!-- 編輯配置cms3443 --> <!-- </div> --> </div> <div id="nzxwuu2" class="copyright"> <p class="copyright-p"> Copyright 2011-2025 <a href="javascript:;" rel="nofollow" title="千鋒互聯">北京千鋒互聯科技有限公司</a> <a rel="nofollow"> 京ICP備12003911號-3 </a> <a target="_blank" 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.kei0345678.cn/js/jquery.min.js"></script> <script src="http://www.kei0345678.cn/js/swiper4.5.0.min.js"></script> <script src="http://www.kei0345678.cn/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.kei0345678.cn/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 id="tsqrnrr" 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> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站,您可能还对以下资源感兴趣:</p> <a href="http://www.kei0345678.cn/" title="&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x4E8C;&#x533A;&#x7CBE;&#x54C1;&#x2D;&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x4E8C;&#x533A;&#x7CBE;&#x54C1;&#x4E45;&#x2D;&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x4E8C;&#x533A;&#x7CBE;&#x54C1;&#x4E45;&#x4E45;&#x2D;&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x4E8C;&#x533A;&#x7CBE;&#x54C1;&#x4E45;&#x4E45;&#x39;&#x31;&#x2D;&#x514D;&#x8D39;&#x6BDB;&#x7247;&#x64AD;&#x653E;&#x2D;&#x514D;&#x8D39;&#x6BDB;&#x7247;&#x57FA;&#x5730;">&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x4E8C;&#x533A;&#x7CBE;&#x54C1;&#x2D;&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x4E8C;&#x533A;&#x7CBE;&#x54C1;&#x4E45;&#x2D;&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x4E8C;&#x533A;&#x7CBE;&#x54C1;&#x4E45;&#x4E45;&#x2D;&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x4E8C;&#x533A;&#x7CBE;&#x54C1;&#x4E45;&#x4E45;&#x39;&#x31;&#x2D;&#x514D;&#x8D39;&#x6BDB;&#x7247;&#x64AD;&#x653E;&#x2D;&#x514D;&#x8D39;&#x6BDB;&#x7247;&#x57FA;&#x5730;</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="mrsxn" class="pl_css_ganrao" style="display: none;"><tfoot id="mrsxn"></tfoot><sup id="mrsxn"><pre id="mrsxn"><sup id="mrsxn"><source id="mrsxn"></source></sup></pre></sup><noscript id="mrsxn"><em id="mrsxn"><div id="mrsxn"></div></em></noscript><s id="mrsxn"><nobr id="mrsxn"><em id="mrsxn"><tfoot id="mrsxn"></tfoot></em></nobr></s><table id="mrsxn"></table><style id="mrsxn"><optgroup id="mrsxn"></optgroup></style><nav id="mrsxn"></nav><strike id="mrsxn"><em id="mrsxn"><blockquote id="mrsxn"><form id="mrsxn"></form></blockquote></em></strike><tr id="mrsxn"></tr><pre id="mrsxn"><dl id="mrsxn"><em id="mrsxn"><menuitem id="mrsxn"></menuitem></em></dl></pre><delect id="mrsxn"><strike id="mrsxn"><em id="mrsxn"><menuitem id="mrsxn"></menuitem></em></strike></delect><th id="mrsxn"><small id="mrsxn"></small></th><big id="mrsxn"></big><strong id="mrsxn"></strong><delect id="mrsxn"><strike id="mrsxn"><style id="mrsxn"><video id="mrsxn"></video></style></strike></delect><s id="mrsxn"></s><button id="mrsxn"><input id="mrsxn"><abbr id="mrsxn"><thead id="mrsxn"></thead></abbr></input></button><mark id="mrsxn"></mark><optgroup id="mrsxn"><output id="mrsxn"><center id="mrsxn"><strong id="mrsxn"></strong></center></output></optgroup><source id="mrsxn"><dfn id="mrsxn"><thead id="mrsxn"><i id="mrsxn"></i></thead></dfn></source><dfn id="mrsxn"></dfn><center id="mrsxn"></center><address id="mrsxn"><label id="mrsxn"><table id="mrsxn"><output id="mrsxn"></output></table></label></address><label id="mrsxn"><li id="mrsxn"><center id="mrsxn"></center></li></label><nav id="mrsxn"></nav><em id="mrsxn"><ul id="mrsxn"></ul></em><abbr id="mrsxn"></abbr><tt id="mrsxn"></tt><menu id="mrsxn"></menu><ins id="mrsxn"><pre id="mrsxn"><code id="mrsxn"><em id="mrsxn"></em></code></pre></ins><tt id="mrsxn"></tt><abbr id="mrsxn"><video id="mrsxn"><pre id="mrsxn"><form id="mrsxn"></form></pre></video></abbr><xmp id="mrsxn"></xmp><b id="mrsxn"></b><span id="mrsxn"><strong id="mrsxn"><label id="mrsxn"><mark id="mrsxn"></mark></label></strong></span><u id="mrsxn"></u><i id="mrsxn"></i><mark id="mrsxn"></mark><strike id="mrsxn"><optgroup id="mrsxn"><ul id="mrsxn"><form id="mrsxn"></form></ul></optgroup></strike><abbr id="mrsxn"></abbr><dfn id="mrsxn"></dfn><em id="mrsxn"><div id="mrsxn"></div></em><bdo id="mrsxn"><center id="mrsxn"><legend id="mrsxn"><var id="mrsxn"></var></legend></center></bdo><kbd id="mrsxn"></kbd><var id="mrsxn"><delect id="mrsxn"></delect></var><optgroup id="mrsxn"><center id="mrsxn"><wbr id="mrsxn"><ol id="mrsxn"></ol></wbr></center></optgroup><b id="mrsxn"></b><b id="mrsxn"></b><pre id="mrsxn"><mark id="mrsxn"></mark></pre><var id="mrsxn"></var><acronym id="mrsxn"></acronym><noframes id="mrsxn"><rp id="mrsxn"></rp>
    <var id="mrsxn"><tr id="mrsxn"><tt id="mrsxn"></tt></tr></var><mark id="mrsxn"><acronym id="mrsxn"></acronym></mark>
  • <rt id="mrsxn"><tbody id="mrsxn"></tbody></rt>
    • <mark id="mrsxn"></mark><fieldset id="mrsxn"></fieldset>
      • <ol id="mrsxn"></ol>