01-页面布局示例

最新推荐文章于 2024-06-15 15:52:39 发布

jamesge2010

最新推荐文章于 2024-06-15 15:52:39 发布

阅读量225

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jamesge2010/article/details/102926579

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5测试</title>
<!--[if lt IE 9]>
  <script src="html5.min.js"></script>
<![endif]-->
</head>
<body>
	<header class="header">
		<h1>XXXX有限公司</h1>
		<nav>
			<a href="">1</a>
			<a href="">2</a>
			<a href="">3</a>
			<a href="">4</a>
			<a href="">5</a>
			<a href="">6</a>
		</nav>
		<span>热线电话</span>
		<div class="banner">不仅仅是世界500强</div>
	</header>
	
	<main>
		<aside class="aside">
			<section>
				<h3>产品分类</h3>
				<ul>
					<li>列表1</li>
					<li>列表2</li>
					<li>列表3</li>
				</ul>
			</section>
			<section>
				<h3>联系我们</h3>
				<ul>
					<li>地址</li>
					<li>邮箱</li>
					<li>电话</li>
				</ul>
			</section>
		</aside>
		
		<section class="content">
			<section class="company">
				<h3>公司介绍</h3>
				<figure>
					<img alt="" src="img/天空.png">
					<figcaption>这是天空动漫</figcaption>
				</figure>
				<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>	
			</section>
			<section></section>
			<section></section>
		</section>
		<section class="address">
			<h3>应用领域</h3>
		</section>
		<section>
			<h3>产品展示</h3>
			<ul>
				<li><img alt="" src=""><span>产品一</span></li>
				<li><img alt="" src=""><span>产品二</span></li>
				<li><img alt="" src=""><span>产品三</span></li>
			</ul>
		</section>
	</main>
	
	<footer>
		<div>
			<a href="">跳转一</a>
			<a href="">跳转二</a>
			<a href="">跳转三</a>
			<a href="">跳转四</a>
			<a href="">跳转五</a>
			<a href="">跳转六</a>
		</div>
	</footer>
	
</body>
</html>