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

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: #8B;

 10: }

 11: .topul li

 12: {

 13: float: right;

 14: margin-left: 25px;

 15: }

 16: .topul li a

 17: {

 18: color: #8B;

 19: text-decoration: none;

 20: }

 21: .topul li a:hover

 22: {

 23: color: #8B;

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

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

 2: 

 10: