实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>1008作业</title> </head> <link rel="stylesheet" type="text/css" href="./static/css/style.css"> <link rel="stylesheet" href="./static/plugins/bootstrap/css/bootstrap.min.css"> <body> <div class="header"> <div class="container"> <span class="title">我的个人博客</span> <div class="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入要查询的内容"> <span class="input-group-btn"> <button class="btn btn-default" type="button">搜索</button> </span> </div><!-- /input-group --> </div> <div class="login-reg"> <button class="btn btn-success">登录</button> <button class="btn btn-warning">发表博客</button> </div> </div> <!-- 我的个人博客--> </div> <div class="container main"> <div class="col-lg-3 content-left"> <p class="cate">博客分类</p> <div class="cate-list"> <p><a href="">JAVA</a></p> <p><a href="">pathon</a></p> <p><a href="">C##</a></p> <p><a href="">C++</a></p> <p><a href="">VB</a></p> </div> </div> <div class="content-right col-lg-9"> <div class="nav"> <a href="">热门</a> <a href="" class="active">最新</a> </div> <div class="content-list"> <div class="content-item"> <img src="./static/img/user.jpg"> <div class="title"> <p><a href="">安全策略</a></p> <div><span>30次浏览</span><span>2018-10-03 10:11:23</span></div> </div> </div> <div class="content-item"> <img src="./static/img/user.jpg"> <div class="title"> <p><a href="">安全策略</a></p> <div><span>30次浏览</span><span>2018-10-03 10:11:23</span></div> </div> </div> <div class="content-item"> <img src="./static/img/user.jpg"> <div class="title"> <p><a href="">安全策略</a></p> <div><span>30次浏览</span><span>2018-10-03 10:11:23</span></div> </div> </div> </div> <div class="pages"> <nav aria-label="..."> <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
body {padding: 0;margin: 0;background:#f1f1f1!important;}
.header{width: 100%;height: 50px;background: #563d7c;}
.header .title {color: #fff;font-size: 18px;line-height: 50px;float: left;}
.header .search{width: 300px;float: left;margin-left: 50px;line-height: 50px;}
.header .search input{float:unset;}
.header .login-reg{line-height:50px;float:right;}
.header .login-reg button{padding:6px 30px;margin-left:20px;}
.main{background:#fff;min-height:800px;margin-top:30px;border:1px solid #cdcdcd;border-radius:3px;}
.main .content-left{border-right:1px solid #cdcdcd;min-height:880px;}
.main .content-left .cate{font-size:18px;color:#666;padding:10px 0px;border-bottom:1px solid #f1f1f1;}
.main .content-left .cate-list{}
.main .nav{margin-top:30px;border-bottom:1px solid #f1f1f1;}
.main .nav a{float:right;padding:0px 16px;padding-bottom:5px;}
.main .nav .active{font-weight:bold;border-bottom:2px solid #337ab7;}
.main .content-list .content-item{float:left;margin:10px 0px;width:100%;width: 100%;border-bottom:1px solid #f1f1f1;padding-bottom:10px;}
.main .content-list .content-item img{width:40px;height:40px;border-radius:4px;float:left}
.main .content-list .content-item .title{float:left;margin-left:10px;}
.main .content-list .content-item .title p{margin-bottom:3px;}
.main .content-list .content-item .title div{font-size:12px;color:#666;}
.pages{float:right;}运行实例 »
点击 "运行实例" 按钮查看在线实例
