构造HTML和CSS的正确方法是什么？

所以，我是一个核心的脚本猴子。最近我似乎也因为一些奇怪的原因被塞进了设计的工作中，好吧，让我们说我应该学习得更好

无论哪种方式——我要问的是，构建网站的正确方式是什么

这一块有一个带有链接的标题，然后是一个带有选项卡的块，就在另一个由两部分组成的块的正下方，以及我还不知道的其他几个部分的正下方

然而，问题是，我需要做一个块，它由两个部分组成，两个部分在同一个盒子里，但结构独立

我会试着起草它

Browser window..................-[]X
------------------------------------
|.................Header Links Here|
||Tab|Tab|Tab|_____________........|
||Tab content.............|Small...|
||........................|Section.|
||---Line signing new section------|
||........................|Another.|
||..Content Area..........|Small...|
||........................|Section.|
------------------------------------

我的问题是划分小部分和选项卡/内容区域

我试着用浮子，把它们做成桌子，对齐等等

两张桌子上的推杆浮动：左起作用。有点。直到我试图调整窗口的大小

那么，如何正确构建这样一个站点呢？三张桌子？还有别的吗

我将再次澄清这一点：我试图找出正确的方法来创建上面的外观，而不是设计

根据要求，这是我目前的结构

<div class="container">
            <div class="topBlock">
//Header Links Here            </div>
            <div class="inputBlock">
                <ul id="tabs">
                    <li><a href="#strict">Strict</a></li>
                    <li><a href="#flex">Flex</a></li>
                    <li><a href="#multiStep">Multi-Step</a></li>
                </ul>
                <div id="strict" class="tabContent">
                    <table class="tableLeft">
                        <tr>
                            <td>From</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockFrom" type="text" placeholder="FROM"/></td>
                        </tr>
                        <tr>
                            <td>To</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockTo" type="text" placeholder="TO"/></td>
                        </tr>
                    </table>

                        <table class="tableRight">
                        <tr>
                            <td>Leave</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockLeave" type="text" name="leave" placeholder="LEAVE"/></td>
                            <td><input id="inputBlockOne" type="radio" name="one"/></td>
                            <td>One</td>
                        </tr>
                        <tr>
                            <td>Return</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockReturn" type="text" name="return" placeholder="RETURN"/></td>
                            <td><input id="inputBlockBut" type="radio" name="one" checked/></td>
                            <td>Return</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockSubmit" type="submit" value="Search"/></td>
                        </tr>
                    </table>
                </div>
                <div id="flex" class="tabContent">
                    Test Two
                </div>
                <div id="multiStep" class="tabContent">
                    Test Three
                </div>
            </div>

            <div class="mapBlock tabContent">
                <table class="tableLeft">
                    <tr><td>
                            <div id="map" class="google_map"></div>
                        </td></tr>
                </table>
                <table class="tableRight smallTable">
                    <tr>
                        <td>Distance</td>
                    </tr>
                    <tr>
                        <td>[-------------|------------]</td> //Slider to be
                    </tr>
                </table>
                <table class="tableRight smallTable">
                    <tr>
                        <td>Choice / Choice</td>
                    </tr>
                </table>
                <table class="tableRight">
                    <tr>
                        <td>Show:</td>
                    </tr>
                    <tr>
                        <td><input type="radio"/></td>
                        <td>Price</td>
                        <td><input type="radio"/></td>
                        <td>Button!</td>
                    </tr>
                    <tr>
                        <td><input type="radio"/></td>
                    </tr>
                    <tr>
                        <td><input type="radio"/></td>
                    </tr>
                </table>
            </div>
    </div>
</body>

---

现在构建页面的标准方法是使用div标记，尽管我需要的远远不止3个。表格往往不用于布局：它们会给页面增加大量的权重

如何设置浮动元素的宽度？随着窗口大小的调整，百分比将保持一致，而像素将保持不变。

以下是我将如何建模html的示例

注释

• 没有桌子
• 我会使选项卡操作成为

  锚定

  [

  ，，或。在这种情况下，它们不是特别必要，但仍然很有用。强烈建议使用框架来实现优雅的响应布局。下面是一个

• 在这个特定的示例中，

  #page>#content

  结构可能是多余的。但是，我之所以包含它，是因为如果您希望将

  #侧栏

  作为

  #content

  的同级，允许包装器的样式[

  #page

  ]
• IMHO示例举例说明了ID、类和元素层次结构的正确使用，这有助于非常灵活的样式设计，例如：

---

• 额外提示：使用CSS媒体查询使布局响应
• 额外积分：将整个布局转换为HTML5

---

根据创作者的说法，一个好的开始方式是通过

一个基础HTML/CSS/JS模板，用于快速、健壮和经得起未来考验的站点

确保阅读文档并查看页面底部的视频

---

祝你好运！

首先，为什么这条线会一直穿过这两个部分？很可能它们每次的长度都不一样。你真的应该把它们分成两条不同的线，每个区域一条

我希望如此：（假设各部分大小不同）

...





洛勒姆。。。

洛勒姆。。。
洛勒姆。。。

洛勒姆。。。

使#main和#side向左浮动，宽度为%。不要在这些中添加任何边距或填充，否则会影响整体尺寸。如果要填充，请在其内部添加另一个div，填充方式与#内容类似

编辑：更改以使各部分大小相同

<div id="container">
    <ul id="Nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        ...
    </ul>
    <div id="main">
        <ul id="tab">
            <li><a href="#">Tab</a></li>
            <li><a href="#">Tab</a></li>
        </ul>
        <div class="section">
            <div class="content">
                 Lorem...
            </div>
            <div class="side">
                Lorem...
            </div>
        </div>
        <hr />
        <div class="section">
        ...
    </div>
</div>

...





洛勒姆。。。
洛勒姆。。。

...

首先编写语义标记，然后尝试设置样式。尽一切可能为给定页面发布演示/示例标记，我们可能会帮助您，但这似乎不属于“代码”（堆栈溢出）问题，而更多的是“设计”（）问题。我会解决目前的混乱，只是一个小问题sec@Meke个人而言，我会去掉

表格

元素，并确定赋予内容意义的其他方式，无论是

ol

，

ul

，

dl

，

div

，

span

，`microformats…用表格布局页面通常都是有效的（虽然“作品”的价值非常有限，但这并不是最干净的方式。它极大地增加了以后维护/更新页面所需的工作。好吧，是的，因此这里首先要问的问题是：P下地狱吧——我指的是网页设计。：）据我所知，DIV代表站点的“区域”，每个部分一个，就像我在表格中看到的那样。宽度在css中。除了css的标签外，所有的css都在那里（这是不相关的）@Meke:Div用于很多事情，不仅仅是用于站点的“区域：）你有没有考虑过James告诉你的关于宽度的内容？你使用的是百分比，这意味着当你调整浏览器大小时事情会改变。我确信这是一个很好的工具等等，但它不能回答问题，是吗？它也是一个最佳实践的集合在前端开发中，这可以给你一个好的开始。好吧，我现在不是在寻找一个傻瓜网站设计，只是回答我的问题。水平线？这些部分将始终是相同的大小。如果它们是相同的大小，那么标签区不应该围绕较小的右侧吗？所以，简言之，div，很多div？没有必要arily.DIV用于创建division。一旦您开始在其中添加内容，按比例，DIV将减少。从这一点开始，您可能不需要更多DIV，如果没有更多DIV的话。我的布局

<div class="wrapper">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="nav">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
    <div id="page">
        <div id="content">
            <div class="section" id="section-1">
                <div class="tabs left">
                    <ul>
                        <li>Tab 1</li>
                        <li>Tab 2</li>
                        <li>Tab 3</li>
                    </ul>
                    <div class="tab">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                    <div class="tab">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                    <div class="tab">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
                <div class="sub-sections right">
                    <div class="sub-section">
                        A section
                    </div>
                    <div class="sub-section">
                        And another
                    </div>
                    <div class="sub-section">
                        just for kicks
                    </div>
                </div>
                 <div class="clearfix"></div>
            </div>
        </div>
        <div class="section" id="section-2">
            <div class="left">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
            <div class="sub-sections right">
                <div class="sub-section">
                    A section
                </div>
                <div class="sub-section">
                    And another
                </div>
                <div class="sub-section">
                    just for kicks
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

.wrapper {
    width:90%;
    margin:0 auto;
}

.wrapper > div {
    width:auto;   
    margin-bottom:10px;
    border-bottom:1px solid #f0f0f0;
}

.section {
    min-height:200px;
    margin-bottom:10px;
    border:1px solid #f0f0f0;
    border-bottom-width:5px;
}

.section > .left {
    width:80%;
    float:left;
}

.section > .right {
    width:20%;
    float:right;
}

.tabs ul li {
 display:inline;  
 background:#f0f0f0;
   margin-right:5px;
}

.tabs .tab {
    display:none;
}

.tabs .tab:nth-child(0n+1) {
 display:block;   
}

.section .sub-sections .sub-section {
    margin-bottom:5px;
        background:#f0f0f0;
}


/* Independently Style Sections Here */
#section-1 {border-color:red;}
#section-2 {border-color:green}



/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clearfix {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

<div id="container">
    <ul id="Nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        ...
    </ul>
    <div id="main">
        <ul id="tab">
            <li><a href="#">Tab</a></li>
            <li><a href="#">Tab</a></li>
        </ul>
        <div id="content">
            Lorem...
            <hr />
            Lorem...
        </div>
    </div>
    <div id="side">
        Lorem...
        <hr />
        Lorem...
    </div>
</div>

<div id="container">
    <ul id="Nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        ...
    </ul>
    <div id="main">
        <ul id="tab">
            <li><a href="#">Tab</a></li>
            <li><a href="#">Tab</a></li>
        </ul>
        <div class="section">
            <div class="content">
                 Lorem...
            </div>
            <div class="side">
                Lorem...
            </div>
        </div>
        <hr />
        <div class="section">
        ...
    </div>
</div>