bootstrap左右布局

来源：开发者投稿于 2019-03-24 被查看 45534 次评论：192

bootstrap左右布局

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap左右布局</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="css.css" rel="stylesheet">
<style>
@font-face {
font-family: 'Glyphicons Halflings';
src:url('fonts/glyphicons-halflings-regular.eot')
src: url('fonts/glyphicons-halflings-regular.eot"code" >

css 代码片段

@charset "UTF-8";
/* CSS Document */
html,body{
    color:#505050;
    line-height:1.75em;
    background:#ebebeb;
    font-family:Arial, Helvetica, sans-serif;
    }

.main-header{
    text-align:center;
    padding:42px 0;
    background:url(images/banner_01.jpg) no-repeat;
    }

a{
    color:#56146c;
    outline:none;
    text-decoration:none;
    }
a:active,a:focus,a img{
    outline:none
    }
.main-navigation{
    text-align:center;
    background:#fff;
    border-top:1px solid #ebebeb;
    border-bottom:3px solid #e1e1e1;
    color:#56146c
    }
.main-navigation .menu {
  padding: 0;
  margin: 0;
}
.main-navigation .menu li {
  list-style: none;
  display: inline-block;
  position: relative;
}
.main-navigation .menu li.nav-current {
  border-bottom: 2px solid #56146c;
  margin-bottom: -2px;
}
.main-navigation .menu li a {
  color: #56146c;
  line-height: 4em;
  display: block;
  padding: 0 21px;
  font-weight:bold;
  font-size:14px;
  text-decoration:none
}
.main-navigation .menu li:hover > a {
  color: #333;
  text-decoration: none;
}

.main-navigation .menu li ul li {
  display: block;
  margin: 0;
}

.post{
    padding:35px;
    background:#fff;
    margin-bottom:35px;
    position:relative;
    overflow:hidden;
    margin-top:40px;
    }
.post .cont-head{
    text-align:center;
    font-size:0.6em;
    }
.post .cont-head .post-title{
    margin:0;
    font-size:2.5em;
    line-height:1em
    }
.post .cont-head .post-title a{
    color:#303030;
    }
.post .cont-head .cont-meta{
    color:#959595;
    margin:12px 0;
    font-size:14px;

    }
.cont-content{
    color:#444443;
    }
.cont-content p{
    margin-top:0;
    margin-bottom:1.46em
    }
.btn-default{
    border:1px solid #56146c;
    background:#56146c;
    color:#fff;
    transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
    }
.btn{
    padding:7px 14px;
    border-radius:2px;
    }
.pagination {
  margin: 0 0 35px;
  text-align: center;
  display: block;
}
.pagination a {
  text-align: center;
  display: inline-block;
  color: #ffffff;
  background: #56146c;
  border-radius: 2px;
}
.pagination a a:hover {
  background: #505050;
  text-decoration: none;
  color: #ffffff;
}

.pagination .page-number {
  background: #56146c;
  color: #ffffff;
  margin: 0 3px;
  display: inline-block;
  line-height: 36px;
  padding: 0 14px;
  border-radius: 2px;
}
.pagination .page-next{
    padding:5px;
    width:25px;
    text-decoration:none;
    text-align:center center;
    font-weight:bold
    }

.pull-left a{
    font-size:14px;
    color:#999;
    text-decoration:none;
    margin-top:2px;
    vertical-align:middle
    }
.sidebar .widget{
    background:#fff;
    padding:21px 30px;
    }

.widget .title{
    margin-top:0;
    padding-bottom:7px;
    border-bottom:1px solid #ebebeb;
    margin-bottom:21px;
    position:relative
    }
.sidebar{
    padding-top:40px;
    }
.widget{
    text-transform:uppercase;
    margin-bottom:35px;
    }

.widget .tag-menu a:hover{
    background:#56146c;
    color:#fff;
    border:1px solid #56146c;
    text-decoration:none
    }
.main-footer{
    background:#202020;
    padding-top:25px;
    }

.main-footer .widget {
  padding: 0px 30px;
}
.widget {
  margin-bottom: 35px;
}
.widget .title:after {
  content: "";
  width: 90px;
  height: 1px;
  background: #56146c;
  position: absolute;
  left: 0;
  bottom: -1px;
}

.widget .recent-post .recent-single-post:last-child {
  margin-bottom: 0;
}
.widget .recent-post .recent-single-post .post-title {
  color: #505050;
  -webkit-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
          transition: all 0.2s ease;
}
.widget .recent-post .recent-single-post .post-title:hover {
  color: #56146c;
  text-decoration: none;
}
.widget .recent-post .recent-single-post .date {
  color: #959595;
}
.widget .tag-menu a {
  border: 1px solid #ebebeb;
  padding: 2px 7px;
  color: #959595;
  line-height: 1.5em;
  display: inline-block;
  margin: 0 7px 7px 0;
  -webkit-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

bootstrap左右布局

bootstrap左右布局

相关文章

相关阅读

用户评论