1

我已经阅读了一些关于语义 HTML 代码的文章，并且我正在尝试应用这些原则来修复我的页面。

我有一个索引页面，其中包含一个带有欢迎问候的部分、一个快速注册表单和一个大的 iphone 图像。

我希望欢迎问候语和快速注册在左侧（彼此下方），而 iphone 图像在右侧。现在，我想知道如何正确浮动这些 div？

我想制作一个具有浮动属性的左右 div，但我认为名称不好。我还认为内容和侧边栏是两个分组的 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

I want the welcome greeting and quick registration to be on the left side (underneath eachother) while the iphone image is on the right side. Now, I wonder how I should float these divs correctly?

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

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

The question about naming isn't really relevant. Give it whatever name you want.

If you already have a site, don't worry about removing/changing your divs. You can wrap them with semantic tags.

For information, see HTML5 best practices; section/header/aside/article elements.

The use of semantic tags isn't going to help your users. However, it might help bots (such as a search engine).

于 2012-08-18T10:54:36.097 回答
2

I wouldn't get caught up too much on it. Semantic code, although the way forward, should be there to help you, not confuse you.

Personally from what you've described, I'd use something like this:

<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

You can also combine float and margin attributes:

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;
}

Fiddle

于 2012-08-18T11:00:09.550 回答
1

Enclose the left and the right sides in tags with id left and right, and use the float property. You can name them whatever you want, but you can keep it as simple as left and right. Semantic markup does not mean you have to spend hours deliberating what to call it, it just means that the name should relate as closely as possible to the element's function.

See a live example here

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 回答