[郑州|结业弟子]JS-王敏宇|2021年02月26日的日报-技能树.IT修真院

发表于： 2021-02-26 19:43:51

1 954

今天完成的事情：完成了任务十三

明天计划的事情：开始任务十四

1.完成任务十三时我使用了SASS

2.进行简单的常用标签的CSS reset

①什么是CSS reset

在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

②把代码部分写入reset.scss中

* {
    box-sizing: border-box;
}
html {
    font-size: 10px;
}
body {
    font-family: HiraginoSansGB,"Microsoft YaHei",Arial;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form {
    margin:0;
}
ul,ol {
    padding-left: 0;
    list-style: none;
}
button {
    border: 0;
    outline: none;
}
a {
    display: inline-block;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

3.制作CSS通用样式库

把常用的字体大小，或外边距内边距等写成代码，如

font-size: 18px 写成 ft18{ font-size: 18px;}

这样在引用这个数据的时候可以添加类名引用

4.制作网站CSS样式库

把网站常用的背景颜色或边框色等写为代码，如

background-color: red 写成 bgred { background-color: red;}

同样，使用数据的时候直接添加类名引用

5.把网站的小图标做成雪碧图

6.把网站的通用样式，如导航栏，按钮等元素写到一个新的scss文件中，如导航栏

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3.5rem;
    padding: 0 1rem;
    background-color: $DkBlue;
    color: #fff;
    > p {
        font-size: 1.7rem;
        letter-spacing: 0.2rem;
        text-indent: 0.2rem;
    }
}