css布局1

weixin_30614109

于 2015-02-18 12:05:00 发布

阅读量52

点赞数

原文链接：http://www.cnblogs.com/jinkspeng/p/4295705.html

版权

body

<body>
 <header id='title'>
    <h1>Holla</h1>
 </header>

 <div id='content'>
    <div class='sidebar'>
      <h3>Channels</h3>
      <ul>
        <li class='active'>Developers</li>
        <li>Sales</li>
        <li>Marketing</li>
        <li>Ops</li>
      </ul>
    </div>
    <div class='main'>
    </div>
 </div>
</body>

css-body

 body,html{
        margin: 0;
        padding: 0;
     }
     body{
        font-family: Helvetica, Arial, sans-serif;
        font-size: 16px;
        color: #363636;
        background: #d2d2d2;
        line-height: 1.2em;
     }

css-h

h1, h2{
        font-weight: bold;
        text-shadow: 0 1px 1px #fff;
     }
     h1{
        font-size: 24px;
        color: #404040;
     }
     h2{
        font-size: 21px;
        color: #404040;
        margin: 1em 0 0.7em 0;
     }
     h3{
        font-size: 15px;
        color: #404040;
        text-shadow: 0 1px 1px #fff;
     }

css-title

 #title{
        border-bottom: 1px solid #535353;
        overflow: hidden;
        height:  50px;
        line-height: 50px;
        background: #575859;
        
        background: -webkit-gradient(linear, left top, left bottom, from(#575859), to(#272425));
        background: -webkit-linear-gradient(top,#575859,#272425);
        background: -moz-linear-gradient(top,#575859,#272425);
        background: linear-gradient(top,#575859,#272425);
     }
     #title h1{
        color: #fff;
        text-shadow: 0 1px 1px #000;
        margin: 0 10px;
     }

css-content

 #content{
        overflow: hidden;
        /*正文div会覆盖整个页面,但会空出头部50px*/
        position: absolute;
        left: 0;
        right: 0;
        top: 50px;
        bottom: 0;
        /*子元素水平对齐*/
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-align: stretch;
        -webkit-box-pack: start;
        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-align: stretch;
        -moz-box-pack: start;
     }

css-sidebar

#content .sidebar{
        background: #ededed;
        width: 200px;
        /*此栏有固定高度*/
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;

        overflow: overlay;
    }
    #content .sidebar ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #content .sidebar ul li{
      display: block;
      padding: 10px 10px 7px 20px;
      border-bottom: 1px solid #cdcdcd;
      cursor: pointer;
      -moz-box-shadow: 0 1px 1px #fcfcfc;
      -webkit-box-shadow: 0 1px 1px #fcfcfc;
      box-shadow: 0 1px 1px #fcfcfc;
    }
    #content .sidebar ul li.active{
      color: #fff;
      text-shadow: 0 1px 1px #46677f;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;

      background: #7bb5db;
      background: -webkit-gradient(linear, left top, left bottom, from(#7bb5db), to(#4775b8));
      background: -webkit-linear-gradient(top, #7bb5db, #4775b8);
      background: -moz-linear-gradient(top, #7bb5db, #4775b8);
      background: linear-gradient(top, #7bb5db, #4775b8);
    }

css-main

#content .main{
      -moz-box-shadow: inset 0 1px 3px #7f7f7f;
      -webkit-box-shadow: inset 0 1px 3px #7f7f7f;
      box-shadow: inset 0 1px 3px #7f7f7f;

      /*希望main可以尽可能地伸展开*/
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;

      overflow: overlay;
      padding: 20px;
    }

转载于:https://www.cnblogs.com/jinkspeng/p/4295705.html

weixin_30614109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局1

body<body> <header id='title'> <h1>Holla</h1> </header> <div id='content'> <div class='sidebar'> <h3>Channels</h3> <u...
复制链接

扫一扫