html - 设计主模板时的网站布局问题和最佳实践

Question

我想要一个网站布局

• 标题部分全宽
• 内容区域中心，宽度为 870 像素，带有内容栏和小部件栏
• 页 footer 分 100%
• 底部的版权栏 100%

样本设计在 fiddle http://jsfiddle.net/7zavu4f4/ 处设置

由于某种原因，页 footer 分没有显示，我想知道这个设计神庙是否可以灵活地调整不同高度的内容区域中的内容。

这是否设计得很好，或者我需要进行任何更改以使其干净。

<div class="header-wrapper">
    <div class="search-bar">Search control will be on right</div>
    <div class="logo-Wrapper">Logo Will Be here</div>
    <div id='cssmenu'>
        <ul>
            <li class='active'><a href='#'><span>Home</span></a>

            </li>
            <li><a href='#'><span>Products</span></a>

            </li>
            <li><a href='#'><span>Company</span></a>

            </li>
            <li class='last'><a href='#'><span>Contact</span></a>

            </li>
        </ul>
    </div>
</div>
<div class="content-wrapper">
    <div class="content-bar"></div>
    <div class="widget-bar"></div>
</div>
<div class="footer-wrapper"></div>
<div class="copyright-wrapper"></div>

我不需要响应式版本，因为我们有一个基于 Mobile jQuery 的本网站的单独移动版本。所以请只考虑桌面版本

Answer 1

您是否针对不同的浏览器和不同的屏幕尺寸测试过您的设计？ PC 和 Mac？安卓？ iOS？

与其拥有特定的移动版本，不如让您的标准网站在所有屏幕尺寸下看起来都不错。不是每个人都有 870 像素宽度的浏览器窗口——您必须考虑页面在 1920x1080 屏幕或 1440x900 屏幕以及窄手机视口(viewport)上的外观。一些需要考虑的事情可能是您是否想让您的主要内容在大屏幕上更宽，并将小部件放在中央彩色内容区域之外。

如果您想改进您的标记(即 html)，请查看 html5 规范，尤其是语义标签，例如 <article> , <section> , <header> , 和 <footer> -- 使用这些元素比加载 <div> 在语义上更合适小号。在 HTML5 Rocks 上有一份优秀的 ht​​ml5 资源列表。 .