css3网页设计第一天学习案例和笔记

1、CSS3 公开课第一天 透过淘宝去看 CSS3主讲教师：播客 网页平面设计学院 htt发布目录1.11.21.3前言3概述3国内运用CSS3 的部分. 4CSS3 的兼容性问题4CSS3 和 CSS2 区别5淘宝运用CSS3 的技术。51.6.11.6.21.6.31.6.4我把网页上的角效果分为 3 类：6易迅单个三角的写法：6淘宝三角的写法：7大家经常要看的：. 81.7 CSS3 新加内容91.7.1 CSS3 2D转换 transform91.7.2 CSS3 过渡 transition91.1前言有的同学有基础，没有基础的同学听懂原理盖房子：地基-盖楼房主体装修上课的思路： 通过实例

2、-来学习知识1.2概述站在网页前端的基础上，咱们互联网分为几个阶段？1. Web1.0前端技术CSS+HTML2. 以web2.0前端技术： JS/dom/异步数据传输3. 将来肯定 HTML5+CSS3总结： HTML5 代表互联网的未来CSS3提高了网络速度1.3国内运用 CSS3 的部分1.4CSS3 的兼容性问题谷歌欧朋苹果ie9（包含）世界上 还有 37% 的用户用的是 window xp中国又占了 72%2 亿人好处： 现在学习正合适。1.5CSS3 和 CSS2 区别CSS3是对CSS2 进行的扩充和优化。1.6 淘宝运用 CSS3 的技术。案例一： CSS 旋转角1.案例分析1

3、.6.1我把网页上的角效果分为 3 类：1. 京东：做的三角2. 易迅网：用一个盒子 css 来写的三角3. 淘宝网：是用两个盒子 css 写的三角1.6.2易迅单个三角的写法：1 无标题文档divwidth:100px; height:100px; 4 /* border-top:10px solid #F00;567891011121314151617181920border-right:10px solid #00ff00; border-bottom:10px solid #0000ff; border-left:10px solid #F0F; */ border-style:sol

4、id;border-width:10px;border-color:#F00 transparent width:0; height:0;transparenttransparent;1.6.3淘宝三角的写法：body,ul,limargin:0; padding:0; border:0; 3 ulmargin:100px;list-style:none;afont-size:14px; color:#3c3c3c; text-decoration:none;ul liwidth:100px; height:35px; line-height:35px; border:1px solid #f

5、00;6 ul li amargin-right:10px; flo line-height:35px;eft; height:35px;7 ul li idisplay:block; height:6px; width:6px; floeft;margin:15px 0;ition:relative;em,span width:0; height:0;border-style:solid dashed dashed dashed;1011121314151617border-width:3px;border-color:transparent; ition:absolute;top:0; left:0;emborder-top-color:#3c3c3c; top:1pxspanborder-top-color:#;181920212223淘宝2425261.6.4 一个大家一定经常看的：1.7 CSS3 新加内容1.7.1CSS3 2D 转换 transform要进行旋转 60 度roe例如旋转度数是： deg度数的表示度Transform:roe（60deg）ul li:hover itransform:roe(180deg);1.7.2CSS3 过渡transitionTransit