console
<body class="zhengti">
<div class="zhengti1">
<div class="header">
<div class="header1 navbar-fixed-top">
<a href="#main1-2" class="col-sm-4"><h4><b>作者资料</b></h4></a>
<a href="#main2-1" class="col-sm-4"><h4><b>作品集锦</b></h4></a>
<a href="#main3-1"class="col-sm-4"><h4><b>联系作者</b></h4></a>
</div>
</div>
<div class="neirong ">
<div class="nav">
<div class="nav1">
<h3 style="color:white"><b>知名网站导航</b></h3>
<a href="#"> <div class="nav1-1"></div>
<h4><b>菜鸟</b></h4></a>
<a href="#"> <div class="nav1-2"></div>
<h4><b>github</b></h4></a>
<a href="#"><div class="nav1-3"></div>
<h4><b>codecademy</b></h4></a>
<a href="#"> <div class="nav1-4"></div>
<h4><b>萌码</b></h4></a>
</div>
</div>
<div class="main">
<div class="main1" id="main1-2" >
<div class="main1-2-1">
<h2 align="center">作者资料</h2>
<div class="col-sm-8 ">
<h3 > <p>姓名：Bihz | 年龄：21 | 性别：男 | 国籍：中国</p></h3><hr />
<h4><p><b>作者简介</b>：接触代码两年多，代码届的无名小辈，对高端代码<br/>接触不多，理解不深。踏上程序猿的道路一去不复返。</p></h4>
<h4><p><b>作者履历</b>：目前就读于洛阳师范学院-信息技术学院</p></h4>
<h4><p><b>作者理想</b>：好好学习，天天向上，啊啊啊啊</p></h4>
<h4><p><b>作者名言</b>：只要敲不死就往死里敲</p></h4>
<h4><p><b>作者邮箱</b>：845196887@qq.com/bihuizhong@sina.com</p></h4>
</div>
<div class="main1-1 col-sm-4 "></div></div>
</div><hr />
<div class="main2">
<div style="background-color:#E9967A">
<h2 align="center" id="main2-1">作品集锦</h2>
<div class="col-sm-6">
<a href="#" class="thumbnail">
<img src="http://www.85work.com/uploads/allimg/140620/1-14062011521J27.jpg"
alt="作者作品">
</a>
</div>
<div class="col-sm-6">
<a href="#" class="thumbnail">
<img src="http://www.85work.com/uploads/allimg/150104/1-150104094451Y8.jpg"
alt="作者作品">
</a>
</div>
<div class="col-sm-6">
<a href="#" class="thumbnail">
<img src="http://www.85work.com/uploads/allimg/131028/1-13102Q15R43R.jpg"
alt="作者作品">
</a>
</div>
<div class="col-sm-6">
<a href="#" class="thumbnail">
<img src="http://www.85work.com/uploads/allimg/141127/1-14112H2162U29.jpg"
alt="作者作品">
</a>
</div>
</div>
</div>
<div class="main3">
<div style="background-color:#daa520">
<h2 align="center" id="main3-1">联系作者</h2>
<div align="center">
<lable>邮箱</lable><input type="email" placeholder="请输入您的邮箱" ><br />
<lable>电话</lable> <input type="tel" placeholder="请输入您的联系电话"><br />
<lable>留言</lable> <input type="text" placeholder="请输入您的留言"><br />
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-send"></span> 提交
</a>
</div>
</div>
</div>
</div>
<div class="aside ">
<div class="aside1">
<h4 align="center">访客中心 <span class="glyphicon glyphicon-user"></span></h4><hr />
<h4 align="center">
<a href="#">
<span class="glyphicon glyphicon-heart " style="font-size:60px;color:red"></span>
</a><br />
点赞
</h4>
<h4 align="center">
<a href="#">
<span class=" glyphicon glyphicon-thumbs-down " style="font-size:60px;color:black"></span>
</a><br />
吐槽
</h4>
<h4 align="center">
<a href="#">
<span class=" glyphicon glyphicon-comment " style="font-size:60px"></span>
</a><br />
建议
</h4>
</div>
</div>
</div>
<div class="footer">
<h4 style="float:right">详情请联系845196887@qq.com</h4>
</div>
</div>
</body>
.zhengti{
display:flex;
flex-direction:column;
background:url(http://img3.imgtn.bdimg.com/it/u=1818339360,2722779475&fm=26&gp=0.jpg)no-repeat;
background-size:100% 100%;
}
.zhengti1{
flex-direction:row;
flex:1;
}
.header{
margin:auto;
height:50px;
flex:1;
text-align:center;
}
.header1{
background-color:#FFFF33;
padding:0px;
}
.neirong{
display:flex;
flex-direction:row;
justify-content:space-between;
flex:1;
}
.nav{
background-color:white;
width:200px;
height:700px;
background:url()no-repeat;
background-size:100% 100%;
border-style:outset;
border-color:#999900;
text-align:center;
}
.nav1-1{ width:100px;
height:100px;
border-radius:100%;
background:url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1789315312,3442423179&fm=117&gp=0.jpg)no-repeat;
background-size:100% 100%;
margin:auto;
}
.nav1-2{ width:100px;
height:100px;
border-radius:100%;
background:url(http://img5.imgtn.bdimg.com/it/u=3935285181,2276375442&fm=26&gp=0.jpg)no-repeat;
background-size:100% 100%;
margin:auto;
}
.nav1-3{ width:100px;
height:100px;
border-radius:100%;
background:url(http://img4.imgtn.bdimg.com/it/u=3928832932,109320252&fm=26&gp=0.jpg)no-repeat;
background-size:100% 100%;
margin:auto;
}
.nav1-4{ width:100px;
height:100px;
border-radius:100%;
background:url(http://img5.imgtn.bdimg.com/it/u=2307276528,3438082251&fm=26&gp=0.jpg)no-repeat;
background-size:100% 100%;
margin:auto;
}
.main{
background-color:white;
display:flex;
flex-direction:column;
width:900px;
border-style:dashed;
}
.main1{
padding:15px;
}
.main2{
padding:15px;
}
.main3{
padding:15px;
}
.main1-2-1{
background-color:#8FBC8F;
}
.aside{
background-color:white;
border-style:outset;
border-color:#999900;
width:100px;
height:400px;
}
.aside1{
}
.footer{
background-color:#FF99FF;
margin:auto;
flex:1;
text-align:center;
}
.main1-1{
width:250px;
height:250px;
border-radius:100%;
background:url(http://img4.imgtn.bdimg.com/it/u=3258776134,1520743420&fm=200&gp=0.jpg)no-repeat;
background-size:100% 100%;
margin:auto;
}