最近、友人のウェブサイト構築を手伝いました。私には実務経験がないので、やりながら学ぶしかありません。ページは HTML+CSS という非常にシンプルな構成で、最後に本文に CSS テーブル レイアウトを使用しています。以下のコードを参照してください。
写真の赤い部分は、テーブル行の内側に配置された 2 つのテーブルセルです。私を混乱させているのは、セルの幅を調整できないことです。理由はわかりません。この問題がどこにあるのかを理解するのを手伝ってください。
これまでウェブサイトを作成したことがなく、急いでいたので、コードが少し乱雑です。先輩方、頑張って列の幅をコントロールする方法を教えてください。まず、ありがとうございます！
<!doctype html><html><body> <head> <title> XX典藏官网-第四套人民币收藏网,第三套人民币收藏,第五套人民币,连体钞,纪念钞,人民币最新价格行情表及图片</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=" 人民币收藏,第四套人民币,第五套人民币,人民币价格,人民币收藏网,人民币收藏价格表,人民币收藏行情,第二套人民币,第四套人民币价格及图片,第三套人民币,第三套人民币价格及图片,第四套人民币大全套,第五套人民币价格表,纪念钞,奥运纪念钞最新价格,金银币价格,连体钞价格及图片"> <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/imghwm/default1.png" data-src="./images/header_shuimo.png" class="lazy" style="max-width:90%"/ alt="テーブル行 table-cell_html/css_WEB-ITnose に関する事項" ></div> </div> <div id="row_nav"> <div id="header_logo"> <a href="http://www.baidu.com/" alt="XX文化艺术公司"><img src="/static/imghwm/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> <!--导航条和商品展示区--> <!--行--> <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> 您的当前位置：首页 </li> <li> 藏品展示区 </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 id="咨询热线">咨询热线</h3> <p>400-000-0000</p> </div> <div class="footer_div"> <ul class="footer_ul"> <li>关于我们</li> <li><a href="footer/1.html">XX典藏简介</a></li> <li><a href="footer/1.html">企业文化</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">免责声明</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>
以下は style_main.css です:
*{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;}
ディスカッションへの返信 (解決策)
幅を調整するだけで簡単です、
#cell_list ul{ width: 500px;} 枠線については、Chrome ブラウザを使用します。ディスプレイが付いています。
いくつかの提案: 1. タグはドキュメント内のインライン要素 (通常はテキスト) を結合するために使用されます。 2. ページで id 属性を頻繁に使用しないでください。コードの再利用には適さない一方で、名前の競合やスクリプト エラーが発生しやすくなります。
幅を調整するだけなので簡単です、
#cell_list ul{ width: 500px;}
枠線については、Chrome ブラウザを使用しており、表示されています。
いくつかの提案: 1. タグはドキュメント内のインライン要素 (通常はテキスト) を結合するために使用されます。 2. ページで id 属性を頻繁に使用しないでください。コードの再利用には適さない一方で、名前の競合やスクリプト エラーが発生しやすくなります。
枠線が表示できなかったのは私自身の CSS 構文エラーが原因でした。良い！しかし、幅の問題はまだ解決されていません。
まずは下の写真をご覧ください。 1 と 2 は 1 つの行に、3 と 4 は 1 つの行に、5 と 6 は別の行にあります。 HTML コードは変更されていませんが、CSS でテーブル、行、セルの幅属性をどのように設定しても、効果がありません。なぜだか分からない。以下の画像と CSS コードを貼り付けます:
*{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;} 別のテーブルセルが HTML に追加され、CSS の ID は header_test です
ブラウザで F12 を押して、変更する要素を確認します。 idを変更してCSSを変更すると、widthが反映されない問題については、正しい要素を選択していないことが原因だと思います
HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AMHTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。
HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AMHTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。
マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AMHTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。
HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AMHTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AMHTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AMhtmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
メモ帳++7.3.1
使いやすく無料のコードエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7681
15163914139352128625122929