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

1 952


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

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

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


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

①什么是CSS reset

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

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

* {
    box-sizing: border-box;
}
html {
    font-size10px;
}
body {
    font-family: HiraginoSansGB,"Microsoft YaHei",Arial;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form {
    margin:0;
}
ul,ol {
    padding-left0;
    list-style: none;
}
button {
    border0;
    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;
    height3.5rem;
    padding0 1rem;
    background-color: $DkBlue;
    color#fff;
    > p {
        font-size1.7rem;
        letter-spacing0.2rem;
        text-indent0.2rem;
    }
}

7.网站的结构样式

网站的结构样式一般限制网站的宽度,还有就是网站的分栏布局样式,可以通过媒体查询来实现


8.最后把通用的代码通过@import引入网页的css中,并在css中为一些精细的布局写样式


返回列表 返回列表
评论

    分享到