美文网首页
分页 导航栏 开班信息

分页 导航栏 开班信息

作者: 请叫我Bob | 来源:发表于2018-09-01 14:14 被阅读0次

分页

<!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">上一页</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">下一页</li>
        </ul>
    
</body>
</html>

导航条

<!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">首页&nbsp &nbsp|</li>
            <li class="cc">网站建设 &nbsp &nbsp|</li>
            <li class="cc">程序开发&nbsp &nbsp|</li>
            <li class="cc">网络营销&nbsp &nbsp|</li>
            <li class="cc">企业VI&nbsp &nbsp|</li>
            <li class="cc">案例提示&nbsp &nbsp|</li>
            <li class="cc">联系我们&nbsp </li>








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

导航条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">首页</li></a>
            <a href="zy.html"><li class="cc">网站建设</li></a>
            <a href="zy.html"><li class="cc">程序开发</li></a>
            <a href="zy.html"><li class="cc">网络营销</li></a>
            <a href="zy.html"><li class="cc">企业VI</li></a>
            <a href="zy.html"><li class="cc">案例展示</li></a>
            <a href="zy.html"><li class="cc">联系我们</li></a>
            



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

开班信息

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业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年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="box3">
<h3><a herf="#">人工智能+Python-高新就业班</a></h3>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">无座，名额爆满</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-04-26</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<h3><a herf="#">Android开发+测试-高薪就业班</a></h3>
<ul>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-03-23</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-01-23</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-12-20</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
<h3><a herf="#">大数据软件开发-青芒工作室</a></h3>
<ul class="box4">
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span>2018-01-23</span></a>
<a class="right" href="#"><span>开班盛况</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>

相关文章

网友评论

      本文标题：分页 导航栏 开班信息

      本文链接：https://www.haomeiwen.com/subject/lhquwftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|分页 导航栏 开班信息|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！