发表于: 2016-06-30 22:46:58

2 1383


今天完成的事情:

完成任务8



明天计划的事情:

进行任务9,把之前的知识点整理下,重点放在四种定位方式(明晚得讲课==!!!)



遇到的问题:

Q1:给ul下的第一个li设置position:relative;无效,position: absolute;的li元素会已html为基准定位。

A1:给外层ul设置position:relative;有效。同层不能设置绝对定位,relative只能设置在外层。


Q2:<p>Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发。</p> 

显示效果如图1

A2:<p>Web前端开发工程师,主要职责是

    利用(X)HTML/CSS/JavaScript/

    flash等各种Web技术进行产品的开

    发。</p> 

显示效果如图2。发现在<p>标签中换行在页面会显示一个空格。

建议:因为内容里有汉字、英文和标点符号。所以文字右边无法对齐。所以<p>不需要如此设置,只需左对齐让文字自动排版。



收获:

学会使用transform、backface-visibility、transition三个标签元素


transform: rotateY(-180deg);  括号中正值代表顺时针旋转,负值逆时针旋转

backface-visibility: hidden;  定义元素在不面对屏幕时是否可见。


transform: rotateY(0deg);    0deg表示恢复原样

transition: 1s;              从180度旋转恢复至原样的时间为1s


transform 2D效果: translate 位移,rotate 旋转角度,scale 尺寸变化,skew 翻转, 

matrix 用六个值的矩阵,旋转、缩放、移动以及倾斜(这个没看懂...)


transform 3D效果

http://www.w3school.com.cn/css3/css3_3dtransform.asp


过渡transition 属性名 过渡效果时间 时间速度曲线 开始时间

http://www.w3school.com.cn/css3/css3_transition.asp 


使用 CSS transitions

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions 


服务器的事小四姐说等有消息就通知我,师兄们项目忙,还没抽出时间来整。

代码链接为任务8的代码。因为引用的同一个公共文件base.css,task8的代码就先暂时放在task7的目录下了。

附上今天线下CSS讨论链接:http://bbs.ptteng.com/forum.php?mod=viewthread&tid=8733


返回列表 返回列表
评论

    分享到