• <noframes id="oyue6"><code id="oyue6"></code></noframes>
  •              XX典藏官網(wǎng)-第四套人民幣收藏網(wǎng),第三套人民幣收藏,第五套人民幣,連體鈔,紀念鈔,人民幣最新價格行情表及圖片<\/title>        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=7\" \/>         <meta name=\"baidu-site-verification\" content=\"f8zIsHw8jjfPFf3L\" \/>\t    <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>        <meta name=\"keywords\" content=\"  人民幣收藏,第四套人民幣,第五套人民幣,人民幣價格,人民幣收藏網(wǎng),人民幣收藏價格表,人民幣收藏行情,第二套人民幣,第四套人民幣價格及圖片,第三套人民幣,第三套人民幣價格及圖片,第四套人民幣大全套,第五套人民幣價格表,紀念鈔,奧運紀念鈔最新價格,金銀幣價格,連體鈔價格及圖片\">        <link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style_main.css\" \/>\t<\/head>   <body> <h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>          <div id=\"table_body\">        <!--頁眉-->            <div id=\"row_shuimo\">                <div id=\"header_shuimo\"><img  src=\".\/images\/header_shuimo.png\"  style=\"max-width:90%\"\/ alt=\"關(guān)于table-row table-cell_html\/css_WEB-ITnose\" ><\/div>            <\/div>            <div id=\"row_nav\">                <div id=\"header_logo\">                    <a href=\"http:\/\/www.baidu.com\/\" alt=\"XX文化藝術(shù)公司\"><img src=\".\/images\/src_logo.jpg\" alt=\"XX典藏歡迎您\"\/><\/a>                <\/div>\t                <div id=\"header_reg_login\">                    <a href=\"http:\/\/www.baidu.com\/\" title=\"點擊登錄\">登錄   <\/a>                         <a href=\"http:\/\/www.baidu.com\/\" title=\"點擊注冊\">新用戶?注冊<\/a>                <\/div>            <\/div>        <!--導(dǎo)航條和商品展示區(qū)-->            <!--行-->            <div id=\"row_show\">                <div id=\"cell_list\">                    <ul>                        <li id=\"li_nav_all\"><strong>全部藏品分類<\/strong><\/li>                        <li id=\"li_nav_rmb\">人民幣收藏<\/li>                        <li id=\"li_nav_stamp\">郵票收藏<\/li>                        <li id=\"li_nav_jinianbi\">紀念幣收藏<\/li>                        <li id=\"li_nav_lianti\">連體收藏類<\/li>                        <li id=\"li_nav_jinyinbi\">金銀幣類<\/li>                        <li id=\"li_nav_antique\">古玩字畫<\/li>                   <\/ul>                <\/div>                <!-- 行 -->                <div id=\"cell_goods\">                    <div id=\"goods_table\">                        <div id=\"goods_row1\">                            <div id=\"cell_row1\">                                <ul>                                    <li>                                        您的當(dāng)前位置:首頁                                      <\/li>                                    <li>                                        藏品展示區(qū)                                    <\/li>                                <\/ul>                            <\/div>                        <\/div>                           <div id=\"goods_row2\">                            <p>goods <\/p>                        <\/div>                    <\/div>                <\/div>        <\/div>                <!--頁腳-->        <div id=\"row_footer\">            <div class=\"footer_div\" id=\"footer_400\">                <h3>咨詢熱線<\/h3>                <p>400-000-0000<\/p>            <\/div>            <div class=\"footer_div\">                <ul class=\"footer_ul\">                    <li>關(guān)于我們<\/li>                    <li><a href=\"footer\/1.html\">XX典藏簡介<\/a><\/li>                    <li><a href=\"footer\/1.html\">企業(yè)文化<\/a><\/li>                    <li><a href=\"footer\/1.html\">招商與合作<\/a><\/li>                <\/ul>            <\/div>                            <div class=\"footer_div\">                <ul class=\"footer_ul\">                    <li>交易指南<\/li>                    <li><a href=\"footer\/1.html\">購物流程<\/a><\/li>                         <li><a href=\"footer\/1.html\">免責(zé)聲明<\/a><\/li>                <\/ul>            <\/div>            <div class=\"footer_div\">                    <ul class=\"footer_ul\">                        <li>支付配送<\/li>                        <li><a href=\"footer\/1.html\">支付方式<\/a><\/li>                        <li><a href=\"footer\/1.html\">商品配送<\/a><\/li>                        <li><a href=\"footer\/1.html\">注意事項<\/a><\/li>                    <\/ul>            <\/div>        <\/div>    <\/div>  <\/body>  <\/html><\/pre> <br \/> <br \/> 下面是style_main.css: <br \/> <pre class='brush:php;toolbar:false;'>*{margin:0; padding:0;}\/*頁眉*\/#header #header_nav ul li{\tlist-style-type:none;\tfloat:right;\t}#table_body{\tdisplay:table;\tmargin-left:auto;\tmargin-right:auto;}#table_body #row_shuimo{\tdisplay:table-row;\theight:100px;\ttext-align:center;}#table_body #row_shuimo #header_shuimo{\tdisplay:table-cell;\t}#table_body #row_nav{\tdisplay:table-row;\t\tvertical-align:top;}#table_body #row_nav #header_logo{\tdisplay:table-cell;\twidth:300px;}#table_body #row_nav #header_reg_login{\tdisplay:table-cell;}\/*展示部分*\/#table_body #row_show{\tdisplay:table-row;\theight:700px;}#table_body #row_show #cell_list{\tdisplay:table-cell;\tborder:solid,20px,#cc0;\tborder-radius:15px;\tborder-color:green;}#table_body #row_show #cell_goods{\tdisplay:table-cell;}#cell_list ul{\tlist-style-type:none;\twidth:130px;\t\/*color:purple;\t*\/\tbackground-color:white;\tborder-style:solid;\tborder-top-left-radius:10px;\t\/*border-color:Red;*\/\tborder-width:2px;\tpadding:0px;\t\/*float:left;*\/}#table_body #row_show #cell_list ul li{\theight:30px;\tfont-size:15px;\tcolor:orange;\ttext-align:center;\tborder-style:solid;}#table_body #row_show #cell_list ul #li_nav_all{\tcolor:Orange;\tbackground-color:Green;\tborder-top-left-radius:8px;\tborder-top-right-radius:8px;}\/*cell_goods*\/#goods_table{\tdisplay:table;\theight:inherit;}#goods_row1{\tdisplay:table-row;}#goods_row2{\tdisplay:table-row;}#cell_row1{\tdisplay:table-cell;\tmargin-left:0;}\/*頁腳部分*\/ #row_footer{\tdisplay:table-row;} .footer_div{\tdisplay:table-cell;\twidth:20%;\theight:100px;\tfloat:left;} #row_footer #footer_400{\tmargin-left:150px;} .footer_ul{\tlist-style-type:none;\tmargin-left:10px;}<\/pre> <p> <\/p> <\/p> <br \/> <h2>回復(fù)討論(解決方案)<\/h2> <p class=\"sougouAnswer\"> 只是調(diào)整寬度的話簡單, <pre class='brush:php;toolbar:false;'>#cell_list ul{\twidth: 500px;}<\/pre> <br \/> 至于border,我用的chrom瀏覽器,有顯示。 <br \/> 幾個建議:1、div不要放到span標簽中,<span> 標簽被用來組合文檔中的行內(nèi)元素,一般都是文字; <br \/> 2、頁面中不要頻繁使用id屬性,一方面不利于代碼重用,另一方面容易命名沖突,腳本出錯。 <\/p> <p class=\"sougouAnswer\"> <p class=\"yy\"> 只是調(diào)整寬度的話簡單, <pre class='brush:php;toolbar:false;'>#cell_list ul{\twidth: 500px;}<\/pre> <br \/> 至于border,我用的chrom瀏覽器,有顯示。 <br \/> 幾個建議:1、div不要放到span標簽中,<span> 標簽被用來組合文檔中的行內(nèi)元素,一般都是文字; <br \/> 2、頁面中不要頻繁使用id屬性,一方面不利于代碼重用,另一方面容易命名沖突,腳本出錯。 <\/p> <br \/> <br \/> 謝謝你花時間耐心看完我的代碼。 <br \/> 邊框的問題解決了,是自己CSS語法錯誤導(dǎo)致無法顯示出來。唉!但是寬度問題依舊沒有解決。 <br \/> 麻煩你先看下面這張圖。1和2是一行,3和4 是一行,5和6又是一行。HTML代碼沒有改變,但是我在CSS里面無論設(shè)置table、row和cell的width屬性,都沒有任何作用。不知道為什么。下面貼上圖片和CSS代碼: <br \/> <br \/> <pre class='brush:php;toolbar:false;'>*{margin:0; padding:0;}\/*頁眉*\/#table_body{\tdisplay:table;\tmargin-left:auto;\tmargin-right:auto;}#row_shuimo{\tdisplay:table-row;\theight:100px;}#header_shuimo{\tdisplay:table-cell;\t\tborder:solid;\twidth:200px;}#header_test{display:table-cell;border:solid;}#table_body #row_nav{\tdisplay:table-row;\t\twidth:300px;}#table_body #row_nav #header_logo{\tdisplay:table-cell;\tborder:solid 5px red;\tmargin-right:300px;\t}#table_body #row_nav #header_reg_login{\tdisplay:table-cell;}\/*展示部分*\/#table_body #row_show{\tdisplay:table-row;\theight:700px;}#table_body #row_show #cell_list{\tdisplay:table-cell;\tborder-radius:15px;\tborder-color:green;\tborder:solid;}#table_body #row_show #cell_goods{\tdisplay:table-cell;\tborder:solid;}#cell_list ul{\tlist-style-type:none;\twidth:130px;\t\/*color:purple;\t*\/\tbackground-color:white;\tborder-style:solid;\tborder-top-left-radius:10px;\t\/*border-color:Red;*\/\tborder-width:2px;\tpadding:0px;\t\/*float:left;*\/}#table_body #row_show #cell_list ul li{\theight:30px;\tfont-size:15px;\tcolor:orange;\ttext-align:center;\tborder-style:solid;}#table_body #row_show #cell_list ul #li_nav_all{\tcolor:Orange;\tbackground-color:Green;\tborder-top-left-radius:8px;\tborder-top-right-radius:8px;}\/*cell_goods*\/#goods_table{\tdisplay:table;\theight:inherit;\tborder:solid;}#goods_row1{\tdisplay:table-row;}#goods_row2{\tdisplay:table-row;}#cell_row1{\tdisplay:table-cell;\tmargin-left:0;}\/*頁腳部分*\/ #row_footer{\tdisplay:table-row;} .footer_div{\tdisplay:table-cell;\twidth:20%;\theight:100px;\tfloat:left;} #row_footer #footer_400{\tmargin-left:150px;} .footer_ul{\tlist-style-type:none;\tmargin-left:10px;}<\/pre> <br> <\/p> <p class=\"sougouAnswer\"> HTML里又加了一個table-cell,CSS中的id是header_test <\/p> <p class=\"sougouAnswer\"> 瀏覽器中按F12可以查看元素,查看下你要改的那個元素的id,然后改css就行了,至于width沒生效的問題,我想還是因為沒選對元素 <\/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://www.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://www.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://www.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://www.miracleart.cn/zh/wenda.html" title="問答" class="languagechoosea">問答</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://www.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://www.miracleart.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a> <a href="http://www.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://www.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫" class="languagechoosea">PHP 庫</a> <a href="http://www.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://www.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://www.miracleart.cn/zh/toolset/extension-plug-ins" title="擴展插件" class="languagechoosea on">擴展插件</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://www.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://www.miracleart.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a> <a href="http://www.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_main1L"> <div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain"> <div id="377j5v51b" class="Article_Details_main1L1">目錄</div> <div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2"> <!-- 左側(cè)懸浮,文章定位標題1 id="Article_Details_main1L2s_1"--> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#回復(fù)討論-解決方案" title="回復(fù)討論(解決方案)" >回復(fù)討論(解決方案)</a> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://www.miracleart.cn/zh/" title="首頁" class="phpgenera_Details_mainL1a">首頁</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/zh/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/zh/div-tutorial.html" class="phpgenera_Details_mainL1a">html教程</a> <img src="/static/imghw/top_right.png" alt="" /> <span>關(guān)于table-row table-cell_html/css_WEB-ITnose</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">關(guān)于table-row table-cell_html/css_WEB-ITnose</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://www.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://www.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:39 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"> 最近幫朋友做一個網(wǎng)站,由于沒有實際經(jīng)驗,只能是一邊做一邊學(xué)。頁面很簡單,HTML+CSS,最后采用的是在body中用CSS?table布局。代碼請看下面。 <br> 圖中紅色的部分是兩個table-cell,放在一個table-row里面。我困惑的是不能調(diào)整單元格的寬度,用border屬性根本就沒有效果,不知道為什么。請教各位幫我看一下這個問題到底出在哪里。 <br> <br> 之前沒做過網(wǎng)站,又比較著急,所以代碼寫的有點亂。各位前輩辛苦一下,幫我看看到底怎么做才能控制列的寬度。先謝謝了! <br> <br> <pre class='brush:php;toolbar:false;'><!doctype html><html><body> <head> <title> XX典藏官網(wǎng)-第四套人民幣收藏網(wǎng),第三套人民幣收藏,第五套人民幣,連體鈔,紀念鈔,人民幣最新價格行情表及圖片</title> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta name="baidu-site-verification" content="f8zIsHw8jjfPFf3L" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content=" 人民幣收藏,第四套人民幣,第五套人民幣,人民幣價格,人民幣收藏網(wǎng),人民幣收藏價格表,人民幣收藏行情,第二套人民幣,第四套人民幣價格及圖片,第三套人民幣,第三套人民幣價格及圖片,第四套人民幣大全套,第五套人民幣價格表,紀念鈔,奧運紀念鈔最新價格,金銀幣價格,連體鈔價格及圖片"> <link rel="stylesheet" type="text/css" href="css/style_main.css" /> </head> <body> <div id="table_body"> <!--頁眉--> <div id="row_shuimo"> <div id="header_shuimo"><img src="/static/imghw/default1.png" data-src="./images/header_shuimo.png" class="lazy" style="max-width:90%"/ alt="關(guān)于table-row table-cell_html/css_WEB-ITnose" ></div> </div> <div id="row_nav"> <div id="header_logo"> <a href="http://www.baidu.com/" alt="XX文化藝術(shù)公司"><img src="/static/imghw/default1.png" data-src="./images/src_logo.jpg" class="lazy" alt="XX典藏歡迎您"/></a> </div> <div id="header_reg_login"> <a href="http://www.baidu.com/" title="點擊登錄">登錄 </a> <a href="http://www.baidu.com/" title="點擊注冊">新用戶?注冊</a> </div> </div> <!--導(dǎo)航條和商品展示區(qū)--> <!--行--> <div id="row_show"> <div id="cell_list"> <ul> <li id="li_nav_all"><strong>全部藏品分類</strong></li> <li id="li_nav_rmb">人民幣收藏</li> <li id="li_nav_stamp">郵票收藏</li> <li id="li_nav_jinianbi">紀念幣收藏</li> <li id="li_nav_lianti">連體收藏類</li> <li id="li_nav_jinyinbi">金銀幣類</li> <li id="li_nav_antique">古玩字畫</li> </ul> </div> <!-- 行 --> <div id="cell_goods"> <div id="goods_table"> <div id="goods_row1"> <div id="cell_row1"> <ul> <li> 您的當(dāng)前位置:首頁 </li> <li> 藏品展示區(qū) </li> </ul> </div> </div> <div id="goods_row2"> <p>goods </p> </div> </div> </div> </div> <!--頁腳--> <div id="row_footer"> <div class="footer_div" id="footer_400"> <h3>咨詢熱線</h3> <p>400-000-0000</p> </div> <div class="footer_div"> <ul class="footer_ul"> <li>關(guān)于我們</li> <li><a href="footer/1.html">XX典藏簡介</a></li> <li><a href="footer/1.html">企業(yè)文化</a></li> <li><a href="footer/1.html">招商與合作</a></li> </ul> </div> <div class="footer_div"> <ul class="footer_ul"> <li>交易指南</li> <li><a href="footer/1.html">購物流程</a></li> <li><a href="footer/1.html">免責(zé)聲明</a></li> </ul> </div> <div class="footer_div"> <ul class="footer_ul"> <li>支付配送</li> <li><a href="footer/1.html">支付方式</a></li> <li><a href="footer/1.html">商品配送</a></li> <li><a href="footer/1.html">注意事項</a></li> </ul> </div> </div> </div> </body> </html></pre> <br /> <br /> 下面是style_main.css: <br /> <pre class='brush:php;toolbar:false;'>*{margin:0; padding:0;}/*頁眉*/#header #header_nav ul li{ list-style-type:none; float:right; }#table_body{ display:table; margin-left:auto; margin-right:auto;}#table_body #row_shuimo{ display:table-row; height:100px; text-align:center;}#table_body #row_shuimo #header_shuimo{ display:table-cell; }#table_body #row_nav{ display:table-row; vertical-align:top;}#table_body #row_nav #header_logo{ display:table-cell; width:300px;}#table_body #row_nav #header_reg_login{ display:table-cell;}/*展示部分*/#table_body #row_show{ display:table-row; height:700px;}#table_body #row_show #cell_list{ display:table-cell; border:solid,20px,#cc0; border-radius:15px; border-color:green;}#table_body #row_show #cell_goods{ display:table-cell;}#cell_list ul{ list-style-type:none; width:130px; /*color:purple; */ background-color:white; border-style:solid; border-top-left-radius:10px; /*border-color:Red;*/ border-width:2px; padding:0px; /*float:left;*/}#table_body #row_show #cell_list ul li{ height:30px; font-size:15px; color:orange; text-align:center; border-style:solid;}#table_body #row_show #cell_list ul #li_nav_all{ color:Orange; background-color:Green; border-top-left-radius:8px; border-top-right-radius:8px;}/*cell_goods*/#goods_table{ display:table; height:inherit;}#goods_row1{ display:table-row;}#goods_row2{ display:table-row;}#cell_row1{ display:table-cell; margin-left:0;}/*頁腳部分*/ #row_footer{ display:table-row;} .footer_div{ display:table-cell; width:20%; height:100px; float:left;} #row_footer #footer_400{ margin-left:150px;} .footer_ul{ list-style-type:none; margin-left:10px;}</pre> <p> </p> </p> <br /> <h2 id="回復(fù)討論-解決方案">回復(fù)討論(解決方案)</h2> <p class="sougouAnswer"> 只是調(diào)整寬度的話簡單, <pre class='brush:php;toolbar:false;'>#cell_list ul{ width: 500px;}</pre> <br /> 至于border,我用的chrom瀏覽器,有顯示。 <br /> 幾個建議:1、div不要放到span標簽中,<span> 標簽被用來組合文檔中的行內(nèi)元素,一般都是文字; <br /> 2、頁面中不要頻繁使用id屬性,一方面不利于代碼重用,另一方面容易命名沖突,腳本出錯。 </p> <p class="sougouAnswer"> <p class="yy"> 只是調(diào)整寬度的話簡單, <pre class='brush:php;toolbar:false;'>#cell_list ul{ width: 500px;}</pre> <br /> 至于border,我用的chrom瀏覽器,有顯示。 <br /> 幾個建議:1、div不要放到span標簽中,<span> 標簽被用來組合文檔中的行內(nèi)元素,一般都是文字; <br /> 2、頁面中不要頻繁使用id屬性,一方面不利于代碼重用,另一方面容易命名沖突,腳本出錯。 </p> <br /> <br /> 謝謝你花時間耐心看完我的代碼。 <br /> 邊框的問題解決了,是自己CSS語法錯誤導(dǎo)致無法顯示出來。唉!但是寬度問題依舊沒有解決。 <br /> 麻煩你先看下面這張圖。1和2是一行,3和4 是一行,5和6又是一行。HTML代碼沒有改變,但是我在CSS里面無論設(shè)置table、row和cell的width屬性,都沒有任何作用。不知道為什么。下面貼上圖片和CSS代碼: <br /> <br /> <pre class='brush:php;toolbar:false;'>*{margin:0; padding:0;}/*頁眉*/#table_body{ display:table; margin-left:auto; margin-right:auto;}#row_shuimo{ display:table-row; height:100px;}#header_shuimo{ display:table-cell; border:solid; width:200px;}#header_test{display:table-cell;border:solid;}#table_body #row_nav{ display:table-row; width:300px;}#table_body #row_nav #header_logo{ display:table-cell; border:solid 5px red; margin-right:300px; }#table_body #row_nav #header_reg_login{ display:table-cell;}/*展示部分*/#table_body #row_show{ display:table-row; height:700px;}#table_body #row_show #cell_list{ display:table-cell; border-radius:15px; border-color:green; border:solid;}#table_body #row_show #cell_goods{ display:table-cell; border:solid;}#cell_list ul{ list-style-type:none; width:130px; /*color:purple; */ background-color:white; border-style:solid; border-top-left-radius:10px; /*border-color:Red;*/ border-width:2px; padding:0px; /*float:left;*/}#table_body #row_show #cell_list ul li{ height:30px; font-size:15px; color:orange; text-align:center; border-style:solid;}#table_body #row_show #cell_list ul #li_nav_all{ color:Orange; background-color:Green; border-top-left-radius:8px; border-top-right-radius:8px;}/*cell_goods*/#goods_table{ display:table; height:inherit; border:solid;}#goods_row1{ display:table-row;}#goods_row2{ display:table-row;}#cell_row1{ display:table-cell; margin-left:0;}/*頁腳部分*/ #row_footer{ display:table-row;} .footer_div{ display:table-cell; width:20%; height:100px; float:left;} #row_footer #footer_400{ margin-left:150px;} .footer_ul{ list-style-type:none; margin-left:10px;}</pre> <br> </p> <p class="sougouAnswer"> HTML里又加了一個table-cell,CSS中的id是header_test </p> <p class="sougouAnswer"> 瀏覽器中按F12可以查看元素,查看下你要改的那個元素的id,然后改css就行了,至于width沒生效的問題,我想還是因為沒選對元素 </p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">本站聲明</div> <div>本文內(nèi)容由網(wǎng)友自發(fā)貢獻,版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(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://www.miracleart.cn/zh/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder 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://www.miracleart.cn/zh/faq/1796833110.html" title="<??>:在森林里99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>:在森林里99夜 - 所有徽章以及如何解鎖</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://www.miracleart.cn/zh/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程(2025年7月)" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程(2025年7月)</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://www.miracleart.cn/zh/faq/1796836699.html" title="Rimworld Odyssey溫度指南和Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey溫度指南和Gravtech</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 周前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh/faq/1796831905.html" title="Windows安全是空白或不顯示選項" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個月前</span> <span>By 下次還敢</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.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://www.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://www.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://www.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://www.miracleart.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智能驅(qū)動的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.miracleart.cn/zh/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder 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://www.miracleart.cn/zh/faq/1796833110.html" title="<??>:在森林里99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>:在森林里99夜 - 所有徽章以及如何解鎖</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://www.miracleart.cn/zh/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程(2025年7月)" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程(2025年7月)</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://www.miracleart.cn/zh/faq/1796836699.html" title="Rimworld Odyssey溫度指南和Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey溫度指南和Gravtech</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 周前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh/faq/1796831905.html" title="Windows安全是空白或不顯示選項" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個月前</span> <span>By 下次還敢</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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>1600</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.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>1502</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>276</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.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://www.miracleart.cn/zh/faq/1796831880.html" title="使用HTML按鈕元素實現(xiàn)可點擊按鈕" 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/175182671121571.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="使用HTML按鈕元素實現(xiàn)可點擊按鈕" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796831880.html" title="使用HTML按鈕元素實現(xiàn)可點擊按鈕" class="phphistorical_Version2_mids_title">使用HTML按鈕元素實現(xiàn)可點擊按鈕</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 02:31 AM</span> <p class="Articlelist_txts_p">要使用HTML的button元素實現(xiàn)可點擊按鈕,首先需掌握其基本用法與常見注意事項。1.使用標簽創(chuàng)建按鈕,并通過type屬性定義行為(如button、submit、reset),默認為submit;2.通過JavaScript添加交互功能,可內(nèi)聯(lián)寫法或通過ID綁定事件監(jiān)聽器以提升維護性;3.利用CSS自定義樣式,包括背景色、邊框、圓角及hover/active狀態(tài)效果,增強用戶體驗;4.注意常見問題:確保未啟用disabled屬性、正確綁定JS事件、避免布局遮擋,并借助開發(fā)者工具排查異常。掌握這</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796833320.html" title="在HTML頭部元素中配置文檔元數(shù)據(jù)" 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/175199941149498.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="在HTML頭部元素中配置文檔元數(shù)據(jù)" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796833320.html" title="在HTML頭部元素中配置文檔元數(shù)據(jù)" class="phphistorical_Version2_mids_title">在HTML頭部元素中配置文檔元數(shù)據(jù)</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 09, 2025 am 02:30 AM</span> <p class="Articlelist_txts_p">HTMLhead中的元數(shù)據(jù)對SEO、社交分享和瀏覽器行為至關(guān)重要。1.設(shè)置頁面標題與描述,使用和并保持簡潔唯一;2.添加OpenGraph與Twitter卡片信息以優(yōu)化社交分享效果,注意圖片尺寸并使用調(diào)試工具測試;3.定義字符集與視口設(shè)置確保多語言支持與移動端適配;4.可選標簽如作者版權(quán)、robots控制及canonical防止重復(fù)內(nèi)容也應(yīng)合理配置。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796832176.html" title="2025年初學(xué)者的最佳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/431/639/175190551111932.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="2025年初學(xué)者的最佳HTML教程" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796832176.html" title="2025年初學(xué)者的最佳HTML教程" class="phphistorical_Version2_mids_title">2025年初學(xué)者的最佳HTML教程</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 08, 2025 am 12:25 AM</span> <p class="Articlelist_txts_p">TolearnHTMLin2025,chooseatutorialthatbalanceshands-onpracticewithmodernstandardsandintegratesCSSandJavaScriptbasics.1.Prioritizehands-onlearningwithstep-by-stepprojectslikebuildingapersonalprofileorbloglayout.2.EnsureitcoversmodernHTMLelementssuchas,</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796834172.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/431/639/175212727282844.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML用于電子郵件模板教程" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796834172.html" title="HTML用于電子郵件模板教程" class="phphistorical_Version2_mids_title">HTML用于電子郵件模板教程</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 10, 2025 pm 02:01 PM</span> <p class="Articlelist_txts_p">如何制作兼容性好的HTML郵件模板?首先要用表格(table)搭建結(jié)構(gòu),避免使用div flex或grid布局;其次所有樣式必須內(nèi)聯(lián)化,不可依賴外部CSS;接著圖片要加alt說明并使用公網(wǎng)URL,按鈕應(yīng)使用帶背景色的table或td模擬;最后務(wù)必在多個客戶端測試并調(diào)整細節(jié)。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796831875.html" title="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關(guān)聯(lián)?" 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/175182660162333.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關(guān)聯(lián)?" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796831875.html" title="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關(guān)聯(lián)?" class="phphistorical_Version2_mids_title">如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關(guān)聯(lián)?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 07, 2025 am 02:30 AM</span> <p class="Articlelist_txts_p">使用HTML的和可以直觀且語義清晰地為圖片或媒體添加說明文字。1.用于包裹獨立的媒體內(nèi)容,如圖片、視頻或代碼塊;2.則作為其說明文字,置于內(nèi)部,可位于媒體上方或下方;3.它們不僅提升頁面結(jié)構(gòu)清晰度,還增強可訪問性和SEO效果;4.使用時應(yīng)注意避免濫用,適用于需強調(diào)并附帶說明的內(nèi)容,而非普通裝飾圖;5.不可忽視的alt屬性,它與figcaption的作用不同;6.figcaption位置靈活,可根據(jù)需要放在figure內(nèi)頂部或底部。正確使用這兩個標簽,有助于構(gòu)建語義清晰、易于理解的網(wǎng)頁內(nèi)容。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796833092.html" title="如何在沒有服務(wù)器的情況下處理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/431/639/175199487296454.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何在沒有服務(wù)器的情況下處理HTML中的表單提交?" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796833092.html" title="如何在沒有服務(wù)器的情況下處理HTML中的表單提交?" class="phphistorical_Version2_mids_title">如何在沒有服務(wù)器的情況下處理HTML中的表單提交?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 09, 2025 am 01:14 AM</span> <p class="Articlelist_txts_p">沒有后端服務(wù)器時,仍可通過前端技術(shù)或第三方服務(wù)處理HTML表單提交。具體方法包括:1.使用JavaScript攔截表單提交以實現(xiàn)輸入驗證和用戶反饋,但數(shù)據(jù)不會持久化;2.借助如Formspree等第三方無服務(wù)器表單服務(wù)收集數(shù)據(jù)并提供郵件通知和重定向功能;3.利用localStorage進行客戶端臨時數(shù)據(jù)存儲,適合保存用戶偏好或管理單頁應(yīng)用狀態(tài),但不適合敏感信息的長期保存。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796833601.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/175211633258120.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML中最常用的全局屬性是什么?" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796833601.html" title="HTML中最常用的全局屬性是什么?" class="phphistorical_Version2_mids_title">HTML中最常用的全局屬性是什么?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 10, 2025 am 10:58 AM</span> <p class="Articlelist_txts_p">class、id、style、data-、title是HTML中最常用的全局屬性。class用于指定一個或多個類名以方便樣式設(shè)置和JavaScript操作;id為元素提供唯一標識符,適用于錨點跳轉(zhuǎn)和JavaScript控制;style允許添加內(nèi)聯(lián)樣式,適合臨時調(diào)試但不推薦大量使用;data-屬性用于存儲自定義數(shù)據(jù),便于前后端交互;title用于添加鼠標懸停提示,但其樣式和行為受限于瀏覽器。合理選擇這些屬性可提升開發(fā)效率和用戶體驗。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796835225.html" title="在HTML中實現(xiàn)圖像的本機懶負荷" 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/175225251122177.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="在HTML中實現(xiàn)圖像的本機懶負荷" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796835225.html" title="在HTML中實現(xiàn)圖像的本機懶負荷" class="phphistorical_Version2_mids_title">在HTML中實現(xiàn)圖像的本機懶負荷</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 12, 2025 am 12:48 AM</span> <p class="Articlelist_txts_p">原生懶加載是一種瀏覽器內(nèi)置功能,通過在標簽中添加loading="lazy"屬性實現(xiàn)延遲加載圖片。1.它無需JavaScript或第三方庫,直接在HTML中使用;2.適合用于頁面下方非首屏顯示的圖片、圖片畫廊滾動加載項和大型圖片資源;3.不適合首屏圖片或display:none的圖片;4.使用時應(yīng)設(shè)置合適的占位空間以避免布局抖動;5.應(yīng)結(jié)合srcset和sizes屬性優(yōu)化響應(yīng)式圖片加載;6.需要考慮兼容性問題,部分舊瀏覽器不支持,可通過特性檢測并結(jié)合JavaScript方案作</p> </div> </div> <a href="http://www.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培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://www.miracleart.cn/zh/about/us.html">關(guān)于我們</a> <a href="http://www.miracleart.cn/zh/about/disclaimer.html">免責(zé)聲明</a> <a href="http://www.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://www.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="saeyw" class="pl_css_ganrao" style="display: none;"><nav id="saeyw"><strike id="saeyw"><delect id="saeyw"></delect></strike></nav><optgroup id="saeyw"></optgroup><center id="saeyw"></center><object id="saeyw"><rt id="saeyw"><kbd id="saeyw"></kbd></rt></object><pre id="saeyw"></pre><menu id="saeyw"></menu><wbr id="saeyw"></wbr><strong id="saeyw"></strong><abbr id="saeyw"><menu id="saeyw"><samp id="saeyw"></samp></menu></abbr><option id="saeyw"></option><button id="saeyw"></button><option id="saeyw"></option><dl id="saeyw"><strike id="saeyw"><option id="saeyw"></option></strike></dl><center id="saeyw"><pre id="saeyw"><s id="saeyw"></s></pre></center><tfoot id="saeyw"></tfoot><tr id="saeyw"></tr><center id="saeyw"></center><samp id="saeyw"></samp><tr id="saeyw"></tr><li id="saeyw"><th id="saeyw"><del id="saeyw"></del></th></li><object id="saeyw"></object><pre id="saeyw"></pre><sup id="saeyw"></sup><table id="saeyw"><dd id="saeyw"><li id="saeyw"></li></dd></table><xmp id="saeyw"><option id="saeyw"><source id="saeyw"></source></option></xmp><code id="saeyw"><dd id="saeyw"><nav id="saeyw"></nav></dd></code><button id="saeyw"><object id="saeyw"><dfn id="saeyw"></dfn></object></button><nav id="saeyw"></nav><abbr id="saeyw"></abbr><blockquote id="saeyw"></blockquote><optgroup id="saeyw"></optgroup><small id="saeyw"></small><abbr id="saeyw"></abbr><dfn id="saeyw"><table id="saeyw"><kbd id="saeyw"></kbd></table></dfn><button id="saeyw"></button><pre id="saeyw"></pre><pre id="saeyw"><s id="saeyw"><delect id="saeyw"></delect></s></pre><strike id="saeyw"><samp id="saeyw"><code id="saeyw"></code></samp></strike><cite id="saeyw"></cite><fieldset id="saeyw"></fieldset><dl id="saeyw"></dl><center id="saeyw"><em id="saeyw"><tfoot id="saeyw"></tfoot></em></center><dd id="saeyw"></dd><xmp id="saeyw"></xmp><rt id="saeyw"><pre id="saeyw"><nav id="saeyw"></nav></pre></rt><li id="saeyw"><tfoot id="saeyw"><tbody id="saeyw"></tbody></tfoot></li><blockquote id="saeyw"><delect id="saeyw"><strong id="saeyw"></strong></delect></blockquote><noframes id="saeyw"><menu id="saeyw"><small id="saeyw"></small></menu></noframes></div> </html>