亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 49
粉絲 1
評(píng)論 0
訪問(wèn)量 52716
相關(guān)推薦
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
一個(gè)簡(jiǎn)易的企業(yè)站點(diǎn)（利用css定義來(lái)做一個(gè)靜態(tài)的網(wǎng)頁(yè)）2019年4月30日20點(diǎn)
Nick的博客
原創(chuàng)
1219人瀏覽過(guò)

完成一個(gè)簡(jiǎn)易的企業(yè)站點(diǎn)，首先創(chuàng)建好主頁(yè)index.html，同時(shí)創(chuàng)建好頭部樣式表header.css，底部樣式表footer.css和主頁(yè)用的樣式表index.css



實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <title>雙飛翼布局案例</title>
</head>
<body>

<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首頁(yè)</a></li>
            <li class="item"><a href="news.html">公司新聞</a></li>
            <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
            <li class="item"><a href="about.html">關(guān)于我們</a></li>
            <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
        </ul>
    </div>
</div>
<div class="container">
<!--    banner圖-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>
<!--    中間內(nèi)容區(qū)塊-->
    <div class="wrap">
        <div class="main">
            <div class="show_img">
                <h3>公司產(chǎn)品</h3>
                <ul>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                </ul>
                <ul>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                </ul>
                <ul>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                </ul>
                <ul>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="left">
        <div class="text-img">
            <h3>公司簡(jiǎn)介</h3>
            <img src="static/image/gsjs.jpg" alt="" width="150">
            <p>
                我公司***的顯示器, 不能當(dāng)飯吃, 也不能當(dāng)衣服穿, 并且全部都是方的, 只要通上電, 就可以使用了
                每一臺(tái)顯示器, 都帶了一根電源線, 還有一根信號(hào)線, 出廠的時(shí)候, 沒(méi)有配插線板, 需要
                用戶自己***一下, 實(shí)在是不好意思了, 畢竟9塊9就包郵了(***PDD商城喲)
            </p>
        </div>
<!--        聯(lián)系我們-->
        <div class="contact">
            <h3>聯(lián)系我們</h3>
            <dl>
                <dt>電話:</dt>
                <dd>+86-010-56778899</dd>

                <dt>手機(jī):</dt>
                <dd>+86-13801090876321</dd>
                <dt>地址:</dt>
                <dd>北京市通州區(qū)京沈高速旁</dd>

                <dt>微信:</dt>
                <dd>與手機(jī)同號(hào)</dd>
            </dl>
        </div>
    </div>

    <div class="right">
        <div class="news-list">
            <h3>公司新聞</h3>
            <ul>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
                <li class="item"><a href="">恭喜公司新官網(wǎng)正式上線啦...</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="footer">
    <div class="content">
        <p>
            <a href="">? PHP中文網(wǎng)版權(quán)所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖I(lǐng)CP2016098801-1</a>
        </p>

    </div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


頭部樣式表header.css：


實(shí)例

/*網(wǎng)頁(yè)頭部?jī)?nèi)容*/
.header {
    background-color: black;
    color: white;
    margin: 0;
}

/*頭部?jī)?nèi)容區(qū)*/
.header .content {
    margin: 0 auto;
    width: 1000px;
    height: 60px;
    background-color: black;
}

/*頭部導(dǎo)航區(qū)*/
.header .content .nav {
    /*清空導(dǎo)航ul元素的默認(rèn)樣式*/
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

/*清除無(wú)序列表的小點(diǎn)*/
.header .content .nav .item {
    list-style: none;
}

/*導(dǎo)航欄的a標(biāo)簽設(shè)置樣式*/
.header .content .nav .item a {
    /*清除下劃線*/
    text-decoration-line: none;

    /*讓.nav .item下的a標(biāo)簽浮動(dòng)*/
    float: left;

    /*設(shè)置寬高還有a標(biāo)簽間的間距*/
    line-height: 60px;
    min-width: 160px;
    min-height: 60px;
    padding: 0 20px;

    /*設(shè)定文字顏色并居中顯示*/
    text-align: center;
    color: lightcyan;
}

/*鼠標(biāo)停留改變字體的效果*/
.header .content .nav .item a:hover {
    color: white;
    font-size: 1.1rem;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


底部樣式表footer.css:


實(shí)例

/* 底部的基本樣式 */
.footer {
    background-color: lightgray;
}

.footer .content {
    width: 1000px;
    height: 60px;
    background-color: #444;
    margin: 0 auto;
}
.footer .content p {
    text-align: center;
    line-height: 60px;
}

.footer .content  a {
    text-decoration: none;
    color: lightgrey;
}

/* 鼠標(biāo)移入時(shí)的顯示效果*/
.footer .content  a:hover {
    color: white;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


主頁(yè)用樣式表index.css:


實(shí)例

/*設(shè)置頁(yè)面主體內(nèi)容部分*/
.container {
    /*設(shè)置寬高值，和導(dǎo)航欄一樣居中顯示頁(yè)面內(nèi)容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮動(dòng)的子元素*/
    overflow: hidden;
}

.wrap {
    /* 繼承父級(jí)區(qū)塊container寬度 width:1000px; */
    width: inherit;
    /* 高度也繼承主體區(qū)塊 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等價(jià)于-1000px,將左區(qū)塊拉回到中間的起點(diǎn)處*/
    margin-left: -100%;
}
.right {
    /* -180px就正好將右區(qū)塊上移到中間區(qū)塊右側(cè)顯示 */
    margin-left: -280px;
}

/*主體內(nèi)容用padding將其擠出*/
.main {
    padding:0 280px;

}
.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
    overflow: hidden;
}

.main ul li:first-child {
    float: left;
}
.main ul li:last-child {
    float: right;
}
.main ul li:hover {
    border: 1px solid yellow;
}

.left h3 {
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.text-img {
    padding:0 15px;
    margin-bottom: 300px;
    line-height: 1.5em;
}

.text-img img {
    float: left;
    margin-right: 10px;
}

.contact {
    padding:0 20px;
    text-align: left;
    line-height: 1.5em;
}

dt {
    float: left;
}

.right h3 {
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.news-list {
    padding: 0 15px;
}

.news-list ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
    line-height: 1.5em;
}

.news-list ul li a {
    color: #6c6c6c;
    text-decoration-line: none;
}

.news-list ul li a:hover {
    color: #FF5000;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


主頁(yè)最終顯示效果：主頁(yè).png



公司新聞頁(yè)面，使用的樣式表有header.css，footer.css，left.css(左側(cè)快捷鏈接按鈕)，news.css（公司新聞頁(yè)面樣式表）。


實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/left.css">
    <link rel="stylesheet" href="static/css/news.css">
    <title>公司新聞</title>
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首頁(yè)</a></li>
            <li class="item"><a href="news.html">公司新聞</a></li>
            <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
            <li class="item"><a href="about.html">關(guān)于我們</a></li>
            <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
        </ul>
    </div>
</div>
<!-- 中間主體 -->
<div class="container">
    <!--   banner圖-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>
    <!-- 1. 中間內(nèi)容區(qū)塊 -->
    <div class="wrap">
        <div class="main">

            <div class="news-list">
                <h3>公司新聞</h3>
                <ul>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官網(wǎng)正式上線啦恭喜公司新官網(wǎng)正式上線啦...      admin</a></li>
                </ul>
                <div class="pages">
                    <ul>
                        <li><a href="">上一頁(yè)</a></li>
                        <li><a href="" class="active">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">下一頁(yè)</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="left">
        <h3>欄目</h3>
        <div class="category">
            <ul>
                <li class="item"><a href="news.html">公司新聞</a></li>
                <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
                <li class="item"><a href="about.html">關(guān)于我們</a></li>
                <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="footer">
    <div class="content">
        <p>
            <a href="">? PHP中文網(wǎng)版權(quán)所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖I(lǐng)CP2016098801-1</a>
        </p>
    </div>
</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


公司新聞頁(yè)面樣式表news.css：


實(shí)例

/*設(shè)置頁(yè)面主體內(nèi)容部分*/
.container {
    /*設(shè)置寬高值，和導(dǎo)航欄一樣居中顯示頁(yè)面內(nèi)容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮動(dòng)的子元素*/
    overflow: hidden;
}

.wrap {
    /* 繼承父級(jí)區(qū)塊container寬度 width:1000px; */
    width: inherit;
    /* 高度也繼承主體區(qū)塊 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等價(jià)于-1000px,將左區(qū)塊拉回到中間的起點(diǎn)處*/
    margin-left: -100%;
}
.right {
    /* -180px就正好將右區(qū)塊上移到中間區(qū)塊右側(cè)顯示 */
    margin-left: -280px;
}

/*主體內(nèi)容用padding將其擠出*/
.main {
    /*padding:0 280px;*/
    padding-left: 280px;
}

.main .news-list {
    padding: 0 15px;
}

.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
    overflow: hidden;
}

.main .news-list {
    padding: 0 15px;
}

.main .news-list ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
    line-height: 1.5em;
}

.main .news-list ul li a {
    color: #6c6c6c;
    text-decoration-line: none;
}

.main .news-list ul li a:hover {
    color: #FF5000;
}

.main .news-list .pages {
    margin: 15px auto;
}

.main .news-list .pages ul li a {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    min-width: 26px;
    padding: 0 5px;
    text-align: center;
    margin: 0 2px;
    border: 1px solid black;
    float: left;
}

.main .news-list .pages ul li a:hover .main .news-list .pages ul li a.active{
    background-color: #FF5000;
    color: #eeeeee;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


左側(cè)快捷鏈接按鈕樣式表left.css:


實(shí)例

.left h3 {
    margin: 10px auto;
    text-align: center;
    border-bottom: 1px solid;
}

.left ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.left li a {
    display: inline-block;
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
    text-decoration-line: none;
    line-height: 50px;
    text-align: center;
}

.left li a:hover {
    background-color: red;
    font-size: 1.1em;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


公司新聞頁(yè)面最終顯示效果：


公司新聞.png



最新產(chǎn)品頁(yè)面使用樣式表有header.css，footer.css，left.css，products.css。 頁(yè)面代碼如下：


實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/left.css">
    <link rel="stylesheet" href="static/css/products.css">
    <title>最新產(chǎn)品</title>
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首頁(yè)</a></li>
            <li class="item"><a href="news.html">公司新聞</a></li>
            <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
            <li class="item"><a href="about.html">關(guān)于我們</a></li>
            <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <!--banner圖-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>

    <!-- 中間內(nèi)容區(qū)塊 -->
    <div class="wrap">
        <div class="main">
            <div class="img-list">
                <h3>最新產(chǎn)品</h3>
                <ul>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                </ul>
                <ul>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                </ul>
                <ul>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                </ul>
                <ul>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型號(hào): P2415Q</a>
                    </li>
                </ul>
                <div class="pages">
                    <ul>
                        <li><a href="">上一頁(yè)</a></li>
                        <li><a href="" class="active">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">下一頁(yè)</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="left">
        <h3>欄目</h3>
        <div class="category">
            <ul>
                <li class="item"><a href="news.html">公司新聞</a></li>
                <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
                <li class="item"><a href="about.html">關(guān)于我們</a></li>
                <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="footer">
    <div class="content">
        <p>
            <a href="">? PHP中文網(wǎng)版權(quán)所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖I(lǐng)CP2016098801-1</a>
        </p>
    </div>
</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


最新產(chǎn)品代碼樣式表products.css:


實(shí)例

/*設(shè)置頁(yè)面主體內(nèi)容部分*/
.container {
    /*設(shè)置寬高值，和導(dǎo)航欄一樣居中顯示頁(yè)面內(nèi)容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮動(dòng)的子元素*/
    overflow: hidden;
}

.wrap {
    /* 繼承父級(jí)區(qū)塊container寬度 width:1000px; */
    width: inherit;
    /* 高度也繼承主體區(qū)塊 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等價(jià)于-1000px,將左區(qū)塊拉回到中間的起點(diǎn)處*/
    margin-left: -100%;
}
.right {
    /* -180px就正好將右區(qū)塊上移到中間區(qū)塊右側(cè)顯示 */
    margin-left: -280px;
}

/*主體內(nèi)容用padding將其擠出*/
.main {
    /*padding:0 280px;*/
    padding-left: 280px;
}

.main .img-list {
    padding: 0 15px;
}

.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main .img-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*用偽類在最后一個(gè)ul后面清除掉浮動(dòng),讓分頁(yè)條正常顯示*/
.main .img-list ul:last-of-type::after {
    display: table;
    content: '';
    clear: both;
}

.main .img-list ul li.item {
    float: left;
    margin: 0 20px;
}

.main .img-list ul li a {
    display: table;
    text-decoration-line: none;
    color: #6c6c6c;
}

.main .img-list ul li a:hover {
    color: #FF5000;
}


.main .img-list .pages {
    margin: 15px auto;
}

.mani .img-list .pages ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main .img-list .pages ul li a {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    min-width: 26px;
    padding: 0 5px;
    text-align: center;
    margin: 0 2px;
    border: 1px solid black;
    float: left;
}

.main .news-list .pages ul li a:hover .main .news-list .pages ul li a.active{
    background-color: #FF5000;
    color: #eeeeee;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


最新產(chǎn)品頁(yè)面最終顯示效果：

最新產(chǎn)品.png



關(guān)于我們頁(yè)面使用的樣式表有header.css，footer.css，left.css，about.css。頁(yè)面代碼如下：


實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/left.css">
    <link rel="stylesheet" href="static/css/about.css">
    <title>關(guān)于我們</title>
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首頁(yè)</a></li>
            <li class="item"><a href="news.html">公司新聞</a></li>
            <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
            <li class="item"><a href="about.html">關(guān)于我們</a></li>
            <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <!--banner圖-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>

    <!-- 中間內(nèi)容區(qū)塊 -->
    <div class="wrap">
        <div class="main">
            <div class="text-img">
                <h3>公司簡(jiǎn)介</h3>
                <img src="static/image/gsjs.jpg" alt="">
                <p>
                    我公司***的顯示器, 不能當(dāng)飯吃, 也不能當(dāng)衣服穿, 并且全部都是方的, 只要通上電, 就可以使用了
                    每一臺(tái)顯示器, 都帶了一根電源線, 還有一根信號(hào)線, 出廠的時(shí)候, 沒(méi)有配插線板, 需要
                    用戶自己***一下, 實(shí)在是不好意思了,畢竟9塊9就包郵了(***PDD商城喲)</p><br>
                <p>我公司***的顯示器, 不能當(dāng)飯吃, 也不能當(dāng)衣服穿, 并且全部都是方的, 只要通上電, 就可以使用了
                    每一臺(tái)顯示器, 都帶了一根電源線, 還有一根信號(hào)線, 出廠的時(shí)候, 沒(méi)有配插線板, 需要
                    用戶自己***一下, 實(shí)在是不好意思了, 畢竟9塊9就包郵了(***PDD商城喲)</p><br>
                <p>我公司***的顯示器, 不能當(dāng)飯吃, 也不能當(dāng)衣服穿, 并且全部都是方的, 只要通上電, 就可以使用了
                    每一臺(tái)顯示器, 都帶了一根電源線, 還有一根信號(hào)線, 出廠的時(shí)候, 沒(méi)有配插線板, 需要
                    用戶自己***一下, 實(shí)在是不好意思了, 畢竟9塊9就包郵了(***PDD商城喲)
                </p>
            </div>
        </div>
    </div>

    <div class="left">
        <h3>欄目</h3>
        <div class="category">
            <ul>
                <li class="item"><a href="news.html">公司新聞</a></li>
                <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
                <li class="item"><a href="about.html">關(guān)于我們</a></li>
                <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="footer">
    <div class="content">
        <p>
            <a href="">? PHP中文網(wǎng)版權(quán)所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖I(lǐng)CP2016098801-1</a>
        </p>
    </div>
</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


關(guān)于我們頁(yè)面樣式表about.css：


實(shí)例

/*設(shè)置頁(yè)面主體內(nèi)容部分*/
.container {
    /*設(shè)置寬高值，和導(dǎo)航欄一樣居中顯示頁(yè)面內(nèi)容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮動(dòng)的子元素*/
    overflow: hidden;
}

.wrap {
    /* 繼承父級(jí)區(qū)塊container寬度 width:1000px; */
    width: inherit;
    /* 高度也繼承主體區(qū)塊 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等價(jià)于-1000px,將左區(qū)塊拉回到中間的起點(diǎn)處*/
    margin-left: -100%;
}
.right {
    /* -180px就正好將右區(qū)塊上移到中間區(qū)塊右側(cè)顯示 */
    margin-left: -280px;
}

/*主體內(nèi)容用padding將其擠出*/
.main {
    /*padding:0 280px;*/
    padding-left: 280px;
}
.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main .text-img {
    margin: 0 15px;
}
.main .text-img img {
    float: left;
}

.main .text-img p {
    text-indent: 2em;
}

運(yùn)行實(shí)例 ?


點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


關(guān)于我們頁(yè)面最終顯示效果：關(guān)于我們.png



聯(lián)系我們頁(yè)面使用的樣式表有header.css，footer.css，left.css，contact.css。頁(yè)面代碼如下：


實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/left.css">
    <link rel="stylesheet" href="static/css/contact.css">
    <title>聯(lián)系我們</title>
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首頁(yè)</a></li>
            <li class="item"><a href="news.html">公司新聞</a></li>
            <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
            <li class="item"><a href="about.html">關(guān)于我們</a></li>
            <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <!--banner圖-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>

    <!-- 中間內(nèi)容區(qū)塊 -->
    <div class="wrap">
        <div class="main">
                <div class="contact">
                    <h3>聯(lián)系我們</h3>
                    <ul>
                        <li>電話:+86-010-56778899</li>
                        <li>手機(jī):+86-13801090876321</li>
                        <li>地址:北京市通州區(qū)京沈高速旁</li>
                        <li>微信:與手機(jī)同號(hào)</li>
                    </ul>
                </div>
        </div>
    </div>

    <div class="left">
        <h3>欄目</h3>
        <div class="category">
            <ul>
                <li class="item"><a href="news.html">公司新聞</a></li>
                <li class="item"><a href="products.html">最新產(chǎn)品</a></li>
                <li class="item"><a href="about.html">關(guān)于我們</a></li>
                <li class="item"><a href="contact.html">聯(lián)系我們</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="footer">
    <div class="content">
        <p>
            <a href="">? PHP中文網(wǎng)版權(quán)所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖I(lǐng)CP2016098801-1</a>
        </p>
    </div>
</div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例



聯(lián)系我們樣式表contact.css：


實(shí)例

/*設(shè)置頁(yè)面主體內(nèi)容部分*/
.container {
    /*設(shè)置寬高值，和導(dǎo)航欄一樣居中顯示頁(yè)面內(nèi)容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮動(dòng)的子元素*/
    overflow: hidden;
}

.wrap {
    /* 繼承父級(jí)區(qū)塊container寬度 width:1000px; */
    width: inherit;
    /* 高度也繼承主體區(qū)塊 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等價(jià)于-1000px,將左區(qū)塊拉回到中間的起點(diǎn)處*/
    margin-left: -100%;
}
.right {
    /* -180px就正好將右區(qū)塊上移到中間區(qū)塊右側(cè)顯示 */
    margin-left: -280px;
}

/*主體內(nèi)容用padding將其擠出*/
.main {
    /*padding:0 280px;*/
    padding-left: 280px;
}
.main .contact {
    margin: 0 15px;
}
.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main .contact ul li {
    line-height: 40px;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


聯(lián)系我們頁(yè)面最終顯示效果：

聯(lián)系我們.png


批改狀態(tài)：未批改

老師批語(yǔ)：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)