Question

我正在尝试创建一个使用黄金比例的模板网页。但是，似乎我没有正确地做到这一点。

我想就正确使用以下方面提出一些建议：

div标签
CSS和位置属性
任何其他有助于我获得吸引人的网页的标签或提示

HTML：

<html>
<head>
    <title>Golden Ratio</title>
    <link rel="StyleSheet" title="Default" href="gr.css" type="text/css">
</head> 
<body>          
    <div id="header">
    </div>  
    <div>
    </div>
    <div id="bodyleft">
    </div>      
    <div id="bodyright">
    </div>      
    <div id="footer">
    </div>
</body>
</html>

CSS：

body {
    background-color: white;
}

#header {       
    width: 960px;
    height: 100px;
    background-color: red;
}

#bodyleft {
    position: absolute;
    top: 100px; 
    width: 592px;
    height: 700px;
    background-color: blue;
}

#bodyright {
    position: absolute;
    top: 110px;
    left: 610px;
    width: 368px;
    height: 700px;
    background-color: green;
}

#footer {
    position: absolute;     
    top: 800px;
    width: 960px;
    height: 100px;  
    background-color: black;
}

Answer 1

我在这篇帖子Is there a CSS way to position an HTML element vertically following the golden ratio?中做了一些相当广泛的黄金比例工作，可能对你有帮助。

Answer 2

这是一个链接http://jsfiddle.net/etienne_carre/WYStC/

我喜欢使用左边的浮动来对齐我的所有div并在它之后清除以完成该行。

Answer 3

也许可以帮上忙吗？ https://github.com/gbutiri/phi-grid

这是可以与引导程序一起使用并使用flexbox的扩展。

黄金比例网页模板？

3 个答案: