黄金分割网页模板？
黄金分割网页模板？
提问于 2011-12-21 17:57:29
我试图创建一个模板网页，使用黄金比例的比例。不过，看来我做得不对。
我希望就如何正确使用以下各项提供一些意见：
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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2011-12-21 18:20:23
我做了一些相当广泛的黄金比率工作，在这篇文章的Is there a CSS way to position an HTML element vertically following the golden ratio?，这可能会对你有所帮助。
Stack Overflow用户
发布于 2011-12-21 18:11:46
这里有一个链接，http://jsfiddle.net/etienne_carre/WYStC/
我喜欢使用左浮动对齐我的所有div，并在其后面放一个空来完成行。
Stack Overflow用户
发布于 2018-10-05 15:52:50
也许这能帮上忙吗？https://github.com/gbutiri/phi-grid
它是一个扩展，可以用于引导和使用挠性盒。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8594209
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号