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

￡神魔★判官ぃ 2022-08-12 16:25 200阅读 0赞

![SouthEast][]

来源：[http://www.ido321.com/842.html][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="./img/logo.png" 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="./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;

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: }

效果

![SouthEast 1][]

在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]-->

[SouthEast]: /images/20220810/fe47e18591df419ab182883472f3b563.png
[http_www.ido321.com_842.html]: http://www.ido321.com/842.html
[SouthEast 1]: /images/20220810/5fd3fded1175403d8a3e652ff179628f.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关用html写一个网站首页

相关某网站静态首页的实现小结

相关仿照某商城首页的源代码及效果

相关网站首页轮番图的后台管理

相关如何提高网站首页的访问性能

相关 Hexo自定义网站首页

相关 JavaWeb视频网站开发：实现首页小喇叭的功能

相关案例四：网站首页显示页面

相关 Flask新媒体网站首页点击排行实现

相关网站首页的图片延迟加载是怎么实现的？