![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
灬银瓶丶
热爱前端,让我们一起学习进步吧!
展开
-
前端学习从入门到高级全程记录之20(CSS高级技巧:动画原理&携程网案例&3D)
学习目标本期将会学习动画原理、携程网案例、3D等知识。1.动画(CSS3) animation动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。语法格式: animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意r@keyframes 动画名称...原创 2019-12-25 15:52:30 · 426 阅读 · 0 评论 -
前端学习从入门到高级全程记录之19(CSS高级技巧:学成在线案例完善)
学习目标本期主要学习3D、学成在线完善、动画原理。1.学成在线完善在17期中,我们基本完成了学成在线案例的上部,但还有一些内容没做,今天利用18期和之前所学知识继续完善它。我的课程表index.html<!--小圆点--> <div class="circle"> <i class="current"></i> ...原创 2019-12-17 19:23:28 · 304 阅读 · 0 评论 -
前端学习从入门到高级全程记录之18(CSS高级技巧--过渡、2D变形)
学习目标本期继续学习CSS高级技巧1.京东过渡效果在京东网页会有图片的一个过渡效果,我们利用之前学习的知识来实现它:html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{...原创 2019-12-15 18:14:33 · 123 阅读 · 0 评论 -
前端学习从入门到高级全程记录之17(综合案例:学成在线)
学习目标本期继续巩固之前学习的知识,学习一个新的案例:学成在线。1.学成在线项目搭建首先我们先看一下我们要做的部分:然后所需要的材料:文件太大,老办法:百度网盘链接:https://pan.baidu.com/s/1RDMQn-cTevR_uZOxe1_klw提取码:zpu7所需要的图片:1. ico图标制作我们可以自己做的图片,转换为 ico图标,以便放到...原创 2019-12-13 17:13:09 · 427 阅读 · 0 评论 -
前端学习从入门到高级全程记录之16(CSS高级技巧)
本期目标本期我们继续学习一些CSS的高级技巧。1.CSS W3C 统一验证工具CssStats 是一个在线的 CSS 代码分析工具,可以分析你写的代码到底好不好,哪里出错。网址是: http://www.cssstats.com/如果你想要更全面的,这个神奇,你值得拥有:W3C 统一验证工具: http://validator.w3.org/unicorn/ ☆☆☆☆☆因...原创 2019-12-02 17:44:33 · 548 阅读 · 0 评论 -
前端学习从入门到高级全程记录之15 (京东项目三)
学习目标本期继续完善京东项目1.京东项目(三)项目继续上一期原创 2019-11-27 14:48:02 · 144 阅读 · 0 评论 -
前端学习从入门到高级全程记录之14 (京东项目二)
目标本期继续学习经典项目—京东项目京东项目(二)1.navitems开始navitems结束2.底部服务开始3.服务模块完成4.help模块开始help完成5.京东底部完成6.京东主题部分广告制作7.广告复习again8.版心三个模块划分9.家用电器模块10.轮播图部分完成11.三个小问题...原创 2019-11-26 17:36:39 · 515 阅读 · 0 评论 -
前端学习从入门到高级全程记录之13 (京东项目一)
学习目的本期将会学习一个京东项目,综合知识非常多。原创 2019-11-20 17:44:26 · 14993 阅读 · 0 评论 -
前端学习从入门到高级全程记录之12 (CSS高级技巧)
目的5.字体图标图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的“http请求”,这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。我们后面会学习移动响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,就是字体图标(iconfont)。字体图标优点可以做出跟图片一样可以做的事情,改变...原创 2019-11-08 17:29:53 · 315 阅读 · 0 评论 -
前端学习从入门到高级全程记录之11 (云道页面例子后续)
5.字体图标图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的“http请求”,这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。我们后面会学习移动响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,就是字体图标(iconfont)。字体图标优点可以做出跟图片一样可以做的事情,改变透明度...原创 2019-11-02 09:23:04 · 553 阅读 · 0 评论 -
前端学习从入门到高级全程记录之10 (CSS高级技巧)
本期目标来到本期学习的同学注意:难的知识点我们已经学完了,以后将是我们的综合运用,然后还要学习一些高级技巧。1.元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是display,visibility和overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出...原创 2019-10-11 10:19:10 · 380 阅读 · 0 评论 -
前端学习从入门到高级全程记录之9 (CSS高级知识:定位)
本期所学主要知识定位:相对定位、绝对定位、固定定位。本期把定位学完,后面基本就没有新的难点了,都是一些综合应用。1.定位(position)之前我们接触过:background-position 背景定位如果说浮动关键在一个“浮”字上面,那么我们的定位,关键在于一个“位”上。PS:定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天...原创 2019-09-26 15:14:42 · 262 阅读 · 0 评论 -
前端学习从入门到高级全程记录之8 (PS基本使用&综合案例)
本期学习目标本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例。1.Photoshop基本使用早在第一期我就让大家去安装PS,不知道安装了没有,没有安装的尽快安装,百度有很多免费资源。之所以学习PS,是因为前端需要用到PS上的功能,例如切图,量尺寸等。PS界面组成菜单栏、选项栏、工具栏、浮动面板(拖曳名称,可单独操作面板)、绘图窗口窗口菜单,可显示隐...原创 2019-08-29 18:23:09 · 553 阅读 · 1 评论 -
前端学习从入门到高级全程记录之7 (CSS高级知识)
本次学习目标1.继续学习外边距2.熟练掌握CSS浮动1.外边距外边距实现盒子居中可以让一个盒子实现水平居中,需要满足一下两个条件:1.必须是块级元素2.盒子必须指定了宽度(width)然后就给左右外边距都设置为auto,就可使块级元素水平居中。实际工作中常用这种方式进行网页布局,示例代码如下:.header{ width: 960px; margin: 0 auto;}做...原创 2019-08-13 18:01:13 · 279 阅读 · 0 评论 -
前端学习从入门到高级全程记录之6 (CSS高级知识)
学习目标大家好,欢迎来到新的一期学习。本期学习目标:1.熟练掌握CSS盒子模型2.熟练掌握CSS浮动3.熟练掌握CSS定位4.熟练掌握CSS高级技巧强化CSStypora-copy-images-to: media1.盒子模型(CSS重点)其实,CSS就是三个大模块:盒子模型、浮动、定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的...原创 2019-08-05 15:44:05 · 309 阅读 · 0 评论 -
前端学习从入门到高级全程记录之4 (CSS基础知识)
本次学习目标学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSStypora-copy-images-to: media☆本次学习我们继续学习CSS的基础...原创 2019-07-31 09:38:20 · 711 阅读 · 0 评论 -
前端学习从入门到高级全程记录之5 (CSS高级知识)
本期学习目标1.熟练掌握CSS背景属性2.熟练掌握CSS三大特性3.熟练掌握CSS盒子模型4.熟练掌握CSS浮动5.熟练掌握CSS定位6.熟练掌握CSS高级技巧强化CSStypora-copy-images-to: media1.CSS书写规范开始就形成良好的书写规范,是你专业化的开始。空格规范【强制】选择器与{之间必须包含空格。示例:.selector {}【强制】...原创 2019-08-02 15:17:08 · 353 阅读 · 0 评论 -
前端学习从入门到高级全程记录之3 (CSS基础知识)
本次学习目标本次原创 2019-07-30 10:27:17 · 327 阅读 · 0 评论