0

このレイアウトを と だけdivで機能させるには、助けが必要cssです。

<table>
    <tr>
        <td colspan="2">Header</td>
    </tr>
    <tr>
        <td>Side Bar</td>
        <td>
            <table>
                <tr>
                    <td>Top Menu</td>
                </tr>
                <tr>
                    <td>Main Content</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">Footer</td>
    </tr>
</table>

私はこのようなことを考えています：

<div id="page">
    <div id="main-header"></div>
    <div>
        <div id="side-bar"></div>
        <div>
            <div id="top-nav"></div>
            <div id="main-content"></div>
        </div>
    </div>
    <div id="main-footer"></div>
</div>

しかし、私はCSSに少しこだわっています。

4

1 に答える 1

2

これは私が思いついたものです：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-size: 16px;
        }
        #wrapper {
            width: 80%;
            min-width: 500px;
            margin: 10px auto;
            background: rgb(200,200,200);
        }
        #wrapper header h1 {
            text-align: center;
            background: #BADA55;
        }
        #wrapper nav ul {
            list-style: none;
            font-size: 0;
            text-align: center;
            background: red;
        }
        #wrapper nav ul li {
            display: inline-block;
            font-size: 16px;
            padding: 1em 2em;
        }
        #wrapper aside {
            float: left;
            width: 30%;
            background: blue;
        }
        #main_content {
            float: right;
            width: 70%;
            background: green;
        }
        #wrapper footer {
            clear: both;
            background: black;
            color: white;
        }
    </style>
</head>
<body>

<section id="wrapper">
    <header>
        <h1>Main Header</h1>
        <nav>
            <ul>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
            </ul>
        </nav>
    </header>
    <section id="main_content">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </section>
    <aside>
        <h3>Sidebar</h3>
        <p>Sidebar content</p>
    </aside>
    <footer>
        <p><small>Footer Information</small></p>
    </footer>
</section>

</body>
</html>

各要素が見やすいように色分けされています。

CSS/HTML について質問がある場合は、コメントで質問してください。お答えします。

div一般的な、完全にセマンティックでないラッパー要素です。<div>仕事に適した要素が他にない場合にのみ a を使用します。ここでわかるように、どれもありません。すべての要素はセマンティックで適切です。

于 2012-10-11T17:19:01.083 に答える