页面制作

作者: zhaodadaya | 来源:发表于2018-09-10 20:56 被阅读0次

页面制作
「十六天计划」第十四天
1.3.1html简介
项目总结
【前端】-011-页面制作-HTML-小结
猫眼电影-Axure原型制作
专业的付费型文章资讯网站源码免费分享免费安装教程码分享
接单
页面的制作
页面制作——HTML

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开班信息</title>
    <link rel="styleSheet" href="./s.css" type="text/css">

</head>
<body>
    <div class="open">
        <div class="left">近期开班</div>
        <div class="right"><a href="#">18年面授开班计划</a></div>
    </div>
    <div class="connect">
        <h6>人工智能+Python-高薪就业班</h6>
        <p class="pright"><a href="#" id="zi">预约报名</a></p>
        <p>开班时间：<a href="#" id="zi">2018-04-26</a></p>
        <p class="pright"><a href="#" id="zi">名额爆满</a></p>
        <p>开班时间：<a href="#" id=zi>2018-04-26</a></p>
        <p class="pright">开班盛况</p>
        <p>开班时间：2018-04-26</p>
        <p class="pright">开班盛况</p>      
        <p>开班时间：2018-04-26</p>
        <p class="pright">开班盛况</p>
        <p>开班时间：2018-04-26</p>
        <hr>
        <h6>Android开发+测试-高薪就业班</h6>
        <p class="pright"><a href="#" id="zi">预约报名</a></p>
        <p>开班时间：<a href="#" id="zi">2018-04-26</a></p>
        <p class="pright">开班盛况</p>
        <p>开班时间：2018-04-26</p>
        <p class="pright">开班盛况</p>      
        <p>开班时间：2018-04-26</p>
        <p class="pright">开班盛况</p>
        <p>开班时间：2018-04-26</p>
        <hr>
        <h6>大数据软件开发-青芒工作室</h6>
        <p class="pright"><a href="#" id="zi">预约报名</a></p>
        <p>开班时间：<a href="#" id="zi">2018-04-26</a></p>
        <p class="pright">开班盛况</p>
        <p>开班时间：2018-04-26</p>
    </div>
</body>
</html>

样式表：

*{
    padding: 0;
    margin: 0;
}
.open{
    width: 300px;
    height: 36px;
    background-color: rgb(245,245,245);
    border-top: 2px rgb(1,158,139) solid;
    margin: 0 auto;
}
.open div.left{
    /*padding-top: 2px;*/
    float: left;
    font-size: 13px;
    margin: 11px 0px 16px 10px;
}
.open div.right{
    font-size: 11px;
    font-family: "微软雅黑";
    float: right;
    margin: 13px 10px 0px 16px;

}
.open div.right a{
    text-align: 
}
.connect{
    width: 250px;
    height: 400px;
    border: 1px;
    background-color: rgb(255,255,255);
    border-color: rgb(222,221,217);
    border-style: solid;
    margin: 0 auto;
    padding:0px 28px 15px 20px;
    font-family: "微软雅黑";
}
.connect p.pright{
    float: right;
}
p{
    height: 27px;
    font-size: 11px;
}
h6{
    margin: 16px 0px 8px;
    font-family:"宋体";
}
hr{
    border:0.5px dashed rgb(222,221,217);
}
a{
    color: red;
}
#zi {
    text-decoration:none;
    font-weight: bold;
}

效果图如下：

开班信息.png