Question

我正在尝试制作HTML三列模板using a layout from html.am。我已经将布局用作试验CSS和设计的沙箱，现在我想从头开始而不必依赖别人设计的模板。

这是针对使用Twig作为模板引擎的PHP / MySQL站点。内容是从数据库中提取的 - 它是一个信息网站，在设计中看起来像杂志一样（因为那是我瞄准的目标），它不时被更新（不经常更新）），它不需要一个完整的博客功能，如评论，上传等，因为它是一个粉丝/信息网站，而不是一个成熟的WordPress风格的网站，拥有大量的粉丝和沉重的社交媒体存在。

This page here是我当前受影响的人。

我可以从Firefox浏览器中保存页面，然后在文本编辑器中手动编辑，但我试图创建自己的基本设计。

在Firefox上使用View Source，我注意到我链接到上面的页面[第二个链接]由DIV组成，如第一个示例所示。

我想要做的是模拟div之间有很多空格的效果，然后再看到FIRST DRIVE（根据Firefox上的查看源的DIV）的文本，正如您在页面上看到的那样

我很感激有关如何使用CSS / HTML实现这一目标的任何建议，以便该页面不会基于使用其他人而使用其他内容。我修改过的模板 - 最近我还没有使用实际的HTML / CSS进行模板化。

编辑：

我现有页面设计的当前代码（作为纯HTML，我想从头开始替换，使用修改后的html.am编码）：

＆＃13;

   <body>		
     <!DOCTYPE html>
    <html>
    	<head>
    <style>
			body {
				margin:0;
				padding:0;
				font-family: Verdana, sans-serif;
				font-size: 13px;
				line-height: 1.5em;
			}
			
			#header {
				background: #ccc;
				height: 100px;
			}
			
			#header h1 {
				margin: 0;
				padding-top: 15px;
			}
			
			main {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 100%;
			}
			
			#nav {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 230px;
				margin-left: -100%;
				background: #eee;
			}
			
			#footer {
				clear: left;
				width: 100%;
				background: #ccc;
				text-align: center;
				padding: 4px 0;
			}
	
			#wrapper {
				overflow: hidden;
			}
						
			#content {
				margin-left: 230px; /* Same as 'nav' width */
			}
			
			.innertube {
				margin: 15px; /* Padding for content */
				margin-top: 0;
			}
		
			p {
				color: #555;
			}
	
			nav ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			
			nav ul a {
				color: darkgreen;
				text-decoration: none;
			}
			
			#container {
			width: 500px;
}

#container img {
height: 399px;
display: block;
margin-left: auto;
margin-right: auto;
}
		
    </style>
    </head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>2 Column Layout &mdash; Left Menu with Header &amp; Footer</title>
    		<header id="header">
    			<div class="innertube">
    				<h1>Header...</h1>
    			</div>
    		</header>
    		
    		<div id="wrapper">
    		
    			<main>
    				<div id="content">
    					<div class="innertube">
    						<h1>Heading</h1>
    						<p></p>
    					</div>
    				</div>
    			</main>
    			
    			<nav id="nav">
    				<div class="innertube">
    					<h3>Left heading</h3>
    					<ul>
    						<li><a href="#">Link 1</a></li>
    						<li><a href="#">Link 2</a></li>
    						<li><a href="#">Link 3</a></li>
    						<li><a href="#">Link 4</a></li>
    						<li><a href="#">Link 5</a></li>
    					</ul>
    					<h3>Left heading</h3>
    					<ul>
    						<li><a href="#">Link 1</a></li>
    						<li><a href="#">Link 2</a></li>
    						<li><a href="#">Link 3</a></li>
    						<li><a href="#">Link 4</a></li>
    						<li><a href="#">Link 5</a></li>
    					</ul>
    					<h3>Left heading</h3>
    					<ul>
    						<li><a href="#">Link 1</a></li>
    						<li><a href="#">Link 2</a></li>
    						<li><a href="#">Link 3</a></li>
    						<li><a href="#">Link 4</a></li>
    						<li><a href="#">Link 5</a></li>
    					</ul>
    				</div>
    			</nav>
    		
    		</div>
    		
    		<footer id="footer">
    			<div class="innertube">
    				<p>Footer...</p>
    			</div>
    		</footer>
    	
    	</body>
    </html>

＆＃13;

Answer 1

将#nav_right放在页面#nav之后，并为width提供200px之类的内容。然后将margin-right: 200px提交给#content。

PHP站点的三列HTML模板

1 个答案: