经过两周的编写静态页面

成员：唐，张，朱，黄
时间：2022-07-26
我们四人，经过两周的编写，逐渐完成了OA静态页面办公系统的编辑，在这过程中不断遇到问题，不断解决问题，一起进步。由于我们小组成员的技术基础都不一样，做出来的成果不是很好，望见谅。希望我们以后的合作更加顺利，得到如下的成果:

我们的作品链接:

我们是模拟手机制作的，如果在PC端观看时，请模拟手机观看
名称：OA办公系统
网址：http://web.huruqing.cn/shukang/Office/office/office.html

我们使用的技术

html

任务分配，文件夹命名规范
没有主要布局清晰，类名规范
当然，在制作过程中，也遇到了一些问题
：比如说样式库路径写到绝对路径，造成后期的修改问题，以及命名后没有及时更新

一个基本的html页面

Snipaste_2022-07-26_13-07-58.png

css

在css中，我们通常都是用display：flex弹性布局,以及align-items和justify-content的对齐方式
让我们的页面效果更加完善，字体大小以及内外边距........一些常用css
background-color
width
height
margin
boder
font-size
position:relative 绝对定位;absolute相对定位;父相子绝
color
line-height:20px;
a:link{text-decoration: none;}
box-sizing: border-box;
font-weight: 400;
text-align:center;
当然，我们也有人把css样式写到html中的，我认为这是大可不必，如果说是弹性布局，到每个屏幕大小
不一的显示器上就会造成显示混乱了。这一次深有体会,而且代码得不到复用

less预处理器 一个css的插件

插件全名：Easy less
它能够很好的帮助程序员编辑代码，而且不用我么程序员编辑后代种种的关系。能使我们节约更多的时间，也使我们的代码出错率降低

代码演示
.yuedu{
    margin: 20px 0 0 10px; 
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 12px;
    color: rgb(141, 141, 141);
    input{
        transform: scale(1.2);
        margin:0 15px 0 5px;
    }
    span{
        margin-left: 4px;
        color: blue;
    }
    :nth-child(3){
      margin-left: 70px;
    }
}

结果
.yuedu {
  margin: 20px 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 12px;
  color: #8d8d8d;
}
.yuedu input {
  transform: scale(1.2);
  margin: 0 15px 0 5px;
}
.yuedu span {
  margin-left: 4px;
  color: blue;
}
.yuedu :nth-child(3) {
  margin-left: 70px;
}

阿里巴巴矢量图标库

名称：阿里巴巴矢量图标库
网址：https://www.iconfont.cn/
一个免费的图标库，使用方便，主要是我们要用到的图标基本都有。
使用：
当然，我们要先把我们要使用的图标添加到我们的阿里巴巴图标矢量库的项目中，然后下载，
注意
图标库必须先导入，最后在导入我们的css样式库,否则会造成图标库没生效

图标文件 最好拿一个文件夹装着

Snipaste_2022-07-26_12-56-18.png

图标库本地链接，先图标库，后自己的样式

Snipaste_2022-07-26_12-56-39.png

以及我们自己编写好的公共样式库

公共样式主要方便我们编辑，那些代码比较重复性高就写到公共样式中；