如何优化这个CSS代码？

-2

我是一个新手的CSS。我只是画一个基本的HTML页面下面的代码：如何优化这个CSS代码？

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

目的是straightforward.But的CSS看起来crap.even一些problems.I要问一些问题：

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

2.当我将'容器'的宽度设置为100％（与脚部相同）时，为什么会出现水平滚动条？

3.如果我没有将容器的显示器设置为“内嵌块”，为什么脚部会飞到空中？（即使我将其设置为“块”）

4.Could你们给我一个更好的CSS样式代码？

来源

2012-12-28 LeoShi

我知道您更喜欢使用CSS3和最新的html标准，但<header>标签尚未被许多浏览器供应商采用。我会偏离使用它。 IE9是第一个采用IE的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-28 11:42:30 ProfileTwist

感谢您的建议。我刚刚从所有元素中获得了所有最小高度的乘积。我必须陈述容器的原因是，如果我刚获得显示属性的乘积，那么脚部分将与容器部分重叠。有任何想法吗？ – LeoShi

现在没有那么多人使用IE6/7了。 0.3＆IE6和1.2％IE7。大多数IE用户使用IE8，但OP总是可以使用类似ie9.js的东西来强制与HTML5元素兼容。 – Kyle

谢天谢地，不超过0.3％使用IE6。我只是在暗示html5的采用需要时间，而在这个过渡时期，我们必须警惕某些html标签“

”，它可能无法按预期工作。 – ProfileTwist

2.当我将'容器'的宽度设置为100％（与脚部相同）时，为什么会出现水平滚动条？

因为，您有余量使总宽度超过100％。

来源

2012-12-28 11:44:58 ATOzTOA

谢谢老兄。是否意味着如果我想将容器部分与顶部菜单部分对齐，我必须将宽度设置为一个幻数？ – LeoShi

不，您始终可以使用百分比，但请记住边距/边框始终会添加到元素的总宽度。只需将所有内容设置在98％之内。 – ATOzTOA

除了什么已经说过，你试图使用Chrome检查，以解决问题的论文？只需在页面上的鼠标，点击右键并选择Inspect Element。在那里你可以启用/禁用一些CSS属性并快速找出错误。对于Firefox，相当于http://getfirebug.com/

至于你的布局问题：不要担心，当我们开始时，这对我们所有人都是一个真正的痛苦。如果你的观点不是真正学习CSS，如果你只想让这个工作一劳永逸，我的建议是：使用一个带有网格的CSS框架。

CSS框架通常有一个很棒的功能，我们称之为“网格”。它将允许您在5分钟内设置一个类似于您的布局，并停止担心此div如何在此浏览器中浮动。

加：这取决于你想使用的网站，但是通常当你使用一个网格，你做什么都会被性感魔法看起来不那么业余。（如果你有一个设计师的背景，也许你已经知道这一点）

举一个简单的框架开始。每个人都有自己的喜爱，但我可以推荐BluePrint开始。这里是它的grid system super powers的小规模示威;）

来源

2012-12-28 12:05:30 TKrugg

谢谢兄弟。我知道如何使用Twitter bootstrap和其他网络系统。但我现在只想学习真正的CSS。 – LeoShi

如何优化这个CSS代码？

回答

相关问题