发表于： 2017-03-04 22:27:43
1 1115
今天完成的事情：
1、和胡思豪、冯馨雨沟通各自的任务进度；
2、协助冯馨雨整理前台代目；
3、完成【前台-职业详情】的数据获取和样式修改；
4、完成【前台-找职位】公司搜索部分的样式修改；
5、制作ppt,讲利用css绘制特殊图形。
明天计划的事情：
1、开发【前台-找职位】公司搜索的轮播效果、数据效果和传参跳转页面；
2、开发推荐/最新职业的页面跳转、完善样式；
3、切换【前台-找职位】推荐/最新职业，获取数据；
遇到的问题：
写【前台-职业详情】的时候，对自定义过滤器不是很懂。于是，参考官方代码，也不是很明白，对于传参稀里糊涂。不得已，只能麻烦胡思豪了。胡思豪利用webstorm，追本溯源，一步一步的查找这些代码出现在什么地方，然后有调理的进行分析讲解代码的意思，总算搞懂了怎么使用自定义过滤器。
收获：
1、学习了如何使用自定义过滤器来格式化数据；
2、制作ppt，收获如下：
1.背景介绍随着互联网科技的发展，使用互联网的人越来越多，因此，逐渐引发了网页设计方面的变化和创新，用户友好型的网页成为一个重要的互联网窗口呈现在大家面前！今天，我们以小见大，从基础开始，简单介绍一下如何使用css绘制一些常见的图型。
2.知识剖析
在css绘制图形时，一般要使用到border-radius,transform（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）等属性来实现，接下来演示简单的图形。
2.1使用CSS绘制正方形
#suqare { width: 0; padding: 20px; background-color: red;}2.2使用CSS绘制矩形
#ractangle { width: 0; padding: 25px 40px; background-color: green;}2.3使用CSS绘制圆
#circle { width: 0; padding: 20px; background-color: red; border-radius: 50%;}2.4使用CSS绘制椭圆
#ellipse { width: 0; padding: 25px 40px; background-color: green; border-radius: 50%;}这是三角形的代码：
2.5使用CSS绘制上三角
#triangle-up {
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;} 2.6使用CSS绘制下三角
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;} 2.7使用CSS绘制右三角
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent;} 2.8使用CSS绘制左三角
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;}3.常见问题
问题一: 使用css绘制三角形时要注意什么？
4.解决方案
问题1：解决方案
5.编码实战
6.扩展思考
问题一:使用css可以绘制哪些图形？下方参考链接五中有，有兴趣的可以看看！
问题二:使用css绘制的三角形如何引用在设计中？一般会应用于对话框的样式，或者下拉菜单，又或者其他一些地方！大家可以在实践中总结一下！
7.参考文献
参考一：The Shapes of CSS：https://css-tricks.com/examples/ShapesOfCSS
参考二：纯CSS气泡框实现方法探究：http://www.cnblogs.com/zy-plan/p/5196635.html
参考三：CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）：http://www.bbs0101.com/archives/248.html
参考四：CSS实现各种形状：http://www.cnblogs.com/liangxiaofeng/p/5936760.html
参考五：纯CSS画图：http://www.shejidaren.com/pure-css-icons.html
8.更多讨论
讨论点一：用css绘图五角星是如何做成的？
讨论点二：用css绘图和HTML5新标签-canvas标签绘图哪个更好？
返回列表
评论