某网站静态首页的实现小结_html/css_WEB-ITnose

 

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

header部分的实现

   1: <div class="top">

   2:      <ul class="topul">

   3:          <li id="time"><a href="#">9月25日 周四</a></li>

   4:          <li><a href="#">联系我们</a></li>

   5:          <li><a href="#">收藏本站</a></li>

   6:      </ul>

   7:  </div>

   8:  <div class="header">

   9:      <div class="logo">

  10:          <a href="#"><img src="/static/imghwm/default1.png"  data-src="./img/logo.png"  class="lazy" alt="xxxxx"></a>

  11:      </div>

  12:      <div class="nav">

  13:          <ul class="navul">

  14:              <li><a href="#">首页</a></li>

  15:              <li><a href="#">校园动态</a></li>

  16:              <li><a href="#">失物招领</a></li>

  17:              <li><a href="#">二手市场</a></li>

  18:              <li><a href="#">论坛专区</a></li>

  19:              <li><a href="#">个人中心</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="/static/imghwm/default1.png"  data-src="./img/past.png"  class="lazy" alt="past">

  24:         <h3 id="最初的梦想">最初的梦想</h3>

  25:         <p>2008年医工伍学秦创立</p>

  26:     </div>

  27:     <div class="desc descnow">

  28:         <img src="/static/imghwm/default1.png"  data-src="./img/now.png"  class="lazy" alt="now">

  29:         <h3 id="活在当下">活在当下</h3>

  30:         <p>用爱把协会做好</p>

  31:     </div>

  32:     <div class="desc descfuture">

  33:         <img src="/static/imghwm/default1.png"  data-src="./img/future.png"  class="lazy" alt="future">

  34:         <h3 id="展望未来">展望未来</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]-->