HTML5个人博客首页demo
【摘要】 源码：
<!DOCTYPE html>
<title>Hello</title>
<style>
body{
margin:15px auto;
font-family:Arial,sans-serif;
width:960px;
}
p{
margin:0 0 20px 0;
}
p,li{
line-h...
源码：
<!DOCTYPE html>
<title>Hello</title>
<style>
body{
margin:15px auto;
font-family:Arial,sans-serif;
width:960px;
}
p{
margin:0 0 20px 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:0 20px 0 0;
padding:0;
display:inline;
}
#posts{
float:left;
width:74%;
}
#posts aside{
float:right;
font-size:20px;
line-height:40px;
margin-left:5%;
width:35%;
}
#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"> <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 @2015 APP 开发.
<nav>
<ul> <li><a href="#">主页</a> <li><a href="#">关于</a> <li><a href="#">团队</a> <li><a href="#">隐私</a>
</nav>
</footer>
文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_40763897/article/details/89355825
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）