zoukankan      html  css  js  c++  java
  • relative与absolute的结合使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html,body,div,ul,li,a{
    margin:0; 
    padding:0; 
    list-style:none;
    }
    a, a:hover{
    color:#000;
    border:0;
    text-decoration:none;
    }
    #warp,#head,#main,#foot
    {
     962px;
    }
    /*设置居中*/
    #warp{
    margin: 0 auto;
    }
    #head{
    height:132px;
    position:relative;
    }
    .logo{
    position:absolute;
    top:17px;
    }
    .head_pic{
    position:absolute;
    top:17px;
    left:420px;
    }
    .sc{
    position:absolute;
    right:5px;
    top:12px;
    }
    .sc a{
    padding-left:20px;
    color:#666;
    }
    .nav{
    960px;
    height:42px;
    line-height:42px;
    position:absolute;
    bottom:0px;
    background:url(img/nav_bj.jpg) no-repeat center;
    }
    .nav ul{
    float:left;
    padding:0 10px;
    }
    .nav li{
    float:left;
    background:url(img/li_bj.jpg) no-repeat right center;
    padding-right:40px;
    padding-left:20px;
    text-align:center;
    display:inline;
    }
    .nav li a{
    font-size:14px;
    font-family:Microsoft YaHei !important;
    white-space:nowrap;
    }
    .nav li a:hover{
    color:#FBECB7;
    }
    </style>
    <title></title>
    </head>
    <body>
    <div id="warp">
    <div id="head">
    <div class="logo"><img src="img/logo.jpg" /></div>
    <div class="head_pic"><img src="img/head_pic.jpg" /></div>
    <div class="sc">
    <a href=""><img src="img/sc_btn.jpg" /></a>
    <a href=""><img src="img/sy_btn.jpg" /></a>
    <a href=""><img src="img/kf_btn.jpg" /></a>
    </div>
    <div class="nav">
    <ul>
    <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>
    <li><a href="">合作银行</a></li>
    <li><a href="">联系我们</a></li>
    </ul>
    </div>
    </div>
    <div id="main"></div>
    <div id="foot"></div>
    </div>
    </body>
    </html>
    
  • 相关阅读:
    试图运行项目时出错,无法启动调试。没有正确安装调试器(转帖)
    IIS 401.2
    windows 2008 r2 64位运行crystal 2008的问题
    .net 命令行
    crystal report 2008 公式字段问题
    vs2003在IE8下无法调试的解决办法 (包括win2008 64位)
    Oninit里不能用ViewState
    web 开发的一些软件
    silverlight toolkit
    SqlConnection.Open的一些问题
  • 原文地址:https://www.cnblogs.com/wupeng88/p/4655297.html
Copyright © 2011-2022 走看看