发表于: 2018-05-23 23:17:50
1 677
今天完成的事:继续任务七
明天的计划:继续任务七
明天的计划:继续任务七碰到的问题:在给任务七的页面切图的时候发现,这个图是在Photoshop是由六个小图像凑在一起组成的,如果用之前方法的话,就要一个一个的去试去找,找到后复制图层,太麻烦了,我选择发现直接切图,比那些花哨的方法方便快捷得多。
任务七的图片有部分是可以用css直接做出来的,
Square(正方形)
#square { width: 100px; height: 100px; background: red;}
Circle(圆形)
#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;}
Triangle Right(向右)
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent;}
Curved Tail Arrow(弯尾箭头)
#curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg);}#curvedarrow:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
Pac-Man(吃豆人)
#pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid red; border-left: 60px solid red; border-bottom: 60px solid red; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px;}
当然了,我觉得有图不直接拿来用去写这么多代码,有点那啥吧。
收获:今天最大的收获就是下载了蓝湖插件,虽然还不会用。学习了CSS框架Bootstrap,但是还没搞懂它的作用。
收获:
评论