09 2018 档案

CSS 小结笔记之BFC
摘要：BFC 即为Block formatting context 的缩写，BFC 主要用来将一个盒子设置为一个隔离的容器，不管盒子内部的元素具有什么属性，都不会影响到盒子的外面。 1、哪些元素能产生BFC 不是所有的元素都能产生BFC的，只有display 属性为 block, list-item, t 阅读全文
posted @ 2018-09-30 12:29 Assist 阅读(670) 评论(0) 推荐(1)
CSS 实例之滚动的图片栏
摘要：在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下 主要原理是通过动画向左移动。 首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度， 这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不 阅读全文
posted @ 2018-09-23 08:11 Assist 阅读(4332) 评论(0) 推荐(0)
CSS 实例之翻转图片
摘要：具体效果图如下： 主要用到的技术除了3D翻转和定位 ，还用到了一个新的属性 backface-visibility：visable|hidden; 该属性主要是用来设定元素背面是否可见。 具体的步骤如下： 1、写出页面主体， 2、通过定位使两张图片叠加在一起 3、设置第一张图片背面不可见 4、添加旋 阅读全文
posted @ 2018-09-22 14:57 Assist 阅读(701) 评论(0) 推荐(1)
CSS 实例之打开大门
摘要：本个实例主要的效果如下图所示 本案例主要运用到了3D旋转和定位技术。具体步骤如下： 1、首先在页面主体加三个很简单的div标签： 2、给外层盒子（.door） 加上基本的属性、背景、视距以及相对定位（子盒子要用到绝对定位，所以父盒子最好 加上相对定位）。 3、给左右的门设置相关属性，这里给出左盒子的 阅读全文
posted @ 2018-09-21 09:53 Assist 阅读(1254) 评论(1) 推荐(2)
CSS 小结笔记之伸缩布局 (flex)
摘要：CSS flex 是一种伸缩布局，之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。 flex 为和模型布局提供了极大地灵活性，所谓弹性布局即可根据大小判定自动伸缩。 flex相关的各个属性如下： 1、display 阅读全文
posted @ 2018-09-20 22:19 Assist 阅读(1976) 评论(0) 推荐(0)
CSS 小结笔记之变形、过渡与动画
摘要：1、过渡 transition 过渡属性用法： transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分别单独指定 transition-prop 阅读全文
posted @ 2018-09-20 08:45 Assist 阅读(887) 评论(0) 推荐(0)
CSS 小结笔记之滑动门技术
摘要：所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时，背景看起来也会变长。 大多数应用于导航栏之中，如微信导航栏: 具体实现方法如下： 1、首先每一块文本内容是由a标签与span标签组成 2、a标签只指定高度，而不指定宽度。 3、a标签 设置好背景图后，指定一个paddi 阅读全文
posted @ 2018-09-19 15:56 Assist 阅读(570) 评论(1) 推荐(1)
CSS 小结笔记之文字溢出处理
摘要：有时文字会溢出盒子，这时一般要对文字进行溢出处理。一般有以下三种处理方法： 1、word-break:normal | break-all |keep-all normal 使用浏览器默认的换行 break-all 允许单词内换行即允许单词拆开显示 keep-all 不允许拆开单词显示，连字符除外 阅读全文
posted @ 2018-09-13 12:00 Assist 阅读(316) 评论(0) 推荐(0)
CSS 小结笔记之元素的隐藏与显示
摘要：在网站上经常会有一些需要一定操作才会显示或隐藏的元素，这时会用到元素的隐藏与显示。主要通过以下三种属性实现。 1、display ：none|block |inline |inline-block display常用以上四个属性值，none 是元素隐藏，且不占有位置。block 除了转换为块级元素之 阅读全文
posted @ 2018-09-10 10:46 Assist 阅读(197) 评论(0) 推荐(0)
CSS 小结笔记之定位
摘要：定位也是Css中一个非常强大的属性。定位主要是用来移动盒子，将其移动到我们想要的位置。 定位分为两部分 1、边偏移 left | right |top |bottom：偏移大小；（边偏移一般制定上就不指定下，指定左就不指定右） 2、定位模式 position :static| relative |a 阅读全文
posted @ 2018-09-10 09:42 Assist 阅读(190) 评论(0) 推荐(0)
CSS 小结笔记之清除浮动
摘要：浮动是一个非常好用的属性，但是有时会出现一些问题，需要进行清除浮动。例如 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, 阅读全文
posted @ 2018-09-05 16:21 Assist 阅读(192) 评论(0) 推荐(0)
CSS 小结笔记之浮动
摘要：在css中float是一个非常好用的属性，float最基本用法是用来做文字环绕型的样式的。 基本用法：float:left | right 例如 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi 阅读全文
posted @ 2018-09-05 10:52 Assist 阅读(244) 评论(0) 推荐(0)