[散修弟子]CSS-7961|2020年01月05日的日报-技能树.IT修真院

发表于： 2020-01-05 00:15:00

3 940

今天完成的事

1.拆解出优秀学员的样式并稍作调整

    .student-div {
        margin: 0;
        display: flex;
        justify-content: space-between;
        .student-p {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            border: 1px solid rgb(238,237,237);
            padding: 10px;
            margin: 0 30px;
            .font2-1 {
                font-size: 14px;
                margin-top: 30px;
                color: silver;
                text-align: center;
            }
        }
    }

2.将页面1的文件聚集到一个文件夹里并且调整文件引用路径

3.拆解出战略合作企业部分的架构与样式

<!--战略合作企业部分"container"-->
<h5 class="cooperation-h1">
    <strong>战略合作企业</strong>
</h5>
<div class="container">
    <div class="row cooperation">
        <div class="img8 cooperation-hv"></div>
        <div class="img9 cooperation-hv"></div>
        <div class="img10 cooperation-hv"></div>
        <div class="img11 cooperation-hv"></div>
        <div class="img12 cooperation-hv"></div>
    </div>
</div>

@import "class.css" ;

.contact {
    .qq-left {
        position: fixed;
        top: 50%;
        margin-top: -80px;
        right: -137px;
        z-index: 9999;
        width: 137px;
        background: #59c196;
        text-align: center;
        border-radius: 5px;
        .right-bar:nth-of-type(1) {
            border-bottom: 2px solid #59c196;
        }
        .right-bar:nth-of-type(2) {
            border-top: 2px solid #59c196;
        }
        .right-bar-qq {
            padding-top: 20px;
        }
        .right-bar {
            padding: 10px 0 20px;
            background: #fff;
            border: 4px solid #59c196;
            border-radius: 8px;
            a {
                text-decoration: none;
                img {
                    margin-right: 7px;
                }
                img {
                    max-width: 100%;
                }
            }
            p {
                font-size: 14px;
                color: #59c196;
                margin: 10px 0 0;
            }
        }
        .right-bar-phone {
            background: #fff;
            border: 4px solid #59c196;
            border-radius: 8px;
        }
        .right-bar-btn {
            display: block;
            position: absolute;
            left: -27px;
            top: 40px;
            width: 27px;
            height: 116px;
            padding: 7px;
            font-size: 12px;
            color: #fff;
            background: linear-gradient(#78cca9, #59c196);
            border: 1px solid #24a06c;
            border-right: none;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            .img-1 {
                height: 10px;
            }
            .right-bar-btn img:nth-of-type(1) {
                margin-top: -2px;
                margin-left: -2px;
                margin-bottom: 4px;
            }
            .right-bar-btn img:nth-of-type(2) {
                margin-left: 2px;
                transform: rotate(180deg);
            }
        }
        .right-bar-adviser {
            cursor: pointer;
            p {
                font-size: 14px;
                color: #59c196;
                margin: 10px 0 0;
                img {
                    cursor: default;
                }
            }
            .adviser-icon {
                position: absolute;
                left: 1485px;
                top: -200px;
                height: 564px;
                max-width: none;
            }
        }
        .right-bar-adviser:hover {
            .adviser-icon {
                position: absolute;
                left: -484px;
                top: -200px;
                height: 564px;
                max-width: none;
            }
        }
    }
    .qq-left:hover {
        right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .contact {
        display: none;
    }
}/*联系方式模块在屏幕宽度小于767px的情况下隐藏*/

4.拆解出友情链接部分架构与样式

<!--友情链接部分“blogroll”-->
<h5 class="blogroll-h1">
    <strong>友情链接</strong>
</h5>
<div class="blogroll">
    <div class="container">
        <ul class="row blogroll-div">
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 手机软件
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 教师招聘
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 找工作
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 教师招聘
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 找工作
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 手机软件
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 教师招聘
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 手机软件
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 手机软件
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 找工作
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 手机软件
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 教师招聘
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 找工作
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 教师招聘
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 找工作
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 手机软件
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 教师招聘
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 手机软件
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 手机软件
            </a>
            <a class="blogroll-a col-lg-2-1 col-sm-2-1 col-md-2-1">
                • 找工作
            </a>
        </ul>
    </div>
</div>

@import "class.css" ;



.blogroll-h1 {
    color: #0f0f0f;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-top: 100px;
}


.blogroll {
    width: 100%;
    background-color: white;
    .blogroll-div {
        .blogroll-a {
            cursor: pointer;
            text-align: center;
        }
        .blogroll-a:hover {
            color: #1b6d85;
            text-decoration: underline;
        }
    }
}

@media screen and (max-width: 768px) {
    .blogroll-div {
        display: none;
    }
}

.col-xs-2-10,
.col-sm-2-10,
.col-md-2-10,
.col-lg-2-10 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.col-xs-2-2,
.col-sm-2-2,
.col-md-2-2,
.col-lg-2-2 {
    width: 20%;
    float: left;
}
.col-xs-2-1,
.col-sm-2-1,
.col-md-2-1,
.col-lg-2-1 {
    width: 10%;
    float: left;
    margin-top: 10px;
}
@media (min-width: 768px) {
    .col-xs-2-1,
    .col-sm-2-1,
    .col-md-2-1,
    .col-lg-2-1 {
        width: 10%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-2-1,
    .col-sm-2-1,
    .col-md-2-1,
    .col-lg-2-1 {
        width: 10%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-2-1,
    .col-sm-2-1,
    .col-md-2-1,
    .col-lg-2-1 {
        width: 10%;
        float: left;
    }
}

5.拆解出footer部分

<!--底部栏及页脚部分-->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="footer-div col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <p>技能树-改变你我</p>
                <div>
                    <a class="footer-a" href="https://sunsky92.github.io/start-a-project/take8/take8-1.html">关于我们</a> |
                    <a class="footer-a" href="#0">联系我们</a> |
                    <a class="footer-a" href="https://sunsky92.github.io/start-a-project/take8/take8-2.html">合作企业</a>
                </div>

            </div>
            <div class="footer-div col-lg-5 col-md-5 col-sm-5 col-xs-12">
                <p>旗下网站</p>
                <div>
                    <a class="footer-a">草船云孵化器</a>
                    &nbsp;&nbsp;
                    <a class="footer-a">最强IT训练营</a>
                </div>
                <div>
                    <a class="footer-a">葡萄藤轻游戏</a>
                    &nbsp;&nbsp;
                    <a class="footer-a">桌游精灵</a>
                </div>
            </div>
            <div class="footer-div footer-img col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <p>微信公众平台</p>
                <img src="../task14/imag/1280.png">
            </div>
        </div>
    </div>
</footer>
<div class="page-footer">
    Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号
</div>

@import "class.css" ;

.footer {
    width: 100%;
    background-color: rgb(27,163,110);
    .footer-div {
        display: flex;
        height: 100px;
        flex-direction: column;
        justify-content: space-between;
        margin: 20px 0 40px 0;
        color: white;
        padding-left: 40px;
        .footer-a {
            cursor: pointer;
            color: white !important;
        }
    }
    .footer-img {
        display: block;
        font-size: 15.4px;
    }
}

.page-footer {
    background-color: rgb(27,163,110);
    border: 2px solid rgb(38,193,132);
    text-align: center;
    color: white;
    cursor: pointer;

}

6.将导航栏部分替换为之前自己编写的代码以组件化的方式加入并调整样式

<!--导航栏-->
<nav class="navbar navbar-default div-nav" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle background-tran" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">IT修真院</a>
        </div>
        <div class="collapse navbar-collapse nav-div" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="https://sunsky92.github.io/start-a-project/take8/take8-1.html" class="aa ab">首页</a>
                </li>
                <li>
                    <a href="https://sunsky92.github.io/start-a-project/take8/take8-3.html" class="aa ab">职业</a>
                </li>
                <li>
                    <a href="#" class="aa ab">推荐</a></li>
                <li>
                    <a href="https://sunsky92.github.io/start-a-project/take8/take8-2.html" class="aa ab">关于</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

@import "class.css" ;

.div-nav {
    border: none;
    background-color: rgb(29,177,118);
    border-radius: 0px;

    a {
        color: white !important;
    }
    .nav-div {
        float: right;
        .ab:hover {
            border-bottom: 5px solid white;
            padding-bottom: 10px;
        }
    }
}

@media screen and (max-width: 765px){
    .div-nav {
        .nav-div {
        float: none;
        text-align: center;
        border-top: none;
        }
    }
}
@media screen and (max-width: 765px){
    .aa {
        border-bottom: 1px solid rgb(231,231,231);
    }
}

.background-tran {
    background-color: transparent !important;
}