Question

我希望网站布局

标题部分全宽
内容区域中心，宽度为870像素，内容栏为＆amp;小工具栏
100％
底部的版权条100％

处设置的

由于某种原因，页脚部分没有显示，我想知道这个设计太阳穴是否灵活调整不同高度的内容区域的内容。

这是设计好的方式，还是我需要进行任何更改以使其清洁。

<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

您是否根据不同的浏览器和不同的屏幕尺寸测试了您的设计？电脑和Mac？ Android的？的iOS？

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

如果你想改进你的标记（即html），请查看html5规范，特别是<article>，<section>，<header>等语义标记，和<footer> - 在语义上使用这些元素比在<div> s的负载更合适。 HTML5 Rocks有一个很好的html5资源列表。

Answer 2

页脚＆amp;版权部分未显示，因为页面上方有浮动元素。所以他们实际上只是坐在所有花车后面。

所以一个简单的clear: both会带出这两个页脚元素。添加一些高度，例如height:10px或一些文字，以便您可以看到它们。

网站布局问题＆amp;设计主模板时的最佳实践

2 个答案: