发表于： 2018-11-07 20:57:31
1 672
今天完成的事情：
今天完成任务七的第三个页面，然后对这三个页面的代码就行了调试
然后在手机上查看了这三个页面
任务链接：
https://momodezou.github.io/learngit/css-7/task7-1.html
然后最近这两个任务里都有用css绘制圆和三角形的要求，所以在这里总结一下
css绘制图形时使用的常用属性：border，border-radius,transform（旋转:rotate,缩放:scale,倾斜:skew,移动:translate)等
css绘制图型种类：
1.圆
.circle{
width:10rem;
height:10rem;
border-radius:50%;
background:orange;
}
当高宽相等时就是圆，不相等时是椭圆
2.三角形
.triangle{
margin-top:5rem;
width:0;
border-bottom:5rem solid#00a000;
border-left:5rem solid transparent;
border-right:5rem solid transparent;
}
四个朝向的三角形可以通过设定的border的值来实现，比如说朝向右边的三角形就需要把上下的边框设置成透明，然后写border-left的属性
3.梯形
梯形和三角形差不多，只需要把调整width的值
4.平行四边形
.parallelogram{
margin:5rem;
width:10rem;
height:5rem;
transform:skew(30deg);
background:orange;
}
平行四边形主要是用到了skew倾斜这个属性
明天计划的事情：
提交任务七，回顾任务七里面的知识重难点，把一些地方再重新写一次
开始任务八
遇到的问题：
今天第三个页面的文字对齐思考了好一会，最后用table属性布局解决了
收获：
通过最近的练习，对布局的理解加深了许多，在做任务的时候也顺畅了许多，继续加油！
返回列表
评论