1

セマンティック HTML コードに関する記事をいくつか読みましたが、それらの原則を適用してページを修正しようとしています。

ウェルカム グリーティング、簡単な登録フォーム、大きな iPhone 画像を含むセクションを含むインデックス ページがあります。

ウェルカム グリーティングとクイック登録を左側 (互いの下) に配置し、iPhone の画像を右側に配置したいと考えています。さて、これらの div を正しくフロートするにはどうすればよいのでしょうか?

フローティング属性を持つ左右のdivを作ろうと思ったのですが、名前がイマイチだと思います。また、コンテンツとサイドバーを 2 つのグループ化された div 名と考えました...しかし、それは本当にサイドバーですか? 助けが必要かもしれません。

<div id="welcomegreeting">
    <h2>Title</h2>

</div>

<div id="quickregistration">
        <h3>Title</h3>
        <form>
            <input type="text">
            <input type="text">
            <input type="submit">
        </form>
    </div>

<div id="appshowcase">
    <img src="" />
</div>

マークアップが有効でないことはわかっていますが、私の言いたいことが分かるようにするためです。

4

4 に答える 4

3

ウェルカムグリーティングとクイック登録を左側（互いに下）に、iphoneの画像を右側に配置したいと思います。さて、これらのdivを正しくフロートさせるにはどうすればよいのでしょうか。

<div style="float: left;"></div>

<div style="float: right;"></div>

命名に関する質問は、実際には関係ありません。好きな名前を付けてください。

すでにサイトをお持ちの場合は、divの削除/変更について心配する必要はありません。それらをセマンティックタグでラップできます。

詳細については、HTML5のベストプラクティスを参照してください。セクション/ヘッダー/脇/記事の要素。

セマンティックタグを使用しても、ユーザーには役立ちません。ただし、ボット（検索エンジンなど）には役立つ可能性があります。

于 2012-08-18T10:54:36.097 に答える
2

私はそれにあまり巻き込まれないでしょう。セマンティックコードは、前進する方法ではありますが、混乱させるのではなく、あなたを助けるためにそこにあるべきです。

個人的にあなたが説明したことから、私は次のようなものを使用します：

<section>
    <div class="welcomeTitle">
        <h2>Title</h2>
    </div>
    <div class="registerForm">
        <h3>Title</h3>
        <form>
            <input type="text">
            <input type="text">
            <input type="submit">
        </form>
    </div>
</section>
<aside>
    <div id="appImage">
        <img src="" />
    </div>
</aside>​
于 2012-08-18T10:59:22.817 に答える
2

float 属性と margin 属性を組み合わせることもできます。

HTML:

<div id="leftside">

<div id="welcomegreeting">
    <h2>Welcome</h2>
</div>

<div id="quickregistration">
    <h3>Title</h3>
    <form>
        <input type="text">
        <input type="text">
        <input type="submit">
    </form>
</div>

</div>

<div id="appshowcase">
    <img src="" />
</div>

<div style="clear:both"></div>

CSS:

#leftside {
    float:left;
    width:200px;
}

#appshowcase {
    margin-left: 202px;
}

フィドル

于 2012-08-18T11:00:09.550 に答える
1

左側と右側をidleftと。のタグで囲みright、floatプロパティを使用します。好きな名前を付けることができますが、左右のようにシンプルに保つことができます。セマンティックマークアップは、それを何と呼ぶか​​を検討するために何時間も費やす必要があることを意味するのではなく、名前が要素の機能に可能な限り密接に関連している必要があることを意味します。

ここで実際の例を参照してください

HTML

<div id="left">
    <div id="welcomegreeting">
        <h2>Title</h2>
    </div>
    <div id="quickregistration">
        <h3>Title</h3>
        <form>
            <input type="text">
            <input type="text">
            <input type="submit">
        </form>
    </div>
</div>

<div id="right">
    Some content
    <div id="appshowcase">
        <img src="" />
    </div>
</div>

CSS 

#left {
    float: left;
}
#right {
    float: right;
}
于 2012-08-18T10:56:23.257 に答える