html - Web サイト要素のサイズを変更する方法がわかりません

Question

私のウェブサイトに問題があります。私はそれらに基づいて自分のウェブサイトを探し始めました。素敵なメニュー バーを見つけたので行き詰まってしまいましたが、それを自分で作成することはできません。そこで、ウェブサイト ( website )からコピーすることにしました。問題は、それがどこにあるか、または高さがどのように定義されているかがわからないことです。私が何をしたとしても、常に84pxです。

誰かがこれで私を助けてくれますか?

Answer 1

まず、身長84を探し始めましたが、どこにも見つかりませんでした。メニュー項目の高さでパディングに影響します。

さらにfirebugやdragonflyなどを使用することをお勧めします...

superfish.css:15

.menu > li > a {
...
padding: 30px 20px 36px;
...
}

Answer 2

ヘッダーのコードは次のとおりです (ヘッダー タグが気に入っただけではありませんか?)

<header>
        <div class="header-pannel">
            <div class="inner-shadow">
                <div class="container_12 indent-bottom">
                    <div class="grid_12">
                        <!--======================== logo ============================-->
                        <h1><a href="index.html">Storex.</a></h1>
                        <!--=================== search form =====================-->
                        <form id="search-form" action="search.php" method="GET" accept-charset="utf-8">
                            <fieldset>
                                <label class="keywords">
                                    <input type="text" name="s" value="Search" onFocus="if(this.value =='Search' ) this.value=''" onBlur="if(this.value=='') this.value='Search'">
                                </label>
                                <a onClick="document.getElementById('search-form').submit()"></a>
                            </fieldset>
                        </form>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <!--======================== menu ============================-->
                <div class="border-top">
                    <div class="container_12">
                        <div class="grid_12">
                            <nav>
                                <ul class="menu responsive-menu">
                                    <li class="current"><a href="index.html">Home</a></li>
                                    <li><a href="index-1.html">Company</a>
                                        <ul>
                                            <li><a href="#">Welcome Message</a></li>
                                            <li><a href="#">Company Profile</a>
                                                <ul>
                                                    <li><a href="#">Our Capabilities</a></li>
                                                    <li><a href="#">Advantages</a></li>
                                                    <li><a href="#">Work Team</a></li>
                                                    <li><a href="#">Partnership</a></li>
                                                    <li class="last-item"><a href="#">Support</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Our History</a></li>
                                            <li class="last-item"><a href="#">Testimonials</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="index-2.html">Services</a></li>
                                    <li><a href="index-3.html">Solutions</a></li>
                                    <li><a href="index-4.html">Projects</a></li>
                                    <li class="last-item"><a href="index-5.html">Contacts</a></li>
                                </ul>
                                <div class="clear"></div>
                            </nav>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
    </header>

そのため、かなり忙しいです。構造的な css 要素のほとんどについては、skeleton.css を参照することをお勧めします。

私の個人的なアドバイス: もしあなたが初心者なら、他のサイトを見に行かないでください。それらのほとんどはがらくた (平均の法則) であり、見栄えがよくても、コードがひどい場合があります。それらは、他のコーダーが要素を選択して組み合わせようとすることを念頭に置いて構築されているわけではありません。主に、ウェブサイトを構築している個人/グループ/会社によって、独自の使いやすさを念頭に置いて設計されています (ただし、作成された作業を見ると、一部の専門家によると、彼らがどのようにコードを維持しているのか私にはわかりません)。

フレームワークを見ることをお勧めします。特に自由に配布されたもの。Twitterのブートストラップが良い例です。他の人のコードを使用することも、場合によってはコピーライトを侵害する可能性があります。