HTML实例-074 使用 HTML5 的网站布局

hrs 提交于 2019/11/16 - 07:45 , 周六

实例代码:

<!doctype html>
<head>
<meta charset="utf-8">
<style>
	header{
		width:830px;
		background-color:black;
		color:white;
		text-align:center;
		padding:5px;
	}
	nav{
		background-color:#eeeeee;
		width:100px;
		height:300px;
		padding:20px;
		line-height:30px;
		color:red;
		float:left;
		
	}
	section{
	float:left;
	width:650px;
	padding:10px;
	
	
	
	}
	footer{
		width:800px;
		clear:both;
		background-color:black;
		color:white;
		text-align:center;
		padding:20px;
		
	}
</style>
</head>
<html>
<body>
	<header>
		<h1>你行网</h1>
	</header>
	<nav>
		首页<br/>
		Drupal<br/>
		HTML<br/>
		About
	</nav>
	<section>
		<h3>Block 区块模块</h3>
		<p>Block 区块模块提供了与区块相关的功能,通过区块可将内容放置在网站的不同区域。Block 模块是 Drupal 的基础模块之一,不能被禁用。它是通过单独的区块管理器页面管理的。
		</p>
		<h3>Aggregator 聚合器模块</h3>
		<p>Aggregator 聚合器模块用于聚合内容。Drupal 的聚合器和 feed 阅读器一样,可以从其它网站收集 RSS 、RDF 和支持 Atom 的新闻 feed ,并在 Drupal 中显示出来。Aggregator 模块中可用的配置选项允许管理员对 feed 进行分类,并查看每个类别中的 feed ,站点管理员可以添加或删除 feed 。feed 在页面的内容区域中由与其相关联的聚合器展示出来,或通过使用一个区块在某个区块区域中展示。
		</p>
	</section>
	<footer>
		COPYRIGHT @ DWOKE.COM
	</footer>
</body>
</html>

运行效果:

html_074.png

 

标签