[散修弟子]CSS-7961|2019年10月09日的日报-技能树.IT修真院

发表于： 2019-10-09 07:30:18

3 1021

今天完成的事

1.开发环境从webstorm转到vscode

webstorm收费体积大且安装到新机子上需要破解

因此换成vscode 开源免费并且拓展插件多

2.闲暇时间弄了几天始终弄不了GitHub和vscode的联结

在笔记本的本地库改动始终无法推送到GitHub上

3.由于克隆的速度实在太慢且经常断掉将主远程库从GitHub切换成码云（gitee）

4.将GitHub的仓库同步到码云

5.添加完ssh开始使用码云的时候也是无法联结然后才查询到要使用终端切换联结方式

由https切换到ssh

PS D:\HTML-task\start-a-project\start-a-project> git remote rm origin

PS D:\HTML-task\start-a-project\start-a-project> git remote add origin git@gitee.com:sunsky92/start-a-project.git

PS D:\HTML-task\start-a-project\start-a-project> git push -u origin master

并且推断之前GitHub和vscode的联结不成功应该也是这个原因

6.开启码云的 Gitee Pages 服务

网址 https://sunsky92.gitee.io/start-a-project

7.继续任务12

8.发觉vscode不能自动编译less文件

安装Easy less插件

9.完善header的样式

.header {
    .fixed;
    .widht(100%);
    .height(50px);
    .color1;
    .inline-flex;
    align-content: center;
    div {
        .widht(140px);
        .height(40px);
        .fixed;
        .left(50%);
        margin-left: -70px;
        input {
            .none;
        }
        label {
            .block;
            border: 1px solid rgb(94,192,206);
            .color2;
            .height(40px);
            border-radius: 5px;
            transition: 0.3s;
            .pointer;
            .move {
                .block;
                .widht(70px);
                .height(40px);
                border-radius: 5px;
                background: white;
                transition: 0.3s;
            }
            .text {
                .widht(140px);
                .fixed;
                top: 10px;
                .inline-flex;
                em {
                    text-align: center;
                    .widht(100%);
                    font-style: normal;
                }
            }
        }
    }
    img {
        .fixed;
        .right(10px);
        .height(20px);
        .pointer;
        top: 10px;
    }
}

10.架构导航删选部分

<div class="div1">
    <select>
        <option value="所在地">所在地</option>
    </select>
    <select>
        <option value="食宿">食宿</option>
    </select>
    <select>
        <option value="病人情况">病人情况</option>
    </select>
</div>

11.导航部分样式

.div1 {
    .white-b;
    top: 50px;
    margin: 0;
    .fixed;
    .widht(100%);
    .height(50px);
    .inline-flex;
    align-items: center;
    select {
        text-align: center;
        text-align-last: center;
        .pointer;
        .height(100%);
        .widht(33.3%);
        color: darkgrey;
        border: 1px solid silver;
    }
}

12.补充样式使单选按钮可以滑动

13.将task12-1.less中引用的公共类分离出去放入单独一个less文件中在引用入task12-1.less

@import "task12-cless";

14.架构主题部分

15.引入主任列表样式

.div1 {
    .flex;
    flex-direction: column;
    padding: 100px 0px 50px 0px;
    margin: 0px;
    overflow-y: hidden;
    z-index: -1;
    p {
        .widht(100%);
        .border-silver;
        padding: 20px 0 19px 0;
        span {
            .flex;
            .widht(0);
            flex-direction: column;
            height: 20px;
            background-image: url(列表页.png);
            background-repeat: no-repeat;
            background-size: 400px;
        }
        .span1 {
            background-position: -10px 5px;
            white-space: nowrap;
            padding-left: 25px;
            color: silver;
        }
        .pp {
            .flex;
            .widht(0);
            justify-content: space-between;
            padding-left: 26px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 21px;
            font-size: 0;
            padding-top: 4px;
            .text {
                .block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                vertical-align: middle;
            }
            .t1 {
                font-size: 14px;
                height: 16px;
            }
            .t2 {
                font-size: 16px;
                color: red;
                background-image: url(矢量智能对象.png);
                background-repeat: no-repeat;
                background-position: 80px;
                padding-right: 70px;
            }
        }
    }
}