百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第九天到第十一天

作者三十六咲课程第九天到第十一天:来做一个漂亮的网站1252次浏览132018-05-06 15:20

为期三天的任务,是将设计稿转化为网页,利用所学的html和css的知识。

实话说,这对于我而言,真的是一个艰难的任务。

简单的看看这次的困难有哪些。

  1. 完全没学过ps, 不懂切图
  2. 只写过简单的布局demo,对于整站的布局,感到无从下手,(换句话说,这26个字母我都认识,可他们一拼在一起,就不明白了)
  3. 页面元素他们各种的属性确定,又如何去进行设置。

当然,再看一下,怎么去解决这些问题的,虽然解决的方法很low,但最终还是写出来了吧。

  1. 对于ps, 通过简单的了解切图的步骤,勉强切出了小图片,至于大块的背景图(这里搜索了一下),然后在相应的图层直接导出png。
    2.如何去确定某个元素的属性值呢,这里就用到了pxcook, 它可以自动根据所选中的区域,生成css代码,还能测量元素之间的距离,挺好用的,就是生成的代码量有点多,很多都是不必要的(通过继承样式,默认样式,可以少写很多)
  2. 至于代码方面,我采用了一种最麻烦的方式去写完了这个页面, 也就是,我一部分一部分的去写,从头到尾,所以代码量感觉非常的大,但总算是撸完了,
  3. 代码写的乱七八糟的, 哈哈

一些经验之谈

  1. 在一个容器中,元素与元素之间的距离,尽量规定统一标准,就是 下一个元素距上一个元素的margin-top 或 上一个元素距下一个元素的 margin-bottom ,别写的乱起八糟的。
  2. 浮动元素的父元素需要进行清浮动 ,最常用的方法,就是 添加类 clearfix
    .clearfix:after {
     content: '';
     display: block;
     clear: both;
    }
    /*兼容老IE*/
    .clearfix {
     *zoom: 1
    }
    
  3. 相对定位和绝对定位的搭配使用,绝对定位是真的好用, 但也不是一定要用, 其实用margin 和 padding 也能到达某些位置,不过有点不是那么灵活
  4. 还是要在写之前做一个大概的规划,不然写着写着,来回的添加删除某些元素,类,真的是令人烦躁
  5. 类名,类名,类名,取个名字是真的麻烦, 就差翻英语字典了。
  6. 对不起,英语太差,限制了能力, 所以也要补英语了,先那软件凑合一下

El Psy Congroo

8条评论