分頁(yè) 導(dǎo)航欄 開班信息

分頁(yè)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .mast{
            width: 960px;
            height: 42px;
            
            border: 1px solid rgb(239,239,239);
            margin: 300px auto;
            

            

            
        }
        
        ul{
            list-style: none;
            margin: 5px 0;
            position: absolute;
            float: left;
            left: 200px;
            margin:300px auto;

        }
    
        .cc{
            background: gold;
            font-family:  微軟雅黑;
            font-size: 12px;
        
            
            padding: 5px 10px;
            float: left;
            margin-left: 5px;


        }
        .c{
            font-family:  微軟雅黑;
            
            
            font: 12px ;
            padding: 5px 10px;
            float: left;
            margin-left: 5px;


        }



    </style>
</head>
<body>
    <div class="mast">
        <ul>
            <li class="cc"><a href="zy2.html">上一頁(yè)</a>></li>
            <li class="cc">1</li>
            <li class="cc">2</li>
            <li class="cc">3</li>
            <li class="cc">4</li>
            <li class="c">...</li>
            <li class="cc">17</li>
            <li class="cc">18</li>
            <li class="cc">19</li>
            <li class="cc">20</li>
            <li class="cc">下一頁(yè)</li>
        </ul>
    
</body>
</html>

導(dǎo)航條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        .mast{
            width: 960px;
            height: 42px;
            
            border: 1px solid rgb(9,16,23);
            margin: 300px auto;
            position: relative;

        }
        ul{
            list-style: none;
            margin: 5px 0;
            position: absolute;
            left: 200px;
        }   
        .cc{
            font-family:  微軟雅黑;
            font-size: 14px;
        
            
            padding: 5px 10px;
            float: left;
            margin-left: 5px;

            
    
        }
    </style>>       

</head>
<body>
    <div class="mast">
        <ul>
            <li class="cc">首頁(yè)&nbsp &nbsp|</li>
            <li class="cc">網(wǎng)站建設(shè) &nbsp &nbsp|</li>
            <li class="cc">程序開發(fā)&nbsp &nbsp|</li>
            <li class="cc">網(wǎng)絡(luò)營(yíng)銷&nbsp &nbsp|</li>
            <li class="cc">企業(yè)VI&nbsp &nbsp|</li>
            <li class="cc">案例提示&nbsp &nbsp|</li>
            <li class="cc">聯(lián)系我們&nbsp </li>








    </ul>
    
</body>
</html>

導(dǎo)航條2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
            color: #fff;
            padding:0px;
            margin:0px;
            text-align: center;
        }
        .mast{
            width: 960px;
            height: 40px;
            background-color: rgb(80,167,238);
            margin: 300px auto;
            float: left;

        }

        ul{
            list-style: none;
            position: absolute;
            
        }
        .cc{
            font-family:  微軟雅黑;
            font-size: 14px;
            padding-top: 10px;
            display: block;
            width: 100px;
            height: 30px;
            
        
            float: left;
            
        }   
        a{
            width: 100%;
            height: 100%;
        }
    
        a li:hover{
            background-color: #00619f;
            color: white:100px;
        }
        



    </style>
</head>
<body>
    <div class="mast">
        <ul>
            <a href="zy.html"><li class="cc">首頁(yè)</li></a>
            <a href="zy.html"><li class="cc">網(wǎng)站建設(shè)</li></a>
            <a href="zy.html"><li class="cc">程序開發(fā)</li></a>
            <a href="zy.html"><li class="cc">網(wǎng)絡(luò)營(yíng)銷</li></a>
            <a href="zy.html"><li class="cc">企業(yè)VI</li></a>
            <a href="zy.html"><li class="cc">案例展示</li></a>
            <a href="zy.html"><li class="cc">聯(lián)系我們</li></a>
            



        </ul>
    
</body>
</html>

開班信息

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作業(yè)1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
font: 12px/1 宋體；

    }
    .box1{
        width: 300px;
        /*height: 471px;
        background-color: #bfa;*/
        /*text-align: center;*/
        margin: 50px auto;
    }
    .box2{
        border-top: 2px #019e8b solid;
        height: 36px;
        background-color: #f5f5f5;
        line-height: 36px;
        padding: 0px 22px 0px 16px;
    }
    .box2 a{
        float: right;
        color: red;
        font-size: 12px;
    }
    .box2 h3{
        font:16px/36px "微軟雅黑";
    }
    .box3{
        border: 1px solid #deddd9;
        padding: 0px 28px 0px 20px;
    }
    .box3 a{
        color: black;
        text-decoration: none;
        font-size: 12px;
    }
    .box3 a:hover{
        color: green;
        text-decoration: underline;
    }
    .box3 h3{
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .box3 ul{
        list-style: none;
        border-bottom: 1px dashed #deddd9;
    }
    .box3 li{
        margin-bottom: 15px;
    }
    .box3 .red-font{
        color: red;
        font-weight: bold;
    }
    .box3 .right{
        float: right;
    }
    .box3 .box4{
        border: none;
    }
    .right{
        margin-top: 9px;
    }
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<a href="#">18年面授開班計(jì)劃</a>
<h3>近期開班</h3>
</div>
<div class="box3">
<h3><a herf="#">人工智能+Python-高新就業(yè)班</a></h3>
<ul>
<li>
<a href="#">開班時(shí)間：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">預(yù)約報(bào)名</span></a>
</li>
<li>
<a href="#">開班時(shí)間：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">無座，名額爆滿</span></a>
</li>
<li>
<a href="#">開班時(shí)間：<span>2018-04-26</span></a>
<a class="right" href="#"><span>開班盛況</span></a>
</li>
<li>
<a href="#">開班時(shí)間：<span>2018-04-26</span></a>
<a class="right" href="#"><span>開班盛況</span></a>
</li>
<li>
<a href="#">開班時(shí)間：<span>2018-04-26</span></a>
<a class="right" href="#"><span>開班盛況</span></a>
</li>
</ul>
<h3><a herf="#">Android開發(fā)+測(cè)試-高薪就業(yè)班</a></h3>
<ul>
<li>
<a href="#">開班時(shí)間：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">預(yù)約報(bào)名</span></a>
</li>
<li>
<a href="#">開班時(shí)間：<span>2018-03-23</span></a>
<a class="right" href="#"><span>開班盛況</span></a>
</li>
<li>
<a href="#">開班時(shí)間：<span>2018-01-23</span></a>
<a class="right" href="#"><span>開班盛況</span></a>
</li>
<li>
<a href="#">開班時(shí)間：<span>2018-12-20</span></a>
<a class="right" href="#"><span>開班盛況</span></a>
</li>
</ul>
<h3><a herf="#">大數(shù)據(jù)軟件開發(fā)-青芒工作室</a></h3>
<ul class="box4">
<li>
<a href="#">開班時(shí)間：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">預(yù)約報(bào)名</span></a>
</li>
<li>
<a href="#">開班時(shí)間：<span>2018-01-23</span></a>
<a class="right" href="#"><span>開班盛況</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容