您的位置：首页 > Web前端 > HTML5

HTML5规范简单布局

2016-12-15 00:00 351 查看

摘要: HTML5规范简单布局

1.H5简单布局

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>后英语时代</title>
</head>

<body>
<header>
<h1>后英语时代</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">话题</a></li>
<li><a href="#">社区</a></li>
</ul>
</nav>
</header>
<section id="idea">
<div>
<h2>后英语时代：</h2>
<p>你喜欢读英文书吗？你喜欢坐在软软的沙发上，品着可口的咖啡，听着舒缓的音乐读英文书吗？你喜欢和一群小伙伴一起读英语书吗？你喜欢和一群小伙伴一起读英语原本书后再一起分享讨论飙英文吗？如果没有尝试过，你怎么知道你不...</p>
</div>
</section>
<section id="activity">
<div class="up">
<div id="calandar" class="left_part"></div>
<div id="info" class="right_part">
<div id="bullentin">
<h3>公告栏</h3>
<p>A warm, enthusiastic south girl who work at the central government firm. She like running, adventure, traveling, particularly for making new friends, and always full of curiosity to new things. She believes sharing joyful between friends is the best thing of the life.</p>
</div>
</div>
</div>
<div class="down">
<h2>发现活动</h2>
<div id="act_slides"></div>
</div>
</section>
<section id="post">
<article id="posts">
<h3>社区文章</h3>
<article class="item">
<figure><img src="f9708de32d641358e47edc96307775d5_b.png"></figure>
<div class="header">
<h4><a href="#">常用的表达式</a>
<span>作者：tom <time datetime="2017-2-2" pudate=""> 2017-2-2</time></span>
</h4>
</div>
<div class="body"></div>
<div class="footer"></div>
</article>
</article>
<article id="posts">qqqqqqqqqq</article>
</section>
<footer>
<ul>

</ul>
<address></address>
</footer>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： H5

相关文章推荐

新的分享

章节导航