页面公用的部分

 

<header>
    <div class="header">
        <div class="top">
            <div class="top_con">
                <div class="weixin" id="weixin" onMouseOver="show_weixin()" onMouseOut="hide_weixin()">
                    <img alt="微信" src="images/weixin.png" align="absmiddle"/>
                    <div class="weixin_con" id="weixin_con" style="display:none">
                        <img src="images/contact_weixin.gif" alt="微信二维码"/>
                    </div>
                </div>
                <div class="weibo">
                    <a href="http://weibo.com/23542345" rel="noFollow" target="_blank"><img alt="微博"
                                                                                            src="images/xinlang.png"
                                                                                            align="absmiddle"/></a>
                </div>
                <div class="tel">
                    咨询热线：400 800 9385
                </div>
                <div class="mail">
                    咨询邮箱：sales@23542345.cn
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <div class="head_bg">
            <div class="head">
                <div class="logo fl">
                    <h1><a href="index.html"><img alt="深圳网站建设" src="images/logo.jpg" width="151px" height="39px"/></a>
                    </h1>
                </div>
                <div class="menu fr">
                    <nav>
                        <ul>
                            <li><a id="menu1" href="index.html">网站首页</a></li>
                            <li><a id="menu2" href="about.html">关于</a></li>
                            <li><a id="menu3" href="cases.html">成功案例</a></li>
                            <li><a id="menu4" href="service.html">服务范围</a></li>
                        </ul>
                        <div class="clear"></div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>

.top {
    background: url(../images/top_bg.gif) repeat-x;
    height: 40px;
    width: 100%;
    margin: 0 auto;
    line-height: 40px;
}

.top_con {
    width: 1200px;
    margin: 0 auto;
    text-align: right;
}

.top_con {
}

.top_con .mail {
    color: #4bcdd9;
    font-family: Arial;
    float: right;
    background: url(../images/mail.png) no-repeat 0px 14px;
    padding-left: 18px;
    padding-right: 13px;
}

.top_con .tel {
    color: #ffb243;
    font-family: Arial;
    float: right;
    background: url(../images/tel.png) no-repeat 0px 13px;
    padding-left: 20px;
    padding-right: 13px;
}

.top_con .weixin {
    float: right;
    padding-right: 13px;
    line-height: 16px;
    position: relative;
    cursor: pointer;
    height: 16px;
    margin-top: 12px;
    padding-bottom: 12px;
    z-index: 100000000;
}

.top_con .weixin_sel {
    float: right;
    padding-right: 13px;
    line-height: 16px;
    position: relative;
    cursor: pointer;
    height: 16px;
    margin-top: 12px;
    padding-bottom: 12px;
    z-index: 100000000;
}

.top_con .weixin_con {
    position: absolute;
    left: 0px;
    top: 28px;
    padding: 20px 20px 15px 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 100000000;
}

.top_con .weibo {
    float: right;
    padding-right: 13px;
    height: 16px;
    line-height: 16px;
    margin-top: 10px;
}




.head {
    width: 1200px;
    margin: 0 auto;
    height: 100px;
}

.logo {
    margin: 0px;
    padding: 0px;
    height: 39px;
    line-height: 39px;
    margin-top: 30px;
}

.menu {
    font-family: "微软雅黑";
    font-size: 16px;
    line-height: 100px;
}

.menu ul li {
    float: left;
    width: 105px;
    text-align: center;
}

.menu ul li a {
    display: block;
}

.menu ul li a:hover, .menu ul li a.a1 {
    background: url(../images/menu_hover_bg.gif) no-repeat;
    color: #FFF;
}

 

<div class="footer2" id="footer">
        <a name="foot"></a>
        <div class="footer_con">
            <div class="footer_dl">
                <dl>
                    <dt>
                        关于
                    </dt>
                    <dd>
                        <a href="about.html">关于我们</a>
                    </dd>
                    <dd>
                        <a href="service.html">服务项目</a>
                    </dd>
                    <dd>
                        <a href="contact.html">联系我们</a>
                    </dd>
                    <dd>
                        <a href="/contact/pay.html">付款方式</a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        经典案例
                    </dt>
                    <dd>
                        <a href="/cases/list-3-1.html">企业网站</a>
                    </dd>
                    <dd>
                        <a href="/cases/list-8-1.html">旅游网站</a>
                    </dd>
                    <dd>
                        <a href="/cases/list-9-1.html">购物商城</a>
                    </dd>
                    <dd>
                        <a href="/cases/list-10-1.html">外贸网站</a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        服务范围
                    </dt>
                    <dd>
                        <a href="service.html">空间域名</a>
                    </dd>
                    <dd>
                        <a href="service.html">网站策划</a>
                    </dd>
                    <dd>
                        <a href="service.html">网站建设</a>
                    </dd>
                    <dd>
                        <a href="service.html">手机网站</a>
                    </dd>
                </dl>
                <dl class="footer_dl2" style="width:340px;">
                    <dt>
                        联系我们
                    </dt>
                    <dd>
                        <img src="images/xinlang.png" alt="网络官方微博"/>
                        <a href="http://weibo.com/23542345" rel="noFollow" target="_blank">官方微博:
                            xxx</a>
                    </dd>
                    <dd>
                        <img src="images/mail.png" alt="网站建设咨询邮箱"/>
                        <a href="mailto:sales@23542345.cn"> 咨询邮箱：xxxx</a>
                    </dd>
                    <dd>
                        <img src="images/tel.png" alt="网站建设咨询电话"/> 咨询热线：xxx
                    </dd>
                    <dd>
                        <img src="images/weixin.png" alt="网站建设"/>微信：网站建设
                    </dd>
                </dl>
                <form method="post" action="/Feedback">
                    <dl class="footer_dl3">
                        <dt>
                            给我们留言
                        </dt>
                        <dd>
                            <input name="name" class="input" type="text" value="你的称呼（必填）"
                                   onFocus="if(this.value='你的称呼（必填）')this.value=''"
                                   onBlur="if(this.value=='')this.value=='你的称呼（必填）'"/>
                        </dd>
                        <dd>
                            <input name="tel" class="input" type="text" value="你的电话（必填）"
                                   onFocus="if(this.value='你的电话（必填）')this.value=''"
                                   onBlur="if(this.value=='')this.value=='你的电话（必填）'"/>
                        </dd>
                        <dd>
                            <textarea name="content" cols="" rows=""></textarea>
                        </dd>
                        <dd>
                            <input type="image" alt="提交留言" src="images/submit_button.png"/>
                        </dd>
                    </dl>
                </form>
                <div class="clear"></div>
            </div>
        </div>
    </div>

.footer {
    width: 100%;
    margin: 0 auto;
    background: url(../images/footer_bg.gif) repeat-x;
    height: 404px;
}

.footer2 {
    width: 100%;
    margin: 0 auto;
    background: url(../images/footer_bg.gif) repeat-x;
    height: 284px;
}

.footer_con {
    width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
}

.footer_dl {
    height: 280px;
}

.footer_dl dl {
    float: left;
    line-height: 34px;
    width: 205px;
}

.footer_dl dl dt {
    font-size: 18px;
    font-family: "微软雅黑";
    font-weight: bold;
    padding-bottom: 20px;
}

.footer_dl3 dd {
    margin-bottom: 7px;
    margin-right: 0;
}

.footer_dl dl dd input.input, .footer_dl dl dd textarea {
    color: #999;
    border: #d8d8d8 1px solid;
    width: 230px;
    padding-left: 5px;
}

.footer_dl3 dd input.input {
    height: 26px;
    line-height: 26px;
}

.footer_dl3 dd textarea {
    height: 52px;
    height: 26px;
    padding-top: 5px;
}

.footer_dl dl dd a:hover {
    color: #666;
    text-decoration: underline;
}

.footer_dl2 dd img {
    margin-right: 10px;
    margin-top: 10px;
}

 

<div class="bottom">
        <div class="bottom_con">
            @2013 版权所有 深圳网络科技有限公司 地址：深圳市罗湖区春风路桂都大厦 电话：0755-123521
        </div>
    </div>

.bottom {
    width: 100%;
    margin: 0 auto;
    background: url(../images/bottom_bg.gif) repeat-x;
    height: 65px;
    line-height: 65px;
}

.bottom_con {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #666;
}

 

/* 导航栏 */
.case_class ul li {
    float: left;
    margin-right: 10px;
    font-size: 18px;
    width: 100px;
    height: 36px;
    font-family: "微软雅黑";
    line-height: 36px;
    text-align: center;
}

/* 按钮边框 */
.case_class ul li a {
    display: block;
    border: 1px solid #ccc;
}

.case_class ul li a:hover, .case_class ul li a.a2 {
    background: #4bcdd9;
    color: #fff;
    border: 1px solid #4bcdd9;
}

 

.case_int {
    color: #999;
    line-height: 20px;
    border-top: 1px solid #eee;
    padding: 20px;
    background: #fafafa;
}