personalblog

personalBlog

loginRegist页面结构

 

<div class="navbar-collapse nostyle collapse clearfix">
                <ul class="nav navbar-nav  inner">
                    <li class="navactive">
                        <a href="index.html">首页</a>
                    </li>
                    <li>
                        <a href="#">前端</a>
                    </li>
                    <li>
                        <a href="#">.NET</a>
                    </li>
                    <li>
                        <a href="#">随笔</a>
                    </li>
                    <li>
                        <a href="#">留言</a>
                    </li>
                </ul>
                <div class="pull-right loginRegister">
                    <a class="login" href="#">登录</a>
                    <a class="register" href="#">注册</a>
                </div>
            </div>

css 样式代码

 

/*loginReginster  start*/
.loginRegister {
  display: inline-block;
  margin-top: 10px; }
  .loginRegister a {
    display: inline-block;
    padding: 8px 20px;
    margin: 0 4px;
    color: #fff; }
  .loginRegister a.login {
    background-color: #fc3e24; }
  .loginRegister a.register {
    background-color: #7abb15; }

@media (max-width: 991px) and (min-width: 768px) {
  nav.navbar .container div.navbar-collapse ul.navbar-nav li a {
    padding: 16px; } }
@media (max-width: 767px) {
  .loginRegister {
    margin: 0 0 20px 0; } }
/*loginReginster  end*/

 

 

scss源码

 

/*loginReginster  start*/
 .loginRegister{
    display:inline-block;
    margin-top:10px;
    a{
        display:inline-block;
        padding:8px 20px;
        margin:0 4px;
        color:#fff;
    }
    a.login{
        background-color: $maincolor;
    }
    a.register{
        background-color: #7abb15;
    }
 }

 @media (max-width:991px) and (min-width:768px){
    nav.navbar{
         .container{
            div.navbar-collapse{
                ul.navbar-nav{
                    li{
                        a{
                            padding:16px;
                        }
                    }
                }
            }
         }
    }
 }

 @media (max-width:767px){
    .loginRegister{
        margin:0 0 20px 0;
    }
 }
/*loginReginster  end*/