CSS - 随笔分类 - Assist

摘要：直接在页面上使用css代码：阅读全文

posted @ 2019-06-24 10:44 Assist 阅读(1527) 评论(0) 推荐(0)

摘要：在使用flex 进行伸缩布局的时候，经常会给子盒子设置边框，这时经常会出现上下边框对不齐的情况。本篇文章来探讨并解决这个问题。具体出现的问题如下图所示具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me 阅读全文

posted @ 2018-10-15 17:06 Assist 阅读(3480) 评论(0) 推荐(0)

CSS 小结笔记之图标字体（IconFont）

摘要：本篇主要介绍一种非常好用的图标大法——图标字体（IconFont）。什么是图标字体？顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。网站上经常会用到各种图标，之前网页上使用图标主要采用精灵图（背景位置+背景缩放）来实现，但是这样使用起来有许多不便之处，一方面缩放阅读全文

posted @ 2018-10-02 12:13 Assist 阅读(1263) 评论(0) 推荐(0)

CSS 小结笔记之em

摘要：1、为什么使用em em也是css中的一种单位，和px类似。很多人会疑惑为什么有了px之后还要使用em，而且em使用起来相对于px来讲比较麻烦。 em主要是应用于弹性布局，下面给出一个小栗子说明em的强大之处 <!DOCTYPE html> <html lang="en"> <head> <meta 阅读全文

posted @ 2018-10-01 10:56 Assist 阅读(551) 评论(0) 推荐(0)

CSS 小结笔记之BFC

摘要：BFC 即为Block formatting context 的缩写，BFC 主要用来将一个盒子设置为一个隔离的容器，不管盒子内部的元素具有什么属性，都不会影响到盒子的外面。 1、哪些元素能产生BFC 不是所有的元素都能产生BFC的，只有display 属性为 block, list-item, t 阅读全文

posted @ 2018-09-30 12:29 Assist 阅读(680) 评论(0) 推荐(1)

CSS 实例之滚动的图片栏

摘要：在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下主要原理是通过动画向左移动。首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度，这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不阅读全文

posted @ 2018-09-23 08:11 Assist 阅读(4335) 评论(0) 推荐(0)

CSS 实例之翻转图片

摘要：具体效果图如下：主要用到的技术除了3D翻转和定位，还用到了一个新的属性 backface-visibility：visable|hidden; 该属性主要是用来设定元素背面是否可见。具体的步骤如下： 1、写出页面主体， 2、通过定位使两张图片叠加在一起 3、设置第一张图片背面不可见 4、添加旋阅读全文

posted @ 2018-09-22 14:57 Assist 阅读(703) 评论(0) 推荐(1)

CSS 实例之打开大门

摘要：本个实例主要的效果如下图所示本案例主要运用到了3D旋转和定位技术。具体步骤如下： 1、首先在页面主体加三个很简单的div标签： 2、给外层盒子（.door）加上基本的属性、背景、视距以及相对定位（子盒子要用到绝对定位，所以父盒子最好加上相对定位）。 3、给左右的门设置相关属性，这里给出左盒子的阅读全文

posted @ 2018-09-21 09:53 Assist 阅读(1264) 评论(1) 推荐(2)

CSS 小结笔记之伸缩布局 (flex)

摘要：CSS flex 是一种伸缩布局，之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。 flex 为和模型布局提供了极大地灵活性，所谓弹性布局即可根据大小判定自动伸缩。 flex相关的各个属性如下： 1、display 阅读全文

posted @ 2018-09-20 22:19 Assist 阅读(1988) 评论(0) 推荐(0)

CSS 小结笔记之变形、过渡与动画

摘要：1、过渡 transition 过渡属性用法： transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分别单独指定 transition-prop 阅读全文

posted @ 2018-09-20 08:45 Assist 阅读(892) 评论(0) 推荐(0)

CSS 小结笔记之滑动门技术

摘要：所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时，背景看起来也会变长。大多数应用于导航栏之中，如微信导航栏: 具体实现方法如下： 1、首先每一块文本内容是由a标签与span标签组成 2、a标签只指定高度，而不指定宽度。 3、a标签设置好背景图后，指定一个paddi 阅读全文

posted @ 2018-09-19 15:56 Assist 阅读(579) 评论(1) 推荐(1)

CSS 小结笔记之文字溢出处理

摘要：有时文字会溢出盒子，这时一般要对文字进行溢出处理。一般有以下三种处理方法： 1、word-break:normal | break-all |keep-all normal 使用浏览器默认的换行 break-all 允许单词内换行即允许单词拆开显示 keep-all 不允许拆开单词显示，连字符除外阅读全文

posted @ 2018-09-13 12:00 Assist 阅读(324) 评论(0) 推荐(0)

CSS 小结笔记之元素的隐藏与显示

摘要：在网站上经常会有一些需要一定操作才会显示或隐藏的元素，这时会用到元素的隐藏与显示。主要通过以下三种属性实现。 1、display ：none|block |inline |inline-block display常用以上四个属性值，none 是元素隐藏，且不占有位置。block 除了转换为块级元素之阅读全文

posted @ 2018-09-10 10:46 Assist 阅读(204) 评论(0) 推荐(0)

CSS 小结笔记之定位

posted @ 2018-09-10 09:42 Assist 阅读(195) 评论(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)

CSS 实例之文字的凸起与凹陷

摘要：一些页面会有一些凹凸文字效果，这个主要是设置背景+文字阴影来达成这个效果的。文字阴影使用方法如下： text-shadow: 水平位置垂直位置模糊距离阴影颜色具体代码如下： body { background-color: grey; } div { color: grey; font-si 阅读全文

posted @ 2018-08-15 16:47 Assist 阅读(3816) 评论(0) 推荐(0)

CSS 小结笔记之背景

摘要：背景相关属性主要有： background-color 背景颜色 background-image 背景图片 background-repeat 是否平铺 repeat （默认平铺） | repeat-x（水平平铺） | repeat-y （垂直平铺）| no-repeat （不平铺） backgr 阅读全文

posted @ 2018-08-15 16:31 Assist 阅读(161) 评论(0) 推荐(0)

CSS 小结笔记之选择器

摘要：Css选择器主要分为以下几类类选择器 ID选择器通配符选择器标签选择器伪类选择器复合选择器 1、类选择器：通过.classname 来选择例如同一个标签可以通过多个类名来指定多个样式，但是若其中有重叠部分，则按权重值重叠，若在同一权重级别中，如都是内部样式表中的，则按照上下关系，下面的阅读全文

posted @ 2018-08-03 14:35 Assist 阅读(547) 评论(0) 推荐(0)

CSS 小结笔记之三种样式表

摘要：CSS 引入共有三种方式：内部样式表，内联样式（行内样式）表，外部样式表，当然也可以使用多重样式内联样式内联样式直接把样式卸载html代码行内，一般仅仅在此样式仅仅只在当前元素上应用时使用，其他情况下尽量不要使用。内部样式表内部样式表一般写在HTML头部，在<head>标签内用<style 阅读全文

posted @ 2018-08-01 11:05 Assist 阅读(655) 评论(2) 推荐(0)

Assist

随笔分类 - CSS

公告