来源：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;
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]-->
时间： 2024-10-12 16:07:56