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

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

header部分的实现

<div class="top">
     <ul class="topul">
         <li id="time"><a href="#">9月25日&nbsp;周四</a></li>
         <li><a href="#">联系我们</a></li>
         <li><a href="#">收藏本站</a></li>
     </ul>
 </div>
 <div class="header">
     <div class="logo">
         <a href="#"><img src="./img/logo.png" alt="xxxxx"></a>
     </div>
     <div class="nav">
         <ul class="navul">
             <li><a href="#">首页</a></li>
             <li><a href="#">校园动态</a></li>
             <li><a href="#">失物招领</a></li>
             <li><a href="#">二手市场</a></li>
             <li><a href="#">论坛专区</a></li>
             <li><a href="#">个人中心</a></li>
         </ul>
     </div>
 </div>
</div>

header部分的css

.top
{
    margin-top: 1em;
}
.topul
{
    list-style: none;
    margin-right: 3%;
    color: #8B8989;
}
.topul li
{
    float: right;
    margin-left: 25px;
}
.topul li a
{
    color: #8B8989;
    text-decoration: none;
}
.topul li a:hover
{
    color: #8B8989;
    text-decoration: none;
}
.header
{
    margin-top: 1em;
    height:100px;
    position: relative;
    top: 0;
    left: 0;
}
.logo
{
    float: left;
}
.nav
{
    float: left;
    width: 80%;
    position: absolute;
    top:55%;
    left: 20%;
}
.navul
{
    list-style: none;
    text-align: center;
}
.navul li
{
    float: left;
    width: 12.5%;
    line-height: 200%;
    margin-left: 3.5%;
    letter-spacing: 2px;
}
.navul li a
{
    color: #000000;
    text-decoration: none;
}
.navul li a:hover
{
    color: #000000;
    text-decoration: none;
}

对于body部分，用css画圆时出现了兼容问题

<div class="shaft">
    <div class="past">
        <div class="circle">
            <a href="#"><span>1</span></a>
        </div>
    </div>
    <div class="lianjie"></div>
    <div class="now">
        <div class="circle">
            <a href="#"><span>2</span></a>
        </div>
    </div>
    <div class="lianjie"></div>
    <div class="future">
        <div class="circle">
            <a href="#"><span>3</span></a>
        </div>
    </div>
</div>
<br/><br/><br/>
<div class="maioshu">
    <div class="desc descpast">
        <img src="./img/past.png" alt="past">
        <h3>最初的梦想</h3>
        <p>2008年医工伍学秦创立</p>
    </div>
    <div class="desc descnow">
        <img src="./img/now.png" alt="now">
        <h3>活在当下</h3>
        <p>用爱把协会做好</p>
    </div>
    <div class="desc descfuture">
        <img src="./img/future.png" alt="future">
        <h3>展望未来</h3>
        <p>会有个怎么样的你</p>
    </div>
</div>

主要的css

.circle
{
     background-color:#F8F6F5;
     width: 50px;   /* div的宽和高为600px即正方形的边长为600px */
     height: 50px;
     text-align: center;

     -moz-border-radius: 25px;   /* 圆的半径为边长的一半，即300px */
     -webkit-border-radius: 25px;
     border-radius: 25px;

     display: -moz-box;
     display: -webkit-box;
     display: box;

     -moz-box-orient: horizontal;
     -webkit-box-orient: horizontal;
     box-orient: horizontal;

     -moz-box-pack: center;
     -moz-box-align: center;

     -webkit-box-pack: center;
     -webkit-box-align: center;
     box-pack: center;
     box-align: center;
     font:normal 25px/100%;
     text-shadow:1px 1px 1px #000;
     color:#000000;
}

效果

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