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

时间：2011-01-01 19:21:18

标签： html css

所以，我是一个核心的脚本猴子。最近我似乎也因为一些奇怪的原因而陷入设计之中，而且，我只想说我应该更好地学习。

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

这个有一个带有链接的标题，然后是一个带有标签的块，位于另一个块的下面，该块由两部分组成，还有一些我还没有的部分。

然而，问题是，我需要创建一个由两个部分组成的块，这两个部分位于同一个框中但是独立构建。

我会尝试画出来。

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

我的问题在于划分小部分和标签/内容区域。

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

两个牌桌上的推杆浮动：左侧工作。均田。直到我试图调整窗口大小。

那么，您如何正确构建这样的网站？三个表和桌子？还有别的吗？

我将再次澄清：这是用于创建上面的代码的代码，我正在尝试找出正确的方法，而不是 design

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

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

对不起，如果它在某处的whitespacing中搞砸了..

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

4 个答案:

答案 0 :(得分：4)

这是我对html进行建模的example。

备注的

  • 无表。
  • 我会将标签操作设为anchor [<a>]以获得更灵活的样式，我没有在示例中试图阻止膨胀的CSS。 / LI>
  • 我建议您查看一个CSS框架，例如Foundation，Bootstrap，Gumby，960 Grid System或Blueprint CSS Framework。 在这种情况下，它们并不是特别必要，但是非常有用。强烈建议使用框架来实现优雅的响应式布局。这是一个post on the subject
  • 在此具体示例中，#page > #content结构可能是多余的。但是，我将其包含在内是因为如果你想将#sidebar作为兄弟#content包含在内，这是正确的，允许包装器的样式[#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

答案 1 :(得分：1)

现在构建页面的标准方法是使用div标签，虽然我需要的不仅仅是3个。表格往往不用于布局：它们会给页面增加很多权重。

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

答案 2 :(得分：0)

首先，为什么这条线路一直贯穿两个部分？可能性每次都不会是相同的长度。你应该把它分成两个不同的行，每个区域一个。

我会这样构造:(假设各个部分的大小不同）

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

让#main和#side向左浮动，宽度为％。 不要在这些中添加任何边距或填充，否则会影响到框模型的整体尺寸。如果你想要填充，在其中添加另一个div，其填充类似于#content。

编辑：已更改，因此各个部分的大小相同。

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

答案 3 :(得分：-1)

开始的一个好方法是进入HTML5 Boilerplate，根据它的创造者

  

基础HTML / CSS / JS模板，用于快速，强大且面向未来的网站

请务必阅读文档，并查看页面底部的视频。

祝你好运！

相关问题
最新问题