<menu id="iusa6"><samp id="iusa6"></samp></menu>
        上<\/div>右<\/div>左<\/div>    <\/body><\/html><\/pre>

這里首先用margin-left: 50%,讓下面兩塊的左側到中間位置。然后再對右下角那塊用margin-left,值是負的兩倍寬度。就可以把它移動到左下角。因此第二個div是右下的,第三個是左下的,需要換一下。<\/p>

還有一個小技巧,使用inline-block會有小的間隙,可以使用去除inline-block元素間間距的N種方法來解決。<\/p>

float方式:<\/p>

                    <\/title>    <\/head>    <style> *{            margin: 0; border: 0; }        .d1, .d2, .d3{            height: 100px;             width: 100px;             background-color: #FF0000;             border: solid 1px #000000; }        .d1{            margin: 0 auto; }        .d3{            float: left;             margin-left: -200px; }        .d2{            float: left;             margin-left: 50%; }    <\/style>    <body>
<h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>        <div class=\"d1\">上<\/div>        <div class=\"d2\">右<\/div>        <div class=\"d3\">左<\/div>    <\/body><\/html><\/pre>  <p>和inline-block方式大同小異,就不再贅述。<\/p>  <p>還有全屏的品字布局,就更加簡單,基本思路是上面的div寬100%,下面的兩個div分別寬50%,然后用float或者inline使其不換行即可。<\/p>  <p>這里貼出一種方法:<br \/><\/p>  <pre class='brush:php;toolbar:false;'><!DOCTYPE html><html>    <head lang=\"en\">        <meta charset=\"UTF-8\">        <title><\/title>    <\/head>    <style> *{            margin: 0;             border: 0; }        .d1, .d2, .d3{            height: 300px; }        .d1{            width: 100%;             height: 300px;             background-color: #FF0000; }        .d3{            float: left;             width: 50%;             background-color: #0099FF; }        .d2{            float: left;             width: 50%;             background-color: #4eff00; }    <\/style>    <body>        <div class=\"d1\">上<\/div>        <div class=\"d2\">右<\/div>        <div class=\"d3\">左<\/div>    <\/body><\/html><\/pre>  <p><br><\/p> "}	</script>
	
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>

<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
	<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
    <div   id="377j5v51b"   class="head">
        <div   id="377j5v51b"   class="haed_left">
            <div   id="377j5v51b"   class="haed_logo">
                <a href="http://m.miracleart.cn/zh/" title="" class="haed_logo_a">
                    <img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
                </a>
            </div>
            <div   id="377j5v51b"   class="head_nav">
                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a>
                    <div   class="377j5v51b"   id="dropdown-template1" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://m.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a>
                            <a href="http://m.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a>
                            <a href="http://m.miracleart.cn/zh/wenda.html" title="問答" class="languagechoosea">問答</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="學習" class="head_nava head_nava-template1_1">學習</a>
                    <div   class="377j5v51b"   id="dropdown-template1_1" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://m.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a>
                            <a href="http://m.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a>
                    <div   class="377j5v51b"   id="dropdown-template1_2" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://m.miracleart.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a>
                            <a href="http://m.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a>
                            <a href="http://m.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫" class="languagechoosea">PHP 庫</a>
                            <a href="http://m.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
                            <a href="http://m.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a>
                            <a href="http://m.miracleart.cn/zh/toolset/extension-plug-ins" title="擴展插件" class="languagechoosea on">擴展插件</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="http://m.miracleart.cn/zh/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="休閑" class="head_nava head_nava-template1_3">休閑</a>
                    <div   class="377j5v51b"   id="dropdown-template1_3" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://m.miracleart.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a>
                            <a href="http://m.miracleart.cn/zh/mobile-game-tutorial/" title="游戲教程" class="languagechoosea">游戲教程</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
                    <div   id="377j5v51b"   class="head_search">
                <input id="key_words"  onkeydown="if (event.keyCode == 13) searchs('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
                <a href="javascript:;" title="搜索"  onclick="searchs('zh')"><img src="/static/imghw/find.png" alt="搜索"></a>
            </div>
                <div   id="377j5v51b"   class="head_right">
            <div   id="377j5v51b"   class="haed_language">
                <a href="javascript:;" class="layui-btn haed_language_btn">簡體中文<i class="layui-icon layui-icon-triangle-d"></i></a>
                <div   class="377j5v51b"   id="dropdown-template" style="display: none;">
                    <div   id="377j5v51b"   class="languagechoose">
                                                <a href="javascript:;" title="簡體中文" class="languagechoosea">簡體中文</a>
                                                <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
                                                <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
                                                <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
                                                <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
                                                <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
                                                <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
                                                <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
                                            </div>
                </div>
            </div>
            <span id="377j5v51b"    class="head_right_line"></span>
                            <div style="display: block;" id="login" class="haed_login ">
                    <a href="javascript:;"  title="Login" class="haed_logina ">Login</a>
                </div>
                <div style="display: block;" id="reg" class="head_signup login">
                    <a href="javascript:;"  title="singup" class="head_signupa">singup</a>
                </div>
            
        </div>
    </div>
</header>

	
	<main>
		<div   id="377j5v51b"   class="Article_Details_main">
			<div   id="377j5v51b"   class="Article_Details_main1">
							<div   id="377j5v51b"   class="Article_Details_main1M">
					<div   id="377j5v51b"   class="phpgenera_Details_mainL1">
						<a href="http://m.miracleart.cn/zh/" title="首頁"
							class="phpgenera_Details_mainL1a">首頁</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://m.miracleart.cn/zh/web-designer.html"
							class="phpgenera_Details_mainL1a">web前端</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://m.miracleart.cn/zh/div-tutorial.html"
							class="phpgenera_Details_mainL1a">html教程</a>
						<img src="/static/imghw/top_right.png" alt="" />
						<span>CSS布局之品字布局_html/css_WEB-ITnose</span>
					</div>
					
					<div   id="377j5v51b"   class="Articlelist_txts">
						<div   id="377j5v51b"   class="Articlelist_txts_info">
							<h1 class="Articlelist_txts_title">CSS布局之品字布局_html/css_WEB-ITnose</h1>
							<div   id="377j5v51b"   class="Articlelist_txts_info_head">
								<div   id="377j5v51b"   class="author_info">
									<a href="http://m.miracleart.cn/zh/member/887227.html"  class="author_avatar">
									<img class="lazy"  data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB">
									</a>
									<div   id="377j5v51b"   class="author_detail">
																			<a href="http://m.miracleart.cn/zh/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a>
                                										</div>
								</div>
                			</div>
							<span id="377j5v51b"    class="Articlelist_txts_time">Jun 24, 2016 am	 11:38 AM</span>
														
						</div>
					</div>
					<hr />
					<div   id="377j5v51b"   class="article_main php-article">
						<div   id="377j5v51b"   class="article-list-left detail-content-wrap content">
						<ins class="adsbygoogle"
							style="display:block; text-align:center;"
							data-ad-layout="in-article"
							data-ad-format="fluid"
							data-ad-client="ca-pub-5902227090019525"
							data-ad-slot="3461856641">
						</ins>
						

					<p class="sougouContent">  </p>
<p>最近有同學面試被問到關于品字布局的問題。雖然我覺得這種布局確實比較難看,應該也不會用到,但是既然有人問到,我還是自己嘗試寫了一下品字布局。其實很簡單。</p>  <p>先看效果:</p>  <p>第一種:</p>  <p></p>  <p>第二種:</p>  <p></p>  <p>第一種:</p>  <p>其實實現(xiàn)方法很簡單,基本思路:</p>  <p>(1)三塊高寬是確定的;</p>  <p>(2)上面那塊用margin: 0 auto;居中;</p>  <p>(3)下面兩塊用float或者inline-block不換行;</p>  <p>(4)用margin調整位置使他們居中。</p>  <p>inline方法代碼如下:</p>  <pre class='brush:php;toolbar:false;'><!DOCTYPE html><html>    <head lang="en">        <meta charset="UTF-8">        <title></title>    </head>    <style> *{            margin: 0;             border: 0; }        .d1, .d2, .d3{            height: 100px;             width: 100px;             background-color: #FF0000;             border: solid 1px #000000; }        .d1{            margin: 0 auto; }        .d3{            display: inline-block;             margin-left: -200px; }        .d2{            display: inline-block;             margin-left: 50%; }    </style>    <body>        <div class="d1">上</div><!--        --><div class="d2">右</div><!--        --><div class="d3">左</div>    </body></html></pre>  <p>這里首先用margin-left: 50%,讓下面兩塊的左側到中間位置。然后再對右下角那塊用margin-left,值是負的兩倍寬度。就可以把它移動到左下角。因此第二個div是右下的,第三個是左下的,需要換一下。</p>  <p>還有一個小技巧,使用inline-block會有小的間隙,可以使用去除inline-block元素間間距的N種方法來解決。</p>  <p>float方式:</p>  <pre class='brush:php;toolbar:false;'><!DOCTYPE html><html>    <head lang="en">        <meta charset="UTF-8">        <title></title>    </head>    <style> *{            margin: 0; border: 0; }        .d1, .d2, .d3{            height: 100px;             width: 100px;             background-color: #FF0000;             border: solid 1px #000000; }        .d1{            margin: 0 auto; }        .d3{            float: left;             margin-left: -200px; }        .d2{            float: left;             margin-left: 50%; }    </style>    <body>        <div class="d1">上</div>        <div class="d2">右</div>        <div class="d3">左</div>    </body></html></pre>  <p>和inline-block方式大同小異,就不再贅述。</p>  <p>還有全屏的品字布局,就更加簡單,基本思路是上面的div寬100%,下面的兩個div分別寬50%,然后用float或者inline使其不換行即可。</p>  <p>這里貼出一種方法:<br /></p>  <pre class='brush:php;toolbar:false;'><!DOCTYPE html><html>    <head lang="en">        <meta charset="UTF-8">        <title></title>    </head>    <style> *{            margin: 0;             border: 0; }        .d1, .d2, .d3{            height: 300px; }        .d1{            width: 100%;             height: 300px;             background-color: #FF0000; }        .d3{            float: left;             width: 50%;             background-color: #0099FF; }        .d2{            float: left;             width: 50%;             background-color: #4eff00; }    </style>    <body>        <div class="d1">上</div>        <div class="d2">右</div>        <div class="d3">左</div>    </body></html></pre>  <p><br></p> 


						</div>
					</div>
					<div   id="377j5v51b"   class="wzconShengming_sp">
						<div   id="377j5v51b"   class="bzsmdiv_sp">本站聲明</div>
						<div>本文內容由網(wǎng)友自發(fā)貢獻,版權歸原作者所有,本站不承擔相應法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權的內容,請聯(lián)系admin@php.cn</div>
					</div>
				</div>

				<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>



				<div   id="377j5v51b"   class="AI_ToolDetails_main4sR">


				<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    


					<!-- <div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門文章</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796821119.html" title="指南:恒星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南:恒星刀片保存文件位置/保存文件丟失/不保存</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796821436.html" title="沙丘:覺醒 - 高級行星學家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘:覺醒 - 高級行星學家Quest演練</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796821278.html" title="約會一切:德克和哈珀關系指南" class="phpgenera_Details_mainR4_bottom_title">約會一切:德克和哈珀關系指南</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://m.miracleart.cn/zh/article.html">顯示更多</a>
							</div>
						</div>
					</div> -->


											<div   id="377j5v51b"   class="phpgenera_Details_mainR3">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank">
								<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>熱AI工具</h2>
								</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>免費脫衣服圖片</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>人工智能驅動的應用程序,用于創(chuàng)建逼真的裸體照片</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>用于從照片中去除衣服的在線人工智能工具。</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>AI脫衣機</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!</p>
											</div>
										</div>
																</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
									<a href="http://m.miracleart.cn/zh/ai">顯示更多</a>
								</div>
							</div>
						</div>
					


					<div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門文章</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796821119.html" title="指南:恒星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南:恒星刀片保存文件位置/保存文件丟失/不保存</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796821436.html" title="沙丘:覺醒 - 高級行星學家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘:覺醒 - 高級行星學家Quest演練</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/1796821278.html" title="約會一切:德克和哈珀關系指南" class="phpgenera_Details_mainR4_bottom_title">約會一切:德克和哈珀關系指南</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://m.miracleart.cn/zh/article.html">顯示更多</a>
							</div>
						</div>
					</div>


											<div   id="377j5v51b"   class="phpgenera_Details_mainR3">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank">
								<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>熱工具</h2>
								</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="記事本++7.3.1" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title">
													<h3>記事本++7.3.1</h3>
												</a>
												<p>好用且免費的代碼編輯器</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3漢化版" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3漢化版</h3>
												</a>
												<p>中文版,非常好用</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禪工作室 13.0.1" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title">
													<h3>禪工作室 13.0.1</h3>
												</a>
												<p>功能強大的PHP集成開發(fā)環(huán)境</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>視覺化網(wǎng)頁開發(fā)工具</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://m.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://m.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac版</h3>
												</a>
												<p>神級代碼編輯軟件(SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
									<a href="http://m.miracleart.cn/zh/ai">顯示更多</a>
								</div>
							</div>
						</div>
										

					
					<div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門話題</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/gmailyxdlrkzn" title="gmail郵箱登陸入口在哪里" class="phpgenera_Details_mainR4_bottom_title">gmail郵箱登陸入口在哪里</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>8637</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>17</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1783</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>16</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1728</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>56</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1577</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>28</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://m.miracleart.cn/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1442</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>31</span>
										</div>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://m.miracleart.cn/zh/faq/zt">顯示更多</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div   id="377j5v51b"   class="Article_Details_main2">
					<div   id="377j5v51b"   class="phpgenera_Details_mainL4">
						<div   id="377j5v51b"   class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div   id="377j5v51b"   class="phpgenera_Details_mainL4_info">

													<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://m.miracleart.cn/zh/faq/1796822239.html" title="我如何了解最新的HTML標準和最佳實踐?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175037959235285.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="我如何了解最新的HTML標準和最佳實踐?" />
								</a>
								<a href="http://m.miracleart.cn/zh/faq/1796822239.html" title="我如何了解最新的HTML標準和最佳實踐?" class="phphistorical_Version2_mids_title">我如何了解最新的HTML標準和最佳實踐?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 20, 2025 am	 08:33 AM</span>
								<p class="Articlelist_txts_p">要跟上HTML標準和最佳實踐,關鍵在于有意為之而非盲目追隨。首先,關注官方來源如WHATWG和W3C的摘要或更新日志,了解新標簽(如)和屬性,將其作為參考解決疑難問題;其次,訂閱可信的網(wǎng)頁開發(fā)新聞通訊和博客,每周花10-15分鐘瀏覽更新,關注實際用例而非僅收藏文章;再次,使用開發(fā)者工具和linters如HTMLHint,通過即時反饋優(yōu)化代碼結構;最后,與開發(fā)者社區(qū)互動,分享經(jīng)驗并學習他人實戰(zhàn)技巧,從而持續(xù)提升HTML技能。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://m.miracleart.cn/zh/faq/1796821966.html" title="如何使用元素來表示文檔的主要內容?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175034575284018.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何使用元素來表示文檔的主要內容?" />
								</a>
								<a href="http://m.miracleart.cn/zh/faq/1796821966.html" title="如何使用元素來表示文檔的主要內容?" class="phphistorical_Version2_mids_title">如何使用元素來表示文檔的主要內容?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 19, 2025 pm	 11:09 PM</span>
								<p class="Articlelist_txts_p">使用標簽的原因是提升網(wǎng)頁的語義化結構和可訪問性,使屏幕閱讀器和搜索引擎更易理解頁面內容,并允許用戶快速跳轉至核心內容。以下是關鍵要點:1.每個頁面應僅包含一個元素;2.不應包括跨頁面重復的內容(如側邊欄或頁腳);3.可與ARIA屬性結合使用以增強無障礙體驗。通常位于和之后、之前,用于包裹唯一的頁面內容,例如文章、表單或產(chǎn)品詳情,并應避免嵌套在、或中;為提高輔助功能,可使用aria-labelledby或aria-label明確標識部分。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://m.miracleart.cn/zh/faq/1796821965.html" title="如何創(chuàng)建基本的HTML文檔?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175034527243743.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何創(chuàng)建基本的HTML文檔?" />
								</a>
								<a href="http://m.miracleart.cn/zh/faq/1796821965.html" title="如何創(chuàng)建基本的HTML文檔?" class="phphistorical_Version2_mids_title">如何創(chuàng)建基本的HTML文檔?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 19, 2025 pm	 11:01 PM</span>
								<p class="Articlelist_txts_p">要創(chuàng)建一個基本的HTML文檔,首先需要了解其基本結構并按照標準格式編寫代碼。1.開始時使用聲明文檔類型;2.使用標簽包裹整個內容;3.在其中包含和兩個主要部分,用于存放元數(shù)據(jù)如標題、樣式表鏈接等,而則包含用戶可見的內容如標題、段落、圖片和鏈接;4.保存文件為.html格式并在瀏覽器中打開查看效果;5.隨后可逐步添加更多元素以豐富頁面內容。遵循這些步驟即可快速構建一個基礎網(wǎng)頁。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://m.miracleart.cn/zh/faq/1796821968.html" title="如何使用" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175034767289886.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何使用" />
								</a>
								<a href="http://m.miracleart.cn/zh/faq/1796821968.html" title="如何使用" class="phphistorical_Version2_mids_title">如何使用</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 19, 2025 pm	 11:41 PM</span>
								<p class="Articlelist_txts_p">要創(chuàng)建HTML復選框,需使用type屬性設為checkbox的元素。1.基本結構包含id、name和label標簽,確保點擊文字可切換選項;2.多個相關復選框應使用相同name但不同value,并用fieldset包裹提升可訪問性;3.自定義樣式時隱藏原生控件并用CSS設計替代元素,同時保持功能完整;4.確??捎眯裕鋵abel、支持鍵盤導航且避免僅依賴視覺提示。以上步驟能幫助開發(fā)者正確實現(xiàn)兼具功能與美觀的復選框組件。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://m.miracleart.cn/zh/faq/1796823670.html" title="如何最小化HTML文件的大小?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175069761263762.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何最小化HTML文件的大???" />
								</a>
								<a href="http://m.miracleart.cn/zh/faq/1796823670.html" title="如何最小化HTML文件的大?。? class="phphistorical_Version2_mids_title">如何最小化HTML文件的大?。?/a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 24, 2025 am	 12:53 AM</span>
								<p class="Articlelist_txts_p">要減小HTML文件大小需清理冗余代碼、壓縮內容并優(yōu)化結構。 1.刪??除未使用的標簽、注釋和多余空白以減少體積;2.將內聯(lián)CSS和JavaScript移至外部文件并合并多個腳本或樣式塊;3.在不影響解析的前提下簡化標簽語法,如省略可選閉合標簽或使用簡短屬性;4.清理后啟用Gzip或Brotli等服務器端壓縮技術進一步縮減傳輸體積。這些步驟可在不犧牲功能的前提下顯著提升頁面加載性能。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://m.miracleart.cn/zh/faq/1796824133.html" title="如何使用元素代表文檔或部分的頁腳?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175078424215034.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何使用元素代表文檔或部分的頁腳?" />
								</a>
								<a href="http://m.miracleart.cn/zh/faq/1796824133.html" title="如何使用元素代表文檔或部分的頁腳?" class="phphistorical_Version2_mids_title">如何使用元素代表文檔或部分的頁腳?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 25, 2025 am	 12:57 AM</span>
								<p class="Articlelist_txts_p">是HTML5中用于定義頁面或內容區(qū)塊底部的語義化標簽,通常包含版權信息、聯(lián)系方式或導航鏈接等;它可置于頁面底部或嵌套在、等標簽內作為區(qū)塊尾部;使用時應注意避免重復濫用及放入無關內容。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://m.miracleart.cn/zh/faq/1796823674.html" title="隨著時間的流逝,HTML如何發(fā)展,其歷史上的關鍵里程碑是什么?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175069767173496.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="隨著時間的流逝,HTML如何發(fā)展,其歷史上的關鍵里程碑是什么?" />
								</a>
								<a href="http://m.miracleart.cn/zh/faq/1796823674.html" title="隨著時間的流逝,HTML如何發(fā)展,其歷史上的關鍵里程碑是什么?" class="phphistorical_Version2_mids_title">隨著時間的流逝,HTML如何發(fā)展,其歷史上的關鍵里程碑是什么?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 24, 2025 am	 12:54 AM</span>
								<p class="Articlelist_txts_p">htmlhasevolvedscreatscreationtomeetthegrowingdemandsofwebdevelopersandusers.inatelyallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,包括html.2.0,包括wheintrodistusefforms;</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://m.miracleart.cn/zh/faq/1796823682.html" title="如何使用Tabindex屬性來控制元素的選項卡順序?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175069781150026.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何使用Tabindex屬性來控制元素的選項卡順序?" />
								</a>
								<a href="http://m.miracleart.cn/zh/faq/1796823682.html" title="如何使用Tabindex屬性來控制元素的選項卡順序?" class="phphistorical_Version2_mids_title">如何使用Tabindex屬性來控制元素的選項卡順序?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 24, 2025 am	 12:56 AM</span>
								<p class="Articlelist_txts_p">ThetabindexattributecontrolshowelementsreceivefocusviatheTabkey,withthreemainvalues:tabindex="0"addsanelementtothenaturaltaborder,tabindex="-1"allowsprogrammaticfocusonly,andtabindex="n"(positivenumber)setsacustomtabbing</p>
							</div>
													</div>

													<a href="http://m.miracleart.cn/zh/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div   id="377j5v51b"   class="footer">
        <div   id="377j5v51b"   class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>公益在線PHP培訓,幫助PHP學習者快速成長!</p>
        </div>
        <div   id="377j5v51b"   class="footermid">
            <a href="http://m.miracleart.cn/zh/about/us.html">關于我們</a>
            <a href="http://m.miracleart.cn/zh/about/disclaimer.html">免責聲明</a>
            <a href="http://m.miracleart.cn/zh/update/article_0_1.html">Sitemap</a>
        </div>
        <div   id="377j5v51b"   class="footerbottom">
            <p>
                ? php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">




		<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
	
	
	
	
	

	
	






<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站,您可能还对以下资源感兴趣:</p>
<a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</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="2qsmg" class="pl_css_ganrao" style="display: none;"><menu id="2qsmg"></menu><th id="2qsmg"></th><input id="2qsmg"><pre id="2qsmg"><option id="2qsmg"></option></pre></input><kbd id="2qsmg"><optgroup id="2qsmg"><strike id="2qsmg"></strike></optgroup></kbd><tr id="2qsmg"><object id="2qsmg"><samp id="2qsmg"></samp></object></tr><strong id="2qsmg"></strong><pre id="2qsmg"></pre><source id="2qsmg"><xmp id="2qsmg"><small id="2qsmg"></small></xmp></source><tbody id="2qsmg"></tbody><small id="2qsmg"><cite id="2qsmg"><center id="2qsmg"></center></cite></small><strong id="2qsmg"></strong><small id="2qsmg"></small><del id="2qsmg"></del><pre id="2qsmg"></pre><th id="2qsmg"><samp id="2qsmg"><code id="2qsmg"></code></samp></th><ul id="2qsmg"></ul><code id="2qsmg"></code><tr id="2qsmg"></tr><rt id="2qsmg"></rt><abbr id="2qsmg"></abbr><button id="2qsmg"></button><small id="2qsmg"></small><delect id="2qsmg"></delect><samp id="2qsmg"><code id="2qsmg"><wbr id="2qsmg"></wbr></code></samp><center id="2qsmg"></center><dl id="2qsmg"><strike id="2qsmg"><option id="2qsmg"></option></strike></dl><fieldset id="2qsmg"></fieldset><optgroup id="2qsmg"></optgroup><dl id="2qsmg"></dl><strong id="2qsmg"></strong><xmp id="2qsmg"></xmp><dd id="2qsmg"><nav id="2qsmg"><strike id="2qsmg"></strike></nav></dd><dfn id="2qsmg"><center id="2qsmg"><nav id="2qsmg"></nav></center></dfn><strike id="2qsmg"><ul id="2qsmg"><strong id="2qsmg"></strong></ul></strike><tfoot id="2qsmg"></tfoot><button id="2qsmg"><code id="2qsmg"><tr id="2qsmg"></tr></code></button><optgroup id="2qsmg"></optgroup><pre id="2qsmg"><noframes id="2qsmg"><tbody id="2qsmg"></tbody></noframes></pre><abbr id="2qsmg"><menu id="2qsmg"><acronym id="2qsmg"></acronym></menu></abbr><ul id="2qsmg"><fieldset id="2qsmg"><xmp id="2qsmg"></xmp></fieldset></ul><dd id="2qsmg"></dd><dl id="2qsmg"></dl><del id="2qsmg"><abbr id="2qsmg"><pre id="2qsmg"></pre></abbr></del><del id="2qsmg"></del><dfn id="2qsmg"><tr id="2qsmg"><th id="2qsmg"></th></tr></dfn><cite id="2qsmg"><kbd id="2qsmg"><input id="2qsmg"></input></kbd></cite><kbd id="2qsmg"></kbd><td id="2qsmg"><button id="2qsmg"><tbody id="2qsmg"></tbody></button></td><li id="2qsmg"><rt id="2qsmg"><pre id="2qsmg"></pre></rt></li><th id="2qsmg"><samp id="2qsmg"><tbody id="2qsmg"></tbody></samp></th><menu id="2qsmg"></menu><dd id="2qsmg"><nav id="2qsmg"><blockquote id="2qsmg"></blockquote></nav></dd><acronym id="2qsmg"><button id="2qsmg"><rt id="2qsmg"></rt></button></acronym><small id="2qsmg"></small><tbody id="2qsmg"><td id="2qsmg"><table id="2qsmg"></table></td></tbody><source id="2qsmg"><td id="2qsmg"><li id="2qsmg"></li></td></source><samp id="2qsmg"><em id="2qsmg"><tr id="2qsmg"></tr></em></samp><acronym id="2qsmg"><noframes id="2qsmg"><code id="2qsmg"></code></noframes></acronym><dfn id="2qsmg"><center id="2qsmg"><input id="2qsmg"></input></center></dfn><small id="2qsmg"></small><dfn id="2qsmg"></dfn><dd id="2qsmg"></dd><li id="2qsmg"></li><pre id="2qsmg"><abbr id="2qsmg"><strike id="2qsmg"></strike></abbr></pre><nav id="2qsmg"></nav><bdo id="2qsmg"></bdo><rt id="2qsmg"><kbd id="2qsmg"><cite id="2qsmg"></cite></kbd></rt><dl id="2qsmg"></dl><pre id="2qsmg"><xmp id="2qsmg"><menu id="2qsmg"></menu></xmp></pre><object id="2qsmg"><dfn id="2qsmg"><table id="2qsmg"></table></dfn></object><tbody id="2qsmg"><noframes id="2qsmg"><table id="2qsmg"></table></noframes></tbody><wbr id="2qsmg"></wbr><sup id="2qsmg"></sup><abbr id="2qsmg"></abbr><pre id="2qsmg"></pre><cite id="2qsmg"></cite><button id="2qsmg"><abbr id="2qsmg"><wbr id="2qsmg"></wbr></abbr></button><td id="2qsmg"><li id="2qsmg"><object id="2qsmg"></object></li></td><xmp id="2qsmg"></xmp><pre id="2qsmg"><s id="2qsmg"><pre id="2qsmg"></pre></s></pre><optgroup id="2qsmg"></optgroup><tbody id="2qsmg"></tbody><noframes id="2qsmg"><fieldset id="2qsmg"><tfoot id="2qsmg"></tfoot></fieldset></noframes><tbody id="2qsmg"></tbody><rt id="2qsmg"><kbd id="2qsmg"><nav id="2qsmg"></nav></kbd></rt><rt id="2qsmg"><dl id="2qsmg"><pre id="2qsmg"></pre></dl></rt><nav id="2qsmg"></nav><acronym id="2qsmg"><fieldset id="2qsmg"><tfoot id="2qsmg"></tfoot></fieldset></acronym><pre id="2qsmg"></pre><nav id="2qsmg"></nav><li id="2qsmg"></li><bdo id="2qsmg"></bdo><table id="2qsmg"></table><strike id="2qsmg"></strike><s id="2qsmg"></s></div>

</html>