美文网首页
练习一 开班信息

练习一 开班信息

作者: qianxun0921 | 来源:发表于2018-09-13 12:01 被阅读0次

HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>开班信息</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
            
        <div class="main">
        <div class="box">
            <div class="title">
                <p>近期开班
                    <a href="#">18年面授开班计划</a>
                </p>
                
            </div>
            <div class="content">
                <div class="part1">
                    <div class="wzbt">人工智能+Python-高薪就业班
                        
                        <div class="time1">
                            
                            <div class="one">开班时间：<a href="#">2018-04-26</a>
                                <div class="yybm"><a href="#">
                                    预约报名</a>
                                </div>
                            </div>
                            <div class="one">开班时间：<a href="#">2018-04-26</a>
                                <div class="yybm"><a href="#">
                                    无座，名额爆满</a>
                                </div>
                            </div>
                            <div class="one">开班时间：2018-04-26
                                <div class="yybm">
                                    预约报名
                                </div>
                            </div>
                            <div class="one">开班时间：2018-04-26
                                <div class="yybm">
                                    预约报名
                                </div>
                            </div>
                            <div class="one">开班时间：2018-04-26
                                <div class="yybm">
                                    预约报名
                                </div>
                            </div>
                            
                        </div>
                    
                    </div>
                
                </div>
                <div class="part2">
                    <div class="wzbt">Android开发+测试-高薪就业班
                        <div class="time2">
                            <div class="two">开班时间：<a href="#">2018-04-26</a>
                                <div class="yybm"><a href="#">
                                    预约报名</a>
                                </div>
                            </div>
                            <div class="two">开班时间：2018-04-26
                                <div class="yybm">
                                    预约报名
                                </div>
                            </div>
                            <div class="two">开班时间：2018-04-26
                                <div class="yybm">
                                    预约报名
                                </div>
                            </div>
                            <div class="two">开班时间：2018-04-26
                                <div class="yybm">
                                    预约报名
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="part3">
                    <div class="wzbt">大数据软件开发-青芒工作室
                        <div class="time3">
                            <div class="three">开班时间：<a href="#">2018-04-26</a>
                                <div class="yybm"><a href="#">
                                    预约报名</a>
                                </div>
                            </div>
                            <div class="three">开班时间：2018-04-26
                                <div class="yybm">
                                    预约报名
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </body>
</html>

CSS代码如下：
*{
    padding: 0;
    margin: 0;
}
.main{
    background-image: url(../img/true.jpg);
}
.box{
    width: 309px;
    height: 478px;
    margin: 50px auto;
    border: 1px solid #e8e8e8;
}
.title{
    font-style: bold;
    width: 300px;
    height: 36px;
    margin-top: 4px;
    margin-right: 5px;
    margin-left: 5px;
    border-top: 2px #019e8b solid;
    background-color: #f5f5f5;
}
.box p{
    font-size: 14px;
    line-height: 40px;
    margin-left: 16px;
    float: left;
}
.box p a{
    float: right;
    margin-left: 102px;
    color: red;
}
.content{
    width: 298px;
    height: 432px;
    border: 1px solid #E8E8E8;
    margin: 0px 5px 4px ;
}
.content p{
    font-size: 12px;
    margin-top: 14px;
    margin-left: 20px;
}
.part1{
    width: 248px;
    height: 148px;
    border: 1px solid #e8e8e8;

    margin-top: 16px;
    margin-right: 28px;
    margin-left: 20px;
}
.part2{
    width: 248px;
    height: 120px;
    border: 1px solid #E8E8E8;
    margin-top: 30px;
    margin-right:28px;
    margin-left: 20px;
}

.part3{
    width:248px;
    height: 66px;
    border: 1px solid #E8E8E8;
    margin-top: 32px;
    margin-right:28px;
    margin-bottom: 16px;
    margin-left: 20px;
}
.wzbt{
    font-size: 12px;
    margin-top: 0;
    margin-left: 0;
    float: left;
    color: white;
}
.time1{
    margin: 0;
    margin-left: 30px;

    
}
.time1 a{
    text-decoration: none;
    color: red;
}
.one{
    
    margin-top: 12px;
    font-size: 10px;
    margin-left: 0px;
    
}
.yybm{
    font-size: 10px;
    float: right;
    margin-left: 14px;

}
.time2{
    margin: 0;
    margin-left: 40px;
}
.time2 a{
    text-decoration: none;
    color: red;
}
.two{
    margin-top: 12px;
    font-size: 10px;
    margin-left: 0px;
}
.time3{
    margin: 0;
    margin-left: 40px;
}
.time3 a{
    text-decoration: none;
    color: red;
}
.three{
    margin-top: 12px;
    font-size: 10px;
    margin-left: 0px;
    color: white;
}
QQ截图20180913120357.png

相关文章