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

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

header部分的实现

   1: 

   2:      

   3:          
9月25日 周四

   4:          
联系我们

   5:          
收藏本站

   6:      

   7:  

   8:  

   9:      

  10:          

  11:      

  12:      

  13:          

  14:              
首页

  15:              
校园动态

  16:              
失物招领

  17:              
二手市场

  18:              
论坛专区

  19:              
个人中心

  20:          

  21:      

  22:  

  23: 

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: 

   2:     

   3:         

   4:             1

   5:         

   6:     

   7:     

   8:     

   9:         

  10:             2

  11:         

  12:     

  13:     

  14:     

  15:         

  16:             3

  17:         

  18:     

  19: 

  20: 

  21: 

  22:     

  23:         

  24:         
最初的梦想

  25:         
2008年医工伍学秦创立

  26:     

  27:     

  28:         

  29:         
活在当下

  30:         
用爱把协会做好

  31:     

  32:     

  33:         

  34:         
展望未来

  35:         
会有个怎么样的你

  36:     

  37: 

主要的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: