HTML5个⼈博客⾸页demo
源码：
<!DOCTYPE html>
<title>Hello</title>
<style>
body{
margin:15px auto;
font-family:Arial,sans-serif;
width:960px;
}
p{
margin:0020px 0;
}
p,li{
line-height:20px;
}
#page_header{
width:100%;
}
#page_header > nav > ul,#page_footer > nav > ul{
list-style:none;
margin:0;
padding:0;
}
#page_header > nav > ul > li,#page_footer > nav > ul >li{
margin:020px 00;
padding:0;
display:inline;
}
#posts{
float:left;
width:74%;
}
#posts aside{
float:right;
font-size:20px;
line-height:40px;
margin-left:5%;
}
#sidebar{
float:left;
width:25%;
}
#page_footer{
clear:both;
display:block;
text-align:center;
width:100%;
}
</style>
<header id="page_header">
<h1>APP开发⼊门</h1>
<nav>
<ul>
<li><a href="#">最新⽂档</a>
<li><a href="#">精选⽂档</a>
<li><a href="#">技术⽀持</a>
<li><a href="#"></a>
</nav>
</header>
<section id="posts">
<article class="post">html主页
<header>
<h2>移动前端开发之viewport的深⼊理解</h2>
<p>Itod
<time datetime="2019-04-17">2019-04-17</time>
</header>
<aside>
<p>欢迎转载
</aside>
<p>在移动设备进⾏重构或开发，⾸先要明⽩移动设备上的viewport，与有关meta标签的使⽤即可。才能让我们的页⾯适配不同分辨率的移动设备。<p>...
<footer>
<p><a href="#">14评论</a>
</article>
</section>
<section id="sidebar">
<nav>
<h3>归档</h3>
<ul>
<li><a href="#">4⽉2019年</a>
<li><a href="#">3⽉2019年</a>
<li><a href="#">2⽉2019年</a>
<li><a href="#">1⽉2019年</a>
</nav>
</section>
<footer id="page_footer">
<p>Copyright @2015APP开发.
<nav>
<ul>
<li><a href="#">主页</a>
<li><a href="#">关于</a>
<li><a href="#">团队</a>
<li><a href="#">隐私</a>
</nav>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。