作业

作者: YU不忘初心 | 来源:发表于2018-08-30 18:58 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .nav{

                list-style: none;
                width: 960px;
                height: 40px;
                background-color: #55a8ea;
                margin: 50px auto;
                overflow: hidden                            
            }

            .nav li{
                float:left;
                width: 10%;     
            }
            .nav a{
                display: block;
                width: 100%;
                text-align: center;
                padding: 10px 0;
                text-decoration: none;
                font-size: 14px;
                font-family: 微软雅黑;
                color: #fff;
            }
            .nav a:hover{
                background-color: #00619f;

            }

            
        </style>
</head>
<body>
    <ul class='nav'>
        <li><a href="#">首页</a></li> 
        <li><a href="#">网站建设</a></li>   
        <li><a href="#">程序开发</a></li>   
        <li><a href="#">网络营销</a></li>   
        <li><a href="#">企业VI</a></li>   
        <li><a href="#">案例展示</a></li>   
        <li><a href="#">联系我们</a></li>   
</body>
</html>

QQ截图20180830184926.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        .i{
            border: 1px black solid;
            list-style: none;
            width: 958px;
            margin: 48px auto;
            height: 40px;

        }
        .i li {
            margin-top:10px;
            margin-left: 10px;
            float: left;

        }
        .i a {
            margin: 14px;
            text-align: center;
            padding: 10px;
            text-decoration: none;
            color: #333;
            font-family: "微软雅黑";


        }
        .i a:hover{
            color: gold;
        }
    </style>
</head>
<body>
    <ul class="i">
        <li><a href="#">首页</a>|<li>
        
        <li><a href="#">网站建设</a>|<li>
        
        <li><a href="#">程序开发</a>|<li>
        
        <li><a href="#">网络营销</a>|<li>
        
        <li><a href="#">企业VI</a>|<li>
        
        <li><a href="#">案例展示</a>|<li>
        
        <li><a href="#">联系我们</a></li>
    </ul>
</body>
</html>

QQ截图2.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            
            width: 960px;
            height: 42px;
            border: black solid 1px;
            
            margin: 50px auto;
            
            position: relative;
        }

        ul{
            
            list-style: none;
            overflow: hidden;
            margin: 7px auto;
            position: absolute;
            left: 250px;

        }
        .a{
            float: left;
            display: inline-block;
            background-color: gold;

        
            margin: 5px 5px;
            

            
        }   
        .a1{
            float: left;
            display: inline-block;
            

        
            margin: 5px 5px;
            

            
        }   
        .nav a{
            /*display: block;*/
            width: 100%;
            
            font-family: 雅黑;
            font-size: 12px;
            color: black;
            text-align: center;
            text-decoration: none;
            margin :5px 10px;
                        
        }
    

    

    
    </style>
</head>
<body>
    <div class='nav'>
        <ul >
        <li class="a"><a href="#">上一页</a></li>  
        <li class="a"><a href="#">1</a></li>    
        <li class="a"><a href="#">2</a></li>    
        <li class="a"><a href="#">3</a></li>    
        <li class="a"><a href="#">4</a></li>    
        <li class="a1"><a href="#">...</a></li> 
        <li class="a"><a href="#">17</a></li>
        <li class="a"><a href="#">18</a></li>
        <li class="a"><a href="#">19</a></li>
        <li class="a"><a href="#">20</a></li>
        <li class="a"><a href="#">下一页</a></li>
    </ul>
    </div>

</body>
</html>

QQ截图3.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework</title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        body{
            font: 12px/1 字体
        }
        .outer{
            width: 300px ;
            /*height:471px ;*/
            /*background-color: #bfa;*/
            margin: 0 auto;
        }
        .title{
            border-top: 2px #019e8b solid;
            height:36px ;
            background-color: #f5f5f5;  
            line-height: 36px;
            padding: 0px 22px 0px 16px;
        }

        .title a{
            float: right;
            color: red
        }
        
        .title h3{
            font: 16px/36px '微软雅黑'
            /*改掉默认的行高*/
        }

        .content h3{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        
        .content{
            border: 1px solid #deddd9;
            /*高考内容撑开*/
            padding: 0px 28px 0px 20px
        }
        .content li{
            margin-bottom: 15px;
        }

        .content a{
            color: black;
            text-decoration: none;
            font-size:12px; 
        }

        .content a:hover{
            color: red;
            text-decoration:underline;
        }

        .content ul{
            list-style: none;
            border-bottom: 1px dashed #deddd9;
        }

        .content .red-font{
            color: red;
            font-weight: bold;
        }



        .content .right{
            float: right;
        }

        .content .no-border{
            border: none;
        }

    </style>
</head>
<body>
    
    <div class="outer">
        <div class="title">
            <a href="#">18年面授开班计划</a>
            <h3>近期开班</h3>
            
        </div>
        <div class="content">
            <h3><a href="#">人工智能+python-高薪就业班</a></h3>
            <ul>
                <li>
                    <a class='right' href="#"><span class="red-font">预约报名</span></a>
                    <a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span class="red-font">无座名额爆满</span></a>
                    <a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间： <span >2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间： <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间： <span >2018-04-26</span></a>
                    
                </li>
                
            </ul>
            <h3><a href="#">Android开发+测试-高薪就业班</a></h3>
            <ul>
                <li>
                    <a class='right' href="#"><span class="red-font">预约报名</span></a>
                    <a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
                    
                </li>
                
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间： <span >2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间： <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间： <span >2018-04-26</span></a>
                    
                </li>
                
            </ul>
            <h3><a href="#">大数据软件开发-青芒工作室</a></h3>
            <ul class="no-border">
                <li>
                    <a class='right' href="#"><span class="red-font">预约报名</span></a>
                    <a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
                    
                </li>
                
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间： <span ">2018-04-26</span></a>
                    
                </li>
                <li>
                    <a class='right' href="#"><span >开班盛况</span></a>
                    <a href="#">开班时间： <span >2018-04-26</span></a>                    
                </li>                
            </ul>
        </div>
    </div>
</body>
</html>

QQ截图4.png

作业

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读