利用html5新增元素 仿自己的博客主页 。博客主页是一个两栏布局形式，侧边栏很适合用aside元素，里面的每个模块适用section元素；头部可用header元素,导航栏部分可用nav元素；时间可用time元素等。
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>构建网页</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="wrapper">
<!-- 头部 -->
<div class="head">
<nav class="toolbar">
<ul class="pull-left">
<li class="csdn">
<a href="#"><img src="image/CSDN.png" alt=""></a>
</li>
<li>
<a class="shouye" href="#">首页</a>
</li>
<li>
<a class="active" href="#">博客</a>
</li>
<li>
<a href="#">学院</a>
</li>
<li>
<a href="#">下载</a>
</li>
<li>
<a href="#">论坛</a>
</li>
<li>
<a href="#">APP</a>
</li>
<li>
<a href="#">问答</a>
</li>
<li>
<a href="#">商城</a>
</li>
<li>
<a href="#">VIP会员</a>
</li>
<li>
<a href="#">活动</a>
</li>
<li>
<a href="#">招聘</a>
</li>
<li>
<a href="#">ITeye</a>
</li>
<li>
<a href="#">GitChat</a>
</li>
</ul>
<div class="pull-right">
<ul>
<li>
<div class="search">
<input type="text" placeholder="搜索博主文章">
<a class="fdj" href="#">
<img src="image/fdj.png" alt="">
</a>
</div>
</li>
<li class="write-blog">
<a href="#">
<img src="image/xie.png" alt="">
<span>写博客</span>
</a>
</li>
<li class="gitchat">
<a href="#">
<img src="image/cx.png" alt="">
<span>小程序</span>
</a>
</li>
<li class="msg">
<a href="#">
<img src="image/massage.png" alt="">
<span>消息</span>
</a>
</li>
<li class="fig">
<a href="#">
<img src="image/tx.jpg" alt="">
<span></span>
</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="bloghead">
<div class="continer">
<div class="title-box">
<h1><a href="#">qq_41257129的博客</a></h1>
</div>
<div class="opt-box">
<a href="#">
<span><img src="image/guanli.png" alt=""></span>
管理博文
</a>
</div>
</div>
</header>
<!-- 中间 -->
<div class="body">
<aside class="column">
<section class="con1 aside-box">
<figure>
<a href="#" class="fig"><img src="image/tx.jpg" alt=""></a>
<figcaption><a href="#">crazyWM</a></figcaption>
</figure>
<div class="data">
<dl>
<dt><a href="#">原创</a></dt>
<dd><a href="#">39</a></dd>
</dl>
<dl>
<dt>粉丝</dt>
<dd><span>11</span></dd>
</dl>
<dl>
<dt>喜欢</dt>
<dd><span>8</span></dd>
</dl>
<dl>
<dt>评论</dt>
<dd><span>2</span></dd>
</dl>
</div>
<div class="grade">
<dl>
<dt>等级：</dt>
<dd class="rank">
<a href="#"><img src="image/rank.png" alt=""></a>
</dd>
</dl>
<dl>
<dt>访问：</dt>
<dd><span>5515</span></dd>
</dl>
<dl>
<dt>积分：</dt>
<dd><span>445</span></dd>
</dl>
<dl>
<dt>排名：</dt>
<dd><span>14万+</span></dd>
</dl>
</div>
<div class="badge">
<span>勋章：</span>
<div class="move-box">
<a href="#"><img src="image/xz.png" alt=""></a>
</div>
</div>
</section>
<section class="con2 aside-box">
<header >
<h3 class="aside-title">博客专栏</h3>
</header>
<nav class="aside-content">
<ul>
<li>
<div class="img-box">
<a href="#">
<img src="image/img.png" alt="">
</a>
</div>
<p class="title">
<a href="#">html</a>
</p>
<div class="data-box">
<span>文章数: </span>
<span class="num">0 篇</span>
<span>访问量:</span>
<span>2</span>
</div>
</li>
</ul>
</nav>
</section>
<section class="con3 aside-box">
<header >
<h3 class="aside-title">个人分类</h3>
</header>
<nav class="aside-content">
<ul>
<li>
<a href="#">
<span>css的层叠性</span> <span class="num">1篇</span>
</a>
</li>
<li>
<a href="#">
<span>css的权重问题</span> <span class="num">1篇</span>
</a>
</li>
<li>
<a href="#">
<span>js</span> <span class="num">8篇</span>
</a>
</li>
<li>
<a href="#">
<span>css3特效</span> <span class="num">2篇</span>
</a>
</li>
<li>
<a href="#">
<span>html+css案例</span> <span class="num">1篇</span>
</a>
</li>
</ul>
</nav>
<p class="show">
<a href="#">展开</a>
</p>
</section>
</aside>
<div class="main">
<div class="filter-box">
<form action="">
<label for="chek">
<input type="checkbox" id="chek">只看原创
</label>
</form>
<dl>
<dt>排序：</dt>
<dd><a class="active" href="#">默认</a></dd>
<dd><a href="#">按更新时间</a></dd>
<dd><a href="#">按访问量</a></dd>
<dd><a class="sub" href="#">
<img src="" alt="">
RSS订阅
</a></dd>
</dl>
</div>
<div class="aticle-box">
<div class="aticle-item-box">
<h4 class="titel">
<a href="#">
<span>原</span>
HTML 5新增4个交互元素
</a>
</h4>
<p class="content"><a href="#"></a>
<a href="#">●details details元素提供一种代替JavaScript的方法，它主要是提供一个快捷、简化的方法， 将页面上的部分区域进行展示或收缩。即details元素用来描述文档或文档某个部分的细节 。 details元素经常与 summary元素配合使用可以为 details 定义标题。标题是...</a>
</p>
<div class="info-box">
<span class="data-time">2019-04-03 09:53:52 </span>
<span class="col">|</span>
<span class="point">
阅读数
<span class="num">6</span> </span>
<span class="col">|</span>
<span class="point">
评论数
<span class="num">0</span>
</span>
</div>
</div>
<div class="aticle-item-box">
<h4 class="titel">
<a href="#"><span>原</span>
HTML5新增5个行内语义元素（详解）
</a>
</h4>
<p class="content"><a href="#">●mark mark元素表示页面中需要突出显示的文本。（相当于荧光笔在纸上标出的文字） 除mark元素之外，em和strong元素也可以突出显示文本。 <div> <mark>html5</mark&g...</a></p>
<div class="info-box">
<span class="data-time">2019-04-03 09:53:52 </span>
<span class="col">|</span>
<span class="point">
阅读数
<span class="num">6</span> </span>
<span class="col">|</span>
<span class="point">
评论数
<span class="num">0</span>
</span>
</div>
</div>
<div class="aticle-item-box">
<h4 class="titel">
<a href="#"><span>原</span>
HTML5新增3个块级语义元素（详解）
</a>
</h4>
<p class="content"><a href="#">
●aside aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。 可用到的地方： 当前文章的其他引用、备注、侧边栏和广告等其他有别于主要内容的部分。 <aside> <h2>窗内官方...
</a></p>
<div class="info-box">
<span class="data-time">2019-04-02 19:47:28</span>
<span class="col">|</span>
<span class="point">
阅读数
<span class="num">4</span> </span>
<span class="col">|</span>
<span class="point">
评论数
<span class="num">0</span>
</span>
</div>
</div>
<div class="aticle-item-box">
<h4 class="titel">
<a href="#"><span>原</span>
HTML5新增7个结构元素(详解)
</a>
</h4>
<p class="content"><a href="#">
●header header 元素表示页面中的一个内容区块或者整个页面的标题，通常放在页面的头部。 通常用来显示页面中的标题、logo图片、搜索文本框或者其他相关的内容 <div class="mian-container"> &...
</a></p>
<div class="info-box">
<span class="data-time">2019-04-02 15:25:55</span>
<span class="col">|</span>
<span class="point">
阅读数
<span class="num">11</span> </span>
<span class="col">|</span>
<span class="point">
评论数
<span class="num">0</span>
</span>
</div>
</div>
<!-- <div class="aticle-item-box">
<h4 class="titel">
<a href="#"><span>原</span>
js键盘事件 、显示键码、字符编码 + 案例(键盘控制盒子运动)
</a>
</h4>
<p class="content"><a href="#">
键盘事件： keydown、keypress、keyup <script> /* 对鼠标事件的支持主要遵循是DOM0级 keydown:当用户按下键盘的任意键时触发，而且如果按下不放，会重复触发此事件 keypr...
</a></p>
<div class="info-box">
<span class="data-time">2019-03-31 14:27:06</span>
<span class="col">|</span>
<span class="point">
阅读数
<span class="num">7</span> </span>
<span class="col">|</span>
<span class="point">
评论数
<span class="num">0</span>
</span>
</div>
</div> -->
<div class="page-box">
<ul class="page-inner">
<li class="shang disabled com">上一页</li>
<li class="page active">1</li>
<li class="page">2</li>
<li class="xia com">下一页</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css部分
*{
padding:0;
margin:0;
list-style: none;
text-decoration: none;
}
html,body{
width: 100%;
height: 100%;
background: url('image/bg.png');
}
.wrapper{
width: 100%;
}
/* 头部 */
.wrapper .head{
width: 100%;
background-color: #fff;
}
.head .toolbar{
width: 1200px;
margin: 0 auto;
height: 40px;
}
.head .toolbar .pull-left{
margin-left: -12px;
}
.head .toolbar .pull-left li{
float: left;
line-height: 40px;
text-align: center;
}
.head .toolbar ul li:hover a{
color: #c92027;
}
.head .toolbar ul li.csdn{
margin: 0;
width: 90px;
}
.head .toolbar .pull-left li a{
display: inline-block;
height: 38px;
margin: 0 7px;
font-size: 14px;
color: #333;
cursor: pointer;
}
.head .toolbar ul li.csdn a{
margin: 0;
}
.head .toolbar ul li.csdn img{
width: 70px;
height: 15px;
vertical-align: middle;
}
.head .toolbar ul li a.shouye{
margin:0 7px 0 0;
}
.head .toolbar ul li a.active{
border-bottom: 2px solid #CA0C16;
}
.head .toolbar .pull-right {
padding: 7px 0 0 0;
float: right;
height: 32px;
}
.head .toolbar .pull-right li{
float: left;
}
.head .toolbar .pull-right .search{
width: 160px;
height: 26px;
border: 1px solid #ccc;
border-radius: 4px;
line-height: 1.5em;
text-align: left;
position: relative;
}
.head .toolbar .pull-right .search input{
width: 122px;
height: 18px;
border:0;
outline: none;
font-size: 14px;
color: #4d4d4d;
padding: 4px 0 3px 8px;
}
.head .toolbar .pull-right .search a.fdj{
display:inline-block;
position: absolute;
top: 0;
right: 0;
width: 26px;
height:22px;
padding: 0 2px;
text-align: center;
cursor: pointer;
}
.head .toolbar .pull-right .search .fdj img{
width: 18px;
height: 18px;
vertical-align: middle;
}
.head .toolbar .pull-right .write-blog,
.head .toolbar .pull-right .gitchat,
.head .toolbar .pull-right .msg,
.head .toolbar .pull-right .fig
{
padding-left: 14px;
}
.head .toolbar .pull-right a{
display: inline-block;
height: 26px;
line-height: 26px;
font-size: 14px;
color: #333;
}
.head .toolbar .pull-right img{
width: 20px;
height: 15px;
vertical-align: middle;
}
.head .toolbar .pull-right .gitchat img,
.head .toolbar .pull-right .fig img
{
width: 22px;
height: 22px;
}
.head .toolbar .pull-right .fig img{
border-radius: 50%;
}
.head .toolbar .pull-right .fig span{
display: inline-block;
width: 0;
height: 0;
border:4px solid transparent;
border-top-color: rgb(131, 125, 125);
position: relative;
top: 3px;
}
.wrapper header {
width: 100%;
height: 100px;
clear: both;
background: url('image/bg.png');
}
.wrapper header .continer {
width: 1068px;
height: 100px;
margin: 0 auto;
}
.wrapper header .continer .title-box{
float: left;
}
.wrapper header .continer .title-box h1 a{
font-size: 24px;
color: #333;
line-height: 100px;
}
.wrapper header .continer .opt-box{
width: 300px;
height: 100px;
float: right;
position: relative;
}
.wrapper header .continer .opt-box a{
position: absolute;
top:35%;
right: 0;
line-height: 28px;
height: 28px;
margin: 6px 0 6px 8px;
padding: 0 8px;
font-size: 14px;
color: #333;
background-color: #fff;
border-radius: 4px;
}
.wrapper header .continer .opt-box img{
width: 12px;
height: 15px;
vertical-align: middle;
}
/* 中间 */
.wrapper .body{
width: 1068px;
margin: 0 auto;
}
.wrapper .body .column{
width: 300px;
float: left;
}
.wrapper .body .column .aside-box{
width: 100%;
margin-bottom: 8px;
background-color: #fff;
}
.wrapper .body .con1 figure {
display: flex;
padding:16px;
border-bottom: 1px solid #e3e3e3;
}
.wrapper .body .con1 figure .fig {
width: 48px;
height: 48px;
display: inline-block;
}
.wrapper .body .con1 figure img{
width: 48px;
height: 48px;
border-radius: 50%;
}
.wrapper .body .con1 figure figcaption{
display: inline-block;
margin-left: 8px;
height: 48px;
width: 100px;
line-height: 48px;
}
.wrapper .body .con1 figure figcaption a{
color: #333;
font-size: 14px;
font-weight: 700;
}
.wrapper .body .data {
padding: 16px 10px;
border-bottom:1px solid #e3e3e3;
display: flex;
}
.wrapper .body .data dl{
display: inline-block;
width: 70px;
height: 44px;
text-align: center;
font-size: 14px;
color: #333;
}
.wrapper .body .data dl a
{
color: #333;
}
.wrapper .body .data dl dd,
.wrapper .body .data dl dt
{
height: 22px;
line-height: 22px;
}
.wrapper .body .data dl dd {
font-weight: 700;
}
.wrapper .body .grade {
box-sizing: border-box;
/* 清除行内元素的水平空隙 */
font-size: 0;
padding: 16px;
}
.wrapper .body .grade dl{
font-size: 14px;
width: 134px;
display: inline-block;
margin-top: 8px;
}
.wrapper .body .grade dt ,
.wrapper .body .grade dd{
display: inline-block;
}
.wrapper .body .grade .rank img{
width: 45px;
height: 12px;
}
.wrapper .body .badge{
padding: 0 16px 16px;
font-size: 14px;
margin-top:-8px;
}
.wrapper .body .badge .move-box{
display: inline-block;
height: 22px;
margin-right: 8px;
}
.wrapper .body .badge .move-box img{
width: 21px;
height: 21px;
vertical-align: middle;
}
.wrapper .body .aside-box .aside-content{
padding: 16px;
background-color: #fff;
}
.wrapper .body .aside-box header{
width: 100%;
box-sizing:border-box;
padding: 0 16px;
height: 38px;
background: url('image/hbg.png') no-repeat;
background-size: 100%;
}
.wrapper .body .aside-box header .aside-title{
line-height: 38px;
font-size: 12px;
color: #3d3d3d;
}
.wrapper .body .aside-box .aside-content li .img-box{
margin-right:8px;
float: left;
position: relative;
}
.wrapper .body .aside-box .aside-content li .img-box ::before{
content: "";
position: absolute;
top:0;
left: 0;
width: 64px;
height: 64px;
border: 1px solid #ededed;
}
.wrapper .body .aside-box .aside-content .img-box img{
width: 64px;
height: 64px;
}
.wrapper .body .con2 .aside-content .title{
height: 44px;
}
.wrapper .body .con2 .aside-content .title a{
color: #c88326;
font-size: 14px;
}
.wrapper .body .con2 .aside-content .data-box span{
font-size: 12px;
line-height: 20px;
color: #858585;
}
.wrapper .body .con2 .aside-content .data-box span.num{
margin-right: 16px;
}
.wrapper .body .con3 .aside-content{
padding: 16px 16px 0 16px;
}
.wrapper .body .con3 .aside-content li {
margin-top:8px;
}
.wrapper .body .con3 .aside-content a{
font-size: 14px;
color: #c88326;
line-height: 22px;
}
.wrapper .body .con3 .aside-content li .num{
font-size: 12px;
color: #858585;
float: right;
}
.wrapper .body .con3 .show{
text-align: center;
background-color: #fff;
}
.wrapper .body .con3 .show a{
font-size: 12px;
display: inline-block;
color: #c88326;
width: 50px;
height: 46px;
line-height: 46px;
text-align: center;
}
.wrapper .body .main{
width: 760px;
float: right;
}
.wrapper .body .main .filter-box{
padding: 0px 24px;
height: 48px;
line-height: 48px;
margin-bottom: 1px;
background-color: #fff;
}
.wrapper .body .main .filter-box form{
float: left;
}
.wrapper .body .main .filter-box form input{
width: 14px;
height: 14px;
margin-right:8px;
cursor: pointer;
}
.wrapper .body .main .filter-box form label{
color: #333;
font-size: 14px;
}
.wrapper .body .main .filter-box dl{
margin-left: auto;
float: right;
}
.wrapper .body .main .filter-box dt,
.wrapper .body .main .filter-box dd{
display: inline-block;
margin-left: 24px;
font-size: 14px;
}
.wrapper .body .main .filter-box dt{
margin-right:8px;
margin-left: 0;
color: #999;
}
.wrapper .body .main .filter-box dd a{
color: #333;
}
.wrapper .body .main .filter-box dd a:hover{
color: #CA0C16;
}
.wrapper .body .main .filter-box dd a.active{
color: #CA0C16;
}
.wrapper .body .main .filter-box dd a.sub{
height: 22px;
line-height: 22px;
display: inline-block;
padding: 0 4px;
border: 1px solid #e0e0e0;
background-color: #f5f6f7;
border-radius: 4px;
color: #2e2e2e;
font-size: 12px;
}
.wrapper .body .aticle-box{
width: 760px;
}
.wrapper .body .aticle-box .aticle-item-box{
padding:12px 24px;
margin-bottom: 1px;
background-color: #fff;
}
.wrapper .body .aticle-box .aticle-item-box h4{
display: inline-block;
line-height: 24px;
margin-bottom: 6px;
font-size: 18px;
}
.wrapper .body .aticle-box .aticle-item-box h4 a{
color: #3d3d3d;
padding-left:36px;
display: inline-block;
}
.wrapper .body .aticle-box .aticle-item-box h4:hover{
color: #ca0c16;
}
.wrapper .body .aticle-box .aticle-item-box h4 span{
width: 26px;
height: 26px;
margin-left: -36px;
vertical-align: 2px;
display: inline-block;
border: 1px solid #f4ced0;
color: #ca0c16;
line-height: 26px;
border-radius: 50%;
font-size: 12px;
text-align: center;
}
.wrapper .body .aticle-box .aticle-item-box p {
line-height: 22px;
}
.wrapper .body .aticle-box .aticle-item-box p a{
color: #999;
font-size: 14px;
}
.wrapper .body .aticle-box .aticle-item-box .info-box{
padding-top:4px;
font-size: 14px;
color: #6b6b6b;
}
.wrapper .body .aticle-box .aticle-item-box .info-box .point {
color: #999;
}
.wrapper .body .aticle-box .aticle-item-box .info-box .col {
padding: 0 4px;
color: #e0e0e0;
}
.wrapper .body .aticle-box .aticle-item-box .info-box span.num {
color: #3399ea;
}
.wrapper .body .aticle-box .page-box{
padding:16px;
background-color: #fff;
}
.wrapper .body .aticle-box .page-box .page-inner{
text-align: center;
}
.wrapper .body .aticle-box .page-box .page-inner li{
display: inline-block;
font-size: 12px;
cursor: pointer;
}
.wrapper .body .aticle-box .page-box .page-inner li.disabled{
color: #eaeaea;
}
.wrapper .body .aticle-box .page-box .page-inner .com{
margin-left: 5px;
padding:6px 8px;
}
.wrapper .body .aticle-box .page-box .page-inner .page{
margin-left: 4px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
}
.wrapper .body .aticle-box .page-box .page-inner .active{
color: #4f4f4f;
background: #eee;
border-radius: 2px;
}
/* 尾部 */
.wrapper .foot{
width: 1000px;
margin:0 auto;
height: 200px;
clear: both;
border: 1px solid #333;
}
8028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
