当前位置：Gxlcms > html代码 > 某网站静态首页的实现小结_html/css_WEB-ITnose

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

时间：2021-07-01 10:21:17 帮助过：64人阅读

来源：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:

人气教程排行