发表于： 2022-11-09 19:48:51

0 731





今天完成任务十四的编程：


less代码：



@color:#fff;
@bgcolor:#29b078;

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  margin: 0 auto;
}

.navigation {
  background-color: @bgcolor;
  height: 100px;
}

.a {
  float: right;
  margin-top: 35px;
  margin-right: 155px;
}

.a ul li {
  display: block;
  color: @color;
  padding-bottom: 0;
  width: 80px;
  font-size: 15px;
  float: right;
}

li a {
  color: @color;
  text-decoration: none;
}


.about {
  font-size: 16px;
  color: @color;
}

.head {
  height: 39px;
  width: auto;
  background-color: @color;
}

.head p {
  font-size: 14px;
  color: @bgcolor;
  margin: 10px 0 0 200px;
}

.chart {
  width: auto;
  margin-right: 15%;
}

.icon {
  float: right;
  margin-top: -1%;
  margin-left: 1%;
}

.navigation {
  background-color: @bgcolor;
  height: 100px;
}

.browse {
  width: 100%;
  height: auto;
  position: relative;

}

.image {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

.content {
  width: 100%;
  height: auto;
  display: flex;

}

.efficient {
  margin-top: 40%;
  margin-left: 25%;

}

.standard {
  margin-top: 40%;
  margin-left: 25%;

}

.people {
  margin-top: 40%;
  margin-left: 25%;

}
.student {
  width: auto;
  margin: 0 0 5px 0;
}

.font {
  color: #333333;
  font-size: 18px;
  font-weight:bold;
  margin: 10% 0 10% 25%;
}

.study {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: #fafafa;

}

.excellent{
  width: 100%;
  background-color: #fafafa;
  text-align: center;

}

.excellent img {
  margin: 100px 0;
}

.explain {
  font-size: 16px;
  color: #333333;
  text-align: center;
  padding: 5% 0 ;
  font-weight:bolder;
}

.font1 {
  font-size: 16px;
  color: #a1a1a1;
  margin-top: 15px;
}

.font2 {
  font-size: 16px;
  color: #a1a1a1;
  margin-top: 30px;
}

.s {
  font-size: 18px;
  color: @bgcolor;
  font-weight: bolder;
}

.d {
  width: auto;
  margin-top: 100px;
}

.circular {
  width: 65px;
  height: 65px;
  background-color: @color;
  border-radius: 50%;
  display: block;
  position: relative;
  margin: 35% 35%;
}

.circular img {
  float: left;
  padding-left: 20px;
  position: absolute;
  top: 20px;
  right: 85px;
  display: inline-block;
}

.circular span {
  color: @bgcolor;
  font-size: 15px;
  line-height: 65px;
  margin-left: 27px;
}

.col-lg-6 p {
  color: @color;
  font-size: 10px;
  margin: 60px 0 0 15px;
}


.row img {
  text-align: center;
}

.exhibition {
  width: 100%;
  background-color: @color;
}

.exhibition img {
  float: left;
  margin-left: 110px;
  margin-top: 30px;
  background-color: @color;
}

.exhibition span {
  line-height: 320px;
  margin-left: -180px;
}

.exhibition p {
  color: #cacaca;
  font-size: 18px;
  margin-top: -80px;
  padding: 0 25px 50px 25px;
}

.cooperation {
  width: 100%;
  background-color: @color;
}

.cooperation img{
  width: 100%;
  margin-top: 25px;
}

.link {
  width: 100%;
  background-color: @color;
  display: block;
}

.link ul {
  width: auto;
}

.link li {
  margin: 5px 30px;
  color: #999999;
  font-size: 15px;
  float: left;
}

.low {
  width: 100%;
  background-color: @bgcolor;
  display: block;
}

.public1 {
  display: block;
  margin-left: 30%;
  margin-top: 10%;
}

.public2 {
  display: block;
  margin-top: 8%;
}

.public4 {
  display: flex;
  margin-top: 2%;
}


.public3 {
  float: right;
  display: block;
  margin-top: 5%;
}

.public3 p {
  color: @color;
  margin-bottom: 0;
  margin-top: 15px;
  margin-right: 20px;
}

.col-lg-4 p {
  color: @color;
  margin-bottom: 0;
  margin-top: 15px;
  margin-right: 20px;
}

.public img {
  padding-top: 5%;
  padding-left: 5%;
}


html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet/less" type="text/css" href="shoye.less" />
    <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
    <title>任务十四练习</title>

</head>
<body>
<div class="box">
    <div class="head ">
        <p>客服热线:010-594-78634</p>
        <div class="chart">
            <img class="icon" src="tupian/图层%201.png">
            <img class="icon" src="tupian/图层%202.png">
            <img class="icon" src="tupian/图层%203.png">
        </div>
    </div>
    <div class="navigation ">
        <div class="a">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">职业</a></li>
                <li><a href="#">推荐</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </div>
    <div class="browse">
        <img class="image" src="tupian/banner.png" alt="">
    </div>
    <div class="container">
        <div class="content row">
            <div class="col-md-3">
                <img class="efficient" src="tupian/rocket.png" alt="">
                <h4 class="font">高效</h4>
                <p class="font2">将五到七年的成长时间，缩短到一年到三年。</p>
            </div>
            <div class="col-md-3">
                <img class="standard" src="tupian/archive.png" alt="">
                <h4 class="font">规范</h4>
                <p class="font2">标准的实战教程，不会走弯路</p>
            </div>
            <div class="col-md-3">
                <img class="people" src="tupian/Shape%20253.png" alt="">
                <h4 class="font">人脉</h4>
                <p class="font2">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
            </div>
            <div class="col-md-3">
                <div class="d">
                    <img class="student" src="tupian/user%20拷贝.png" alt="">
                    <span class="s">12400</span>
                    <p class="font1">积累在线学习人数</p>
                    <img class="student" src="tupian/user%20拷贝.png" alt="">
                    <span class="s">12400</span>
                    <p class="font1">学员已经找到满意工作</p>
                </div>
            </div>
        </div>
        <div class="study">
            <h1 class="explain">如何学习</h1>

            <div class=" row">
                <div class="col-lg-3">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="circular">
                                <span>1</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <p>匹配你现在的个人现状寻找合适自己的就业岗位</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="circular">
                                <img src="tupian/图层%204.png">
                                <span>2</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <p>了解职业前景薪金待遇、竞争压力等</p>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="circular">
                                <img src="tupian/图层%204.png">
                                <span>3</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <p>掌握行业内顶级技能</p>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="circular">
                                <img src="tupian/图层%204.png">
                                <span>4</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <p>查看职业目标任务</p>
                        </div>
                    </div>

                </div>
            </div>

            <div class=" row">
                <div class="col-lg-3">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="circular">
                                <span>5</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <p>参考学习资源，掌握技能点，逐个完成任务</p>
                        </div>
                    </div>

                </div>

                <div class="col-lg-3">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="circular">
                                <img src="tupian/图层%204.png">
                                <span>6</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <p>加入班级，和小伙伴们互帮互助，一块学习</p>
                        </div>
                    </div>

                </div>

                <div class="col-lg-3">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="circular">
                                <img src="tupian/图层%204.png">
                                <span>7</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <p>悬着导师，一路引导，加速自己成长</p>
                        </div>
                    </div>

                </div>

                <div class="col-lg-3">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="circular">
                                <img src="tupian/图层%204.png">
                                <span>8</span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <p>完成职业技能，升级业界大牛</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="excellent">
            <h1 class="explain">优秀学员展示</h1>
            <div class="row">
                <div class="col-lg-3">
                    <div class=" exhibition">
                        <img src="tupian/椭圆%207.png">
                        <span>技术顾问:罗大佑</span>
                        <p>百度技术总监:互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class=" exhibition">
                        <img src="tupian/椭圆%207%20拷贝%204.png">
                        <span>技术顾问:罗大佑</span>
                        <p>百度技术总监:互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class=" exhibition">
                        <img src="tupian/椭圆%207%20拷贝%205.png">
                        <span>技术顾问:罗大佑</span>
                        <p>百度技术总监:互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class=" exhibition">
                        <img src="tupian/椭圆%207.png">
                        <span>技术顾问:罗大佑</span>
                        <p>百度技术总监:互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
                    </div>
                </div>
            </div>
            <img src="tupian/图层%205.png">
        </div>
        <div class="cooperation">
            <img src="tupian/战略合作.png">
        </div>
        <div class="link">
            <h1 class="explain">有情链接</h1>
            <ul>
                <li>手机软件</li>
                <li>教师招聘</li>
                <li>找工作</li>
                <li>教师招聘</li>
                <li>找工作</li>
                <li>手机软件</li>
                <li>教师招聘</li>
                <li>手机软件</li>
                <li>手机软件</li>
                <li>找工作</li>
            </ul>

            <ul>
                <li>手机软件</li>
                <li>教师招聘</li>
                <li>找工作</li>
                <li>教师招聘</li>
                <li>找工作</li>
                <li>手机软件</li>
                <li>教师招聘</li>
                <li>手机软件</li>
                <li>手机软件</li>
                <li>找工作</li>
            </ul>
        </div>
    </div>

    <div class="low row" style="--bs-gutter-x: 0;">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="public1">
                <p>技能树——改变你我</p>
            </div>
            <div class="public1">
                <p>关于我们|联系我们|合作企业</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="public2">
                <p>旗下网站</p>
            </div>
            <div class="public4">
                <p>草船云孵化器</p>
                <p>最强IT特训营</p>
            </div>
            <div class="public4">
                <p>葡萄藤轻游戏</p>
                <p>桌游精灵</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="public3">
                <p>微信公众号平台</p>
                <img src="tupian/qrcode_for_gh_32213eeb65ba_1280.png">
            </div>
        </div>
    </div>

</div>

</body>
</html>




学习了一点点js的基础，并练习了一点



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title>js练习</title>
  <!--    内嵌式的js-->
  <script>

    var temp;
    var apple1 = '青苹果';
    var apple2 = '红苹果';
    temp = apple1;
    apple1 = apple2;
    apple2 = temp;
    console.log(apple1);
    console.log(apple2);
    //数字型最大值
    console.log(Number.MAX_VALUE);
    //数字型最小值
    console.log(Number.MIN_VALUE);

    console.log(isNaN(13));//返回false
    console.log(isNaN('李白'));//返回true

    var str = '我是一个前端\n程序员';       //\n代表换行的意思，\是转义字符
    console.log(str);
    console.log(str.length);
    console.log('李白' + '杜甫');//+起拼接的作用   最后结果是李白杜甫
    var age = 18;
    console.log('李白'+age+'岁');

    var age1 = prompt('请输入你的年龄');
    var str1 = '你今年' + age1 + '岁';
    alert(str1);

  </script>
  <!--    外部js代码 双标签-->
  <!--    <script src="my.js"></script>-->
</head>
<body>

</body>
</html>




明天计划：完成接下来的任务。



上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1