8-10作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优设大课堂</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
            text-decoration: none;
        }
        .header{
            margin:0 auto;
            height: 350px;
            background-color: skyblue;

        }
        .daohang{
            display: inline-block;
            
            width:100%; 
            margin:0 auto;
            background-color: #2292C2;

        }
        a:link{
            color:#FFFFFF;
        }
        a:visited{
            color: white;
        }
        
        a:hover{
            
            background-color: skyblue;
        }
        a:active{
            color:red;
        }
        .content{
            margin:20px 120px;
            background-color: #F0F3F6;
            height: 1600px;
        }
        .fangkuang{
            margin:20px 200px;

            background-color:#F0F3F6;

        }
        .jiangs{
            width: 150px;
            height: 200px;
            margin:10px 11px;
            background-color: yellow;
            float: left;
        }
        .bai{
            clear: both;
            height: 300px;
            width: 100%;
            margin:20px 0;
            background-color:green;
        }
        .lianxi{
            
            width: 200px;
            height: 100px;
            background-color: blue;
            margin:10px auto;

        }
        .youshi{
            height: 300px;
            width: 100%;
            margin:none;
            background-color: #F0F3F6;
        }
        .abc{
            margin: 100px 10px;
            height: 150px;
            width: 150px;
            background-color: red;
            float: left;
        }
        .kk{
            float: left;
            height: 300px;
            width: 100%;
            background-color: blue;
            margin-top: 20px;
        }
        .aa{
            clear: both;
            width: 100%;
            height: 3px;
        }
        .lianx{
            clear: both;
            width: 200px;
            height: 100px;
            background-color: blue;
            margin:20px auto;
        }
        .chang{
            height: 300px;
            background-color: blue;
        }
        .aa1{
            height: 400px;
            background-color: skyblue;

        }
        .aaa{
            height: 170px;
            margin: 10px 200px;
            background-color: yellow;

        }
        .yy{
            height: 500px;
            background-color: red;
        }
        .z{
            height: 500px;
            background-color: yellow;
        }
        .c{
            height: 150px;
            background-color: green;
        }
        .cc{
            height: 150px;
            background-color: red;
        }
        .ccc{
            height: 200px;
            margin:0 80px;
            background-color: skyblue;
        }
        .zz{
            height: 200px;
            background-color: green;
        }
        .zzz{
            height: 80px;
            margin:0 80px;
            background-color: blue;
        }               
    </style>
</head>
<body>
    <!-- 页头 -->
    <div class="header">
        <div class="daohang">           
            <center>
            <a href="https://www.uisdc.com/">优设首页</a>&nbsp
            <a href="https://hao.uisdc.com/">网址导航</a>&nbsp
            <a href="https://www.uisdc.com/news">优设读报</a>&nbsp
            <a href="https://uiiiuiii.com/inspiration">找灵感</a>&nbsp
            <a href="https://www.uisdc.com/about">关于我们</a>&nbsp
            </center>
        </div>

    </div>
    <div class="content">
        <center><h1>热门课程</h1></center><center>Hot Class</center><center><p style="color: #6C6D69;">视觉全能班  /  前端开发  /  交互设计  /  零基础手绘  /  小光老师的手绘课  /  动效设计  /  UI设计</p></center>
        <div class="fangkuang">         
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="jiangs"></div>
            <div class="bai"></div>
            <div class="lianxi"></div>
            <center><h1>课程优势</h1>Course Advantage</center>
            <div class="youshi">
                <div class="abc"></div>
                <div class="abc"></div>
                <div class="abc"></div>
                <div class="abc"></div>
            </div>
        </div>
    </div>
    <div class="kk"></div>
    <div class="aa"></div>
    <div class="lianx"></div>
    <div class="chang"></div>
    <div class="aa1">
        <div class="aaa"></div>
        <div class="aaa"></div>
    </div>
    <div class="yy">
        <div class="z">
            <div class="c"></div>
            <div class="cc"></div>
            <div class="ccc"></div>
        </div>
        <div class="zz"></div>
        <div class="zzz"></div>
    </div>
</body>
</html>
深度截图_20180810081735.png
深度截图_20180810081742.png
深度截图_20180810081749.png
深度截图_20180810081756.png
深度截图_20180810081807.png
深度截图_20180810081816.png
深度截图_20180810081822.png
最后编辑于：2018.08.10 08:20:41