-2

我是一个CSS新手。我只是用以下代码绘制了一个基本的 HTML 页面：

<html>
  <head>
    <title>Hey</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <header class="top-menu"></header>
    <div class="container">
      <div class="left-side"></div>
      <div class="main-content"></div>
    </div>
    <div class="foot"></div>
  </body>
</html>

这是style.css：

.top-menu{
    position: fixed;
    top: 0;
    left: 70px;
    right: 70px;
    height: 50px;
    background-color: #000000;
}
.container{
    margin: 70px 70px 20px 70px;
    display: inline-block;
    width: 91%;
}

.left-side {
    width: 30ex;
    min-height: 30ex;
    float: left;
    background-color: blue;
}
.main-content {
    width: 80ex;
    float: right;
    background-color: red;
    min-height: 100ex;
}
.foot {
    background-color: green;
    height: 5ex;
    width: 91%;
    margin-left: 10ex;
}

目的很简单。但是css看起来很垃圾。甚至有些问题。我想问一些问题：

1.容器的左右边距是70px，和top-menu一样，但是从chrome页面看，为什么不对齐？

2.为什么我将'container'的宽度设置为100%（与脚部分相同）时出现水平滚动条？

3.如果我不将容器的显示设置为'inline-block'，为什么脚部会飞到空中？（即使我将其设置为“阻止”）

4.你们能给我一个更好的css样式代码吗？

4

3 回答 3

0

我了解您更喜欢使用 CSS3 和最新的 html 标准，但该<header>标签尚未被许多浏览器供应商采用。我会偏离使用它。IE9 是第一个采用它的 IE，并且仍有大量用户使用 IE6/7。

取出<header>并用普通替换，<div class="header">...</div>然后使用 css 引用.header { }。

要回答 #2 - 您不能声明width: 100%;然后添加左/右边距，也不要期望水平滚动条。原则上，容器的跨度将超过 100%。

我不确定你为什么要添加display: inline-block;到容器 div 中。只有内联元素应该有这个声明（即文本元素）。有什么具体原因吗？

此外，当您第一次创建 html 模板并对其进行测试时，请确保始终将内容添加到 div 中，而不是简单地将它们留空。添加min-height: ...不是一个万无一失的系统。我总是添加假文本 - “你好你好”就足够了。

最后，添加适当的 html 文档类型。也许您为问题部分修剪了它，但这是 xhtml 还是 html？这与使用<header>. 并非所有文档类型都支持<header.

于 2012-12-28T11:42:30.820 回答
0

Apart from what's been already said, have you tried to use the chrome inspector to tackle theses issues? Just point the mouse on the page, right click and choose Inspect Element. There you can enable/disable some CSS properties and quickly find out what's wrong. For firefox, the equivalent is http://getfirebug.com/

As for your layout problem: don't worry, this has been a real pain for all of us when we've started. If your point is not to actually learn css, if all you want is to make this to work once and for all and in time, my advice is: use a CSS framework with a grid.

CSS frameworks have usually a neat feature we call "the grid". It will allow you to set a layout like yours in 5 minutes, and stop worrying about how this div floats in this or that browser.

Plus: this depends of the website you want to use, but usually when you use a grid, what you do will by sexy magic look less amateur. (if you have a designer background maybe you already know this)

Take a simple Framework to start. Everyone has its favorite but I can recommend BluePrint to start. And here is a small demonstration of its grid system super powers ;)

于 2012-12-28T12:05:30.127 回答
0

2.为什么我将'container'的宽度设置为100%（与脚部分相同）时出现水平滚动条？

因为，你有让总宽度超过 100% 的边距。

于 2012-12-28T11:44:58.523 回答