任务十四代码：

less代码：

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

* {
  margin: 0;
  padding: 0;
}

.col-lg-4 {
  padding: 10px;
  position: relative;
  z-index: 0;
}

.threshold .col-lg-6 {
  padding-right: 0;
}


.box {
  width: 100%;
  margin: 0 auto;
  background-color: #fafafa;
}

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

.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%;
}

.cooperation {
  width: 100%;
}

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

.navigation img {
  float: left;
  margin-left: 200px;
  margin-top: 30px;
}

.a {
  text-align: center;
  margin: 5%;
}

.a ul li {
  display: block;
  width: 80px;
  font-size: 15px;
  float: left;
}

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

.content {
  width: 100%;
}

.b {
  width: 100%;
  margin-top: 50px;
  border-color: @bdcolor;
  border-bottom-style: solid;
  padding: 50px 0;
}

.b span {
  font-size: 15px;
}

.b a {
  font-size: 15px;
  color: @bgcolor;
  text-decoration: none;
}

.classification {
  width: 100%;
  display: block;
  padding: 30px 0;
}

.classification h5 {
  font-size: 15px;
}

.classification h5 button {
  font-size: 15px;
  color: #333333;
  background-color: @color;
  padding: 6px 12px;
  border: none;
  border-radius: 5px;
  margin-left: 12px;
}

.introduce {
  width: 100%;
  border-bottom-style: solid;
  border-color: @bdcolor;
  padding: 30px 0;
}

.introduce span {
  font-size: 20px;
  color: #333333;
  font-weight: bolder;
}

.o {
  background-color: @color;
  margin: 0 auto;
}

.chart1 {
  width: 100%;
  display: block;
  font-size: 15px;
  color: #5d5d5d;
  margin-bottom: 0;
}

.chart1 img {
  margin: 20px 10px;
  float: left;
}

.chart1 h3 {
  font-size: 20px;
  padding: 30px 0;
  margin-bottom: 0;
}

.chart1 p {
  font-size: 15px;
  color: #5d5d5d;
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom-style: solid;
  border-color: @bdcolor;
}

.threshold {
  width: 100%;
  display: block;
  padding: 10px 0;

}

.row {
  padding: 0;
}

.threshold p {
  font-size: 15px;
  color: #b0b0b0;
  margin-bottom: 0;
  display: inline-block;
  margin-left: 5px;
  padding-bottom: 10px;
}

.threshold img {
  display: inline-block;
  padding-left: 10px;
}

.g {
  width: 100%;
  height: 100%;
  border-right-style: solid;
  border-color: @bdcolor;
  padding: 5px 0;
}

.y {
  width: 100%;
  padding: 5px 0;
}

.threshold span {
  color: #f4716b;
  font-size: 15px;
  font-weight: bolder;
}

.threshold span p {
  font-size: 15px;
  color: #3333;
}

.treatment {
  padding: 0;
}

.n {
  border-right-style: solid;
  border-color: @bdcolor;
}

.treatment p {
  font-size: 15px;
  color: #a9a9a9;
  text-align: center;
  line-height: 150px;
  margin-bottom: 0;
  border-top-style: solid;
  border-color: @bdcolor;
}

.v {
  border-top-style: solid;
  border-color: @bdcolor;
}

.study {
  width: 100%;
  border-top-style: solid;
  border-color: @bdcolor;
}

.study span {
  color: #333333;
  font-size: 15px;
  font-weight: bolder;
  line-height: 40px;
  margin-left: 10px;
}

.study p {
  font-size: 15px;
  color: #a9a9a9;
  line-height: 40px;
  margin-bottom: 0;
}

.m:hover {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}

.m span {
  font-size: 16px;
  padding: 85px 20px 35px ;
  margin-bottom: 0;
  display: block;
  text-align: center;
  position: absolute;
  opacity: 0;
  z-index: 1;
}

.m span p {
  padding: 30px 20px;
}

.m span:hover {
  background-color: #333333;
  opacity: 0.8;
  color: @color;
  height: 100%;
}


.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;
}

.j {
  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>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=720,initial-scale=1">
        <link rel="stylesheet/less" type="text/css" href="zhiye.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">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></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" alt="">
            <img class="icon" src="tupian/图层%202.png" alt="">
            <img class="icon" src="tupian/图层%203.png" alt="">
        </div>
    </div>
    <div class="navigation">

        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <img src="tupian/技能树.png">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <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>

    </div>

    <div class="container">
        <div class="content">
            <div class="b"> -
                <span>首页><a href="#">合作企业</a></span>
            </div>
        </div>
        <div class="classification">
            <h5>
                方向:
                <button class="btn btn-default" href="#" style="background-color: #29b078">全部</button>
                <button class="btn btn-default" href="#">前端开发</button>
                <button class="btn btn-default" href="#">后端开发</button>
                <button class="btn btn-default" href="#">移动开发</button>
                <button class="btn btn-default" href="#">整站开发</button>
                <button class="btn btn-default" href="#">运营维护</button>
            </h5>
        </div>

        <div class="introduce">
            <span>前端开发方向</span>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-12 col-sm -12">
                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-12 col-sm -12" href="#">

                <div class="m">
                    <span>iOS工程师
                        <p>iOS是由苹果公司开发的移动操作系统，iOS与苹果Mac OS X操作系统一样，也是以Darwin为基础的，
                            因此同样属于类Unix的商业操作系统。
                            国内iOS开发起步相对比较晚，人才培训机制更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。
                            国内iOS开发起步相对比较晚，人才培训机制更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。</p></span>
                </div>

                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>


                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>


                </div>

            </div>


            <div class="col-lg-4 col-md-12 col-sm -12">
                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>

                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>


        </div>


        <div class="introduce">
            <span>后端开发方向</span>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-12 col-sm -12">
                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-12 col-sm -12">

                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-12 col-sm -12">
                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>

                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-lg-4 col-md-12 col-sm -12">
                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-12 col-sm -12">

                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class=" col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>
                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>
        </div>


        <div class="introduce">
            <span>运维方向</span>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-12 col-sm -12">
                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>
                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n"style="padding-right: 0;" >
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-12 col-sm -12">
                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>

                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-12 col-sm -12">

                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>

                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>
        </div>




        <div class="introduce">
            <span>运维方向</span>
        </div>
        <div class="row" style="padding-bottom: 300px">
            <div class="col-lg-4 col-md-12 col-sm -12">
                <div class="o">
                    <div class="chart1">
                        <img src="tupian/图像1.png">
                        <h3>Web前端工程师</h3>
                        <p>Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p>
                    </div>
                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g" style="border-bottom-style: solid;border-color: #e6e6e6">
                                <p>门槛</p>
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6" style="border-bottom-style: solid;border-color: #e6e6e6;">
                            <div class="y">
                                <p>难易程度</p>
                                <img src="tupian/星星.png">
                                <img src="tupian/星星.png">
                            </div>
                        </div>
                    </div>

                    <div class="threshold row">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="g">
                                <p>成长周期</p>
                                <span>1-3<a style="color: #5d5d5d">年</a></span>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="y">
                                <p style="padding: 0 0 10px 0;">稀缺程度</p>
                                <span>345<a style="color: #5d5d5d">家公司需要</a></span>
                            </div>

                        </div>
                    </div>

                    <div class="treatment row">
                        <div class="col-lg-5 col-md-5 col-sm-5 n" style="padding-right: 0;">
                            <p>薪资待遇</p>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-7" style="padding-left: 0">
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">5k-10k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">1-3年</span>
                                <span style="margin-left: 60px">10k-20k/月</span>
                            </div>
                            <div class="v">
                                <span style="margin-left: 30px; line-height: 50px">0-1年</span>
                                <span style="margin-left: 60px">20k-50k/月</span>
                            </div>
                        </div>
                    </div>

                    <div class="study">
                        <span>有<a style="color: #f4716b">286</a>人正在学</span>
                    </div>

                    <div class="study">
                        <p>提升:在你学习之前你应该已经掌握xxxxx,xxxx,xx等语言基础</p>
                    </div>
                </div>
            </div>
        </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 class="j">技能树——改变你我</p>
            </div>
            <div class="public1">
                <p class="j">关于我们|联系我们|合作企业</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="public2">
                <p class="j">旗下网站</p>
            </div>
            <div class="public4">
                <p class="j">草船云孵化器</p>
                <p class="j">最强IT特训营</p>
            </div>
            <div class="public4">
                <p class="j">葡萄藤轻游戏</p>
                <p class="j">桌游精灵</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="public3">
                <p class="j">微信公众号平台</p>
                <img src="tupian/qrcode_for_gh_32213eeb65ba_1280.png">
            </div>
        </div>
    </div>


</div>
</body>
</html>

JS如何获取Dom属性的值，以及修改Dom属性值。

Web API 基本认知

作用: 就是使用 JS 去操作 html 和浏览器

分类：DOM (文档对象模型)、BOM（浏览器对象模型）

DOM树是什么

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

 描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能

DOM作用 :开发网页内容特效和实现用户交互

DOM对象：

浏览器根据html标签生成的 JS对象 所有的标签属性都可以在这个对象上面找到 修改这个对象的属性会自动映射到标签身上

DOM的核心思想:

把网页内容当做对象来处理

document 对象 :

是 DOM 里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的 例：document.write()

网页所有内容都在document里面

深度思考

1.为什么要做组件库？

什么是组件？

组件

它的核心意义在于代码复用。功能相对单一或者独立，在整个系统的代码层次上位于最底层，被其他代码所依赖。

模块

它的核心意义在于分离职责。它的关注点在于功能划分。 例如： 视频通话、语音通话等功能就可以被分为不同的模块

为什么要做组件库

传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，

系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，

可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，

而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，

不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，

而在前端开发中的体现就是组件化。

组件化的意义

为前端提供了很好的分治策略，可以实现独立维护，可维护性强

组件具有独立性，组件之间可以自由组合

页面只不过是组件的容器，负责组合组件即可形成功能完整的界面

组件开发的原则

标准性

任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。

组合性

组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。

那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。

重用性

任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。

可维护性

任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，

同时大大减少发生bug的几率。

今天看了一点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>
        // 这是一个输入框
        // prompt('请输入你的年龄')

        // alert 弹出警示框
        // alert('计算的结果是')

        // console 控制台输出 给程序员测试用的
        // console.log('程序员看到的')

        // 1、声明一个age的变量
        // var age;
        // 2、赋值  把值存入变量中
        // age = 18;
        // 3、输出值
        // console.log(age);
        //变量的初始化
        // var myname = '小明';
        // console.log(myname);
        var myname = prompt('请输入你的名字')
        alert(myname);

        var myname = '小明';
        console.log(myname);
        myname = '小亮';
        console.log(myname);

        var age = 18,
            name = '李白';
        console.log(age,name)


    </script>
<!--    外部js代码 双标签-->
<!--    <script src="my.js"></script>-->
</head>
<body>
<!--              行内式的js 直接写到元素的内部          -->
<!--                        onclick是点击的意思        alert是弹出框的意思                                -->
<!--    <input type="button" value="唐伯虎" onclick="alert('秋香')">-->
</body>
</html>

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