首页 > 代码库 > 某站点静态首页的实现小结

某站点静态首页的实现小结

技术分享


来源:http://www.ido321.com/842.html

header部分的实现

   1: <div class="top">
   2:      <ul class="topul">
   3:          <li id="time"><a href="http://www.mamicode.com/#">9月25日&nbsp;周四</a></li>
   4:          <li><a href="http://www.mamicode.com/#">联系我们</a></li>
   5:          <li><a href="http://www.mamicode.com/#">收藏本站</a></li>
   6:      </ul>
   7:  </div>
   8:  <div class="header">
   9:      <div class="logo">
  10:          <a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/logo.png" alt="xxxxx"></a>
  11:      </div>
  12:      <div class="nav">
  13:          <ul class="navul">
  14:              <li><a href="http://www.mamicode.com/#">首页</a></li>
  15:              <li><a href="http://www.mamicode.com/#">校园动态</a></li>
  16:              <li><a href="http://www.mamicode.com/#">失物招领</a></li>
  17:              <li><a href="http://www.mamicode.com/#">二手市场</a></li>
  18:              <li><a href="http://www.mamicode.com/#">论坛专区</a></li>
  19:              <li><a href="http://www.mamicode.com/#">个人中心</a></li>
  20:          </ul>
  21:      </div>
  22:  </div>
  23: </div>

header部分的css

   1: .top
   2: {
   3:     margin-top: 1em;
   4: }
   5: .topul
   6: {
   7:     list-style: none;
   8:     margin-right: 3%;
   9:     color: #8B8989;
  10: }
  11: .topul li
  12: {
  13:     float: right;
  14:     margin-left: 25px;
  15: }
  16: .topul li a
  17: {
  18:     color: #8B8989;
  19:     text-decoration: none;
  20: }
  21: .topul li a:hover
  22: {
  23:     color: #8B8989;
  24:     text-decoration: none;
  25: }
  26: .header
  27: {
  28:     margin-top: 1em;
  29:     height:100px;
  30:     position: relative;
  31:     top: 0;
  32:     left: 0;
  33: }
  34: .logo
  35: {
  36:     float: left;
  37: }
  38: .nav
  39: {
  40:     float: left;
  41:     width: 80%;
  42:     position: absolute;
  43:     top:55%;
  44:     left: 20%;
  45: }
  46: .navul
  47: {
  48:     list-style: none;
  49:     text-align: center;
  50: }
  51: .navul li
  52: {
  53:     float: left;
  54:     width: 12.5%;
  55:     line-height: 200%;
  56:     margin-left: 3.5%;
  57:     letter-spacing: 2px;
  58: }
  59: .navul li a
  60: {
  61:     color: #000000;
  62:     text-decoration: none;
  63: }
  64: .navul li a:hover
  65: {
  66:     color: #000000;
  67:     text-decoration: none;
  68: }

对于body部分,用css画圆时出现了兼容问题

   1: <div class="shaft">
   2:     <div class="past">
   3:         <div class="circle">
   4:             <a href="#"><span>1</span></a>
   5:         </div>
   6:     </div>
   7:     <div class="lianjie"></div>
   8:     <div class="now">
   9:         <div class="circle">
  10:             <a href="#"><span>2</span></a>
  11:         </div>
  12:     </div>
  13:     <div class="lianjie"></div>
  14:     <div class="future">
  15:         <div class="circle">
  16:             <a href="#"><span>3</span></a>
  17:         </div>
  18:     </div>
  19: </div>
  20: <br/><br/><br/>
  21: <div class="maioshu">
  22:     <div class="desc descpast">
  23:         <img src="./img/past.png" alt="past">
  24:         <h3>最初的梦想</h3>
  25:         <p>2008年医工伍学秦创立</p>
  26:     </div>
  27:     <div class="desc descnow">
  28:         <img src="./img/now.png" alt="now">
  29:         <h3>活在当下</h3>
  30:         <p>用爱把协会做好</p>
  31:     </div>
  32:     <div class="desc descfuture">
  33:         <img src="./img/future.png" alt="future">
  34:         <h3>展望未来</h3>
  35:         <p>会有个怎么样的你</p>
  36:     </div>
  37: </div>

基本的css

   1: .circle
   2: {
   3:      background-color:#F8F6F5;
   4:      width: 50px;   /* div的宽和高为600px即正方形的边长为600px */
   5:      height: 50px;
   6:      text-align: center;
   7:
   8:      -moz-border-radius: 25px;   /* 圆的半径为边长的一半,即300px */
   9:      -webkit-border-radius: 25px;
  10:      border-radius: 25px;
  11:
  12:      display: -moz-box;
  13:      display: -webkit-box;
  14:      display: box;
  15:
  16:      -moz-box-orient: horizontal;
  17:      -webkit-box-orient: horizontal;
  18:      box-orient: horizontal;
  19:
  20:      -moz-box-pack: center;
  21:      -moz-box-align: center;
  22:
  23:      -webkit-box-pack: center;
  24:      -webkit-box-align: center;
  25:      box-pack: center;
  26:      box-align: center;
  27:      font:normal 25px/100%;
  28:      text-shadow:1px 1px 1px #000;
  29:      color:#000000;
  30: }

效果

技术分享

在IE中。数字1,2,3不能居中,所以后来加个span(之前没有),用IE hacks解决

   1: <!--[if IE]>
   2:   <style type="text/css">
   3:     .circle span
   4:     {
   5:         display:block;
   6:         padding-top:12px;
   7:         font-weight:bold;
   8:     }
   9:   </style>
  10: <![endif]-->

某站点静态首页的实现小结