发表于: 2021-04-12 20:41:51
1 961
今天完成的事情:任务十三完成,任务十四制作自己的组件库(进行中)。
明天计划的事情:任务十五进行,知识总结。
遇到的问题:组织自己的组件库方向不明确,个别网页样式的代码不熟。
收获:
sass制作CSS架构:任务中三个页面通用的一些样式和属性,写到一个sass文件内,然后引用。
下面为任务十三通用的样式,和一些架构。
html, body { /CSS默认属性重置/
margin: 0;
padding: 0;
height: 100%;
min-width: 370px;
background-color: rgb(240, 240, 240);
}
header{ /任务中三个页面通用的一些属性和结构/
position: fixed;
top: 0;
z-index: 99;
display: flex;
justify-content: space-between;
width: 100%;
background-color: rgb(105, 210, 235);
}
.header-top {
padding: 10px 0;
}
footer, .fixed-footer { /任务三个网页页面通用的属性值/
position: fixed;
bottom: 0;
}
.gap, .bottom-l, .bottom-r, label, .active, span, .wrapper, .span-two, .box-l {
display: inline-block;
}
span, .box-top, .span-two {
background-repeat: no-repeat;
}
.bottom-l, .bottom-r, .form, .center-l, label, .bottom, .box-top {
text-align: center;
}
.form, .center-l, .active {
border: 1px solid rgb(219, 219, 219);
}
制作自己的组件库,目前自己需要的样式,属性,都汇总到自己的组件库中。
设置基础CSS重置和基础样式,
设置全局需要依赖的样式:变量、颜色、度量等。
网格布局(介入的媒体查询)使页面在不同宽度下的不同样式。
评论