頁面公用的部分

 

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

head

.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;
}

css

 

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

info

.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;
}

css

 

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

css

 

/* 導航欄 */
.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;
}