main.css

/* 全局样式 */
h3,
p {
  padding: 20px;
}
img{
    width: 100%;
    max-width: 100%;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.container {
  width: 960px;
  margin: 0 auto;
}

#header{
  height: 80px;
}
#header span{
  font-size: 50px;
  line-height: 80px;
}
#footer,
#mainbody,
#sidebar {
  height: 100px;
  line-height: 25px;
  background: #eee;
  margin-bottom: 20px;
}
#mainbody,
#sidebar {
  height: 300px;
  float: left;
}
#mainbody {
  width: 620px;
  margin-right: 20px;
  background: #ddefcb;
}
#sidebar {
  width: 320px;
  background: #ffcbdd;
}
#footer {
  clear: both;
}

/* 导航 */
#nav{
  line-height: 25px;
  margin-bottom: 20px;
  color: #999;
}
.container_innav{
    height: 73px;
    position: relative;
  z-index: 100;
}

/* 导航菜单 */
#nav li,
#nav li a {
  display: inline-block;
  padding: 7px 15px;
  text-decoration: none;
  color: #3b3b3b;
}
#nav li a:hover {
  background: #eee;
}
#nav .active {
  background: #eee;
}
.toggle-btn {
  display: none;
}
 
/* Media Queries */
@media (max-width: 767px) {

  /* 切换按钮 */
  .toggle-btn {
    display: inline-block;
    font-size: 25px;
    text-decoration: none;
    background: #000;
    color: #fff;
    padding: 7px 10px;
    position: absolute;
    right: 10px;
  }

  /* 隐藏关闭按钮 */
  .close {
    display: none;
  }
  /* 初始隐藏导航 */
  #nav_con {
    display: none;
  }
  
  /* 导航为目标状态时的样式 */
  #nav:target #nav_con {
    display: block;
    background: #000;
    width: 100%;
    position: relative;
    top: 35px;
  }
  /* 目标状态下的导航的 li 与 a */
  #nav:target li,
  #nav:target li a {
    display: block;
    color: #eee;
    text-align: left;
  }
  /* 目标状态下的导航的列表下的 a 标签的悬停样式 */
  #nav:target li a:hover {
    background: #3b3b3b;
  }
  /* 目标状态下导航的激活状态的样式 */
  #nav:target .active {
    background: #272727;
  }
  /* 导航为目标状态的时候显示关闭按钮 */
  #nav:target .close {
    display: inline-block;
  }
}

#content{
}

#home{
    display: none;
}






 
  


/* Swipe 幻灯片 */
.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
  }
  .swipe-wrap {
    overflow: hidden;
    position: relative;
  }
  .swipe-wrap > div {
    float:left;
    width:100%;
    position: relative;
  }

  .slider-control .left{
    position: absolute;
    left: 20px;
    top: 45%;
  }
  
  .slider-control .right{
    position: absolute;
    right: 20px;
    top: 45%;
  }
  
  .slider-control button{
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    background: #000;
    color: #fff;
    border: 3px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0.7;
    display: none;
  }
  
  .swipe:hover button{
    display: block;
  }
  
  .slider-control button:hover{
    opacity: 0.5;
  }










  
  /* 响应式设计 */
  /* 设置三个断点分别为：屏幕宽度大于1200，小于960，小于767 */
  
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
    #mainbody {
      width: 770px;
      margin-right: 30px;
    }
    #sidebar {
      width: 370px;
    }
  }
  
  @media (max-width: 959px) {
    .container {
      width: 100%;
    }
    #mainbody {
      width: 67%;
    }
    #sidebar {
      width: 30%;
      float: right;
    }
  }
  
  @media (max-width: 767px) {
    #mainbody,
    #sidebar {
      float: none;
      width: 100%;
    }
  }