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;
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;
}