html - 构建 HTML 和 CSS 的正确方法是什么？

标签 html css

所以，我本质上是一个脚本猴子。最近，由于一些奇怪的原因，我似乎也忙于做设计，好吧，我们只能说我应该学得更好。

无论哪种方式 - 我问的是，构建网站的正确方法是什么？

这个有一个带有链接的标题，然后是一个带有选项卡的 block ，就在另一个由两部分组成的 block 下方，以及在我还没有看到的其他一些 block 下方。

但是，问题是，我需要制作一个由两个部分组成的 block ，这两个部分位于同一个盒子中，但结构独立。

我会尝试把它画出来。

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

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

我尝试使用 float ，将它们制作为表格，对齐等等。

在两个 table 上放置 float:left 都有效。有点。直到我尝试调整窗口大小。

那么，如何正确构建这样的网站呢？三个 div 和表格？还有别的吗？

我会再次澄清这一点:我正在尝试找出正确的方法，而不是用于创建上面的外观的代码，而不是设计

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

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

抱歉，如果某个地方的空白弄乱了..

CSS:

body { 
    font-size: 80%;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color: #e2edff;
}

.container {
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}

.pageBlock {
    /* To future me: This class is for One Full Screen ideas */
    min-height: 300px;
}

.topBlock {
    text-align: right;
    color: #000000;
}

.topBlock a {
    text-decoration: none;
    color: #000000;
}

.tableLeft {
    width: 75%;
    float: left;
    border-right: dotted 2px black;
}

.tableRight {
    float: left;
    overflow: auto;
}

.smallTable {
    border-bottom: 1px dotted #c9c3ba;
}

.google_map {
    height: 270px;
    width: 100%;
 }

最佳答案

这是一个example我如何对 html 进行建模。

注释

  • 无 table 。
  • 我会将选项卡操作设为 anchor [<a> ] 为了更灵活的样式，我没有演示这一点，以防止示例中 CSS 臃肿。
  • 我建议研究一个 CSS 框架，例如 Foundation , Bootstrap , Gumby , 960 Grid System或Blueprint CSS Framework 。 在这种情况下它们并不是特别必要，但仍然很有用。强烈建议使用框架来实现优雅的响应式布局。这是 post on the subject
  • #page > #content在此特定示例中，结构可能是多余的。但是，我将其包含在内，因为如果您想包含 #sidebar ，这是正确的。作为 #content 的 sibling ，允许包装器的样式[ #page ]
  • 恕我直言，该示例展示了 ID 和类以及元素层次结构的正确使用，这有利于非常灵活的样式，RE:CSS Zen Garden 
<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;
}
  • 额外加分:使用 CSS 媒体查询使布局响应式。
  • 额外额外奖励:将整个布局转换为 HTML5

关于html - 构建 HTML 和 CSS 的正确方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4575352/

上一篇：html - <head> 和 <body> 验证问题

下一篇：html - CSS+HTML : How to draw table/cell border

相关文章：

javascript - Starfield canvas程序占用CPU过多

google-chrome - 为什么我的 Google Chrome 扩展程序的弹出 UI 在外接显示器上滞后，而在笔记本电脑的 native 屏幕上却没有？

html - 在加载时将类添加到 div

html - 取消选中模拟复选框中的复选框

html - CSS 高度，如何让它绕过内部 div

html - 即只有样式表不起作用，包括代码

javascript - 单击某些内容时显示(幻灯片)文本框

php - 根据单击的内容自定义消息

css - 更改不同 Controller 中节点的 Id

PHP从数据库中获取数据，并在while循环外使用

©2024 IT工具网  联系我们