CSS
关注
分享
扫一扫
何迟
这个作者很懒，什么都没留下…
展开
-
黑马程序员云道页面—巩固html和css（新特性没有使用）
注意： 一.写的是黑马程序员跟着老师写的，有点小差别，主要看注释理解结构 二.以前学thml和css没有深入理解到盒子的坍塌问题，注意理解外边距的合并。有两种情况，一个是两个盒子紧挨着一起，会进行外边距合并，只保留较大的外边距，注意就行。一个是盒子的嵌套，造成合并解决办法有两个，一是为父元素添加1px的外边距或内边距（可能会将盒子变大），而是在父元素中添加overf...原创 2018-10-18 19:56:15 · 3858 阅读 · 2 评论 -
web字体图标的使用
方法：1.在icomoon字库网站上下载完了字体之后，将压缩包解压2.将压缩包中的font文件夹，拷贝到所需使用的样式表文件同路径下（下面引用的时候，没有加../到上级目录） 就是@font-face的url地址要注意，他的作用就是找到导入的font文件夹3.将压缩包中的css文件内容部分拷贝到自己的样式表中（看源码）4通过font-family:"icomoon"引用，打...原创 2018-10-19 08:33:42 · 741 阅读 · 0 评论 -
css3伪元素选择器和box-sizing盒子模型
要点：1.伪元素选择器写法：E::before E::after （E代表元素，如下面的div元素为例）作用：在div中内容部分的最前面和最后面添加content属性，文本内容可以为空。但是注意，content是行类元素，自己本身也是一个盒子，所以我们这里可以使用相对定位。2.CSS3的border-box盒子模型传统的也是默认的盒子模型是content-box模型，它保证了W...原创 2018-10-25 16:10:34 · 486 阅读 · 0 评论 -
京东图片过渡效果—了解transition属性
要点：1、transition有四个属性，注意时间曲线和延时可以省略，默认分别是ease和02、注意切换的原理类似滑动门，遮住一部分，图片的宽度比显示宽度要大html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2018-10-28 19:12:56 · 712 阅读 · 0 评论 -
允儿相册—动画、过渡、结构伪类选择器
要点：1.结构伪类选择器，注意nth-child后面接括号，里面写数字，从0开始。特殊开头是first-child和last-child2.过渡属性有四个值，后面的效果时间曲线和延时设为默认3.旋转注意，正值为顺时针，负值为逆时针，单位是度（deg，千万不能与战队edg混，哈哈）4.后加载的图层权重更大，在上面（所以我们看到的，是最后加载的）html代码：<!D...原创 2018-10-28 21:24:56 · 198 阅读 · 0 评论 -
3D动画案例
要点：1.视距越大，看到的效果越小，跟小孔成像同样的原理2.给父元素添加透视，会作用于子元素3.backface-visibility设置背向浏览器是否可见html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2018-10-31 08:40:38 · 503 阅读 · 0 评论 -
CSS3案例黑马程序员—学成在线
要点：1.直接只用<header><nav>等CSS3新标签2.使用新的盒子模型border-box内减式模型，不用再来回设置盒子大小3.过渡效果和动画效果的联合使用，不考虑兼容base.css*{ box-sizing: border-box; /*全部定义为内减式盒子模型*/}a{ text-decoration: none;}bod...原创 2018-10-31 15:17:53 · 9216 阅读 · 11 评论 -
css3动画案例—太阳大海跳动
要点：1.一个动画定义完成之后，任何元素只要调用这个动画的名字，都可以执行这个动画2.同一个动画，里面的多个效果也是有前后顺序的，注意效果的差别html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume原创 2018-10-30 10:26:07 · 2448 阅读 · 1 评论 -
多背景实例—冒泡图
要点：1.多背景使用时，如果背景图片后面还需要接着背景颜色，需要将背景颜色写在后面，以防被层叠，什么都不显示2.在多背景的使用时，一定要注意背景图片位置的错开，才能达到多背景图片的效果3.在使用多背景完成一定的转换动画时，一定要加上过渡，不然可能没有效果html代码：<!DOCTYPE html><html lang="en"><head&g...原创 2018-10-30 21:39:52 · 429 阅读 · 0 评论 -
伸缩布局flex、背景缩放实例、字体阴影—携程网手机app
要点：1.将需要伸缩布局的父级元素添加display:flex显示效果，在子级元素中设置flex的值，然后按比例分。如一个子集元素是1，另一个是2，则一个占三分之一，另一个三分之二。2.字体阴影非常占内存，不建议使用3.背景图片的缩放，可以为px和百分比（如果自定义一个，另一个按原来图片的比例等比列缩放） 另两个特殊的属性值，cover将图片等比例缩放，直到图片的高跟盒子的高一...原创 2018-10-30 21:50:15 · 771 阅读 · 0 评论 -
CSS—2D和3D属性
HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画练习</title> <link rel="stylesheet" type=&qu原创 2018-08-14 22:18:06 · 383 阅读 · 0 评论 -
CSS—animation（动画）过渡，动画
HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title> <link rel="stylesheet" type="原创 2018-08-15 09:22:45 · 6208 阅读 · 0 评论 -
css布局—直接自定义栅格系统，自己添加小型bootstrap样式
要点：1.这个实例中的布局，通过自定义的栅格系统，模仿bootstrap库，从而做到自己能有自己的库样式思路。2.像background这个属性，有许多的子属性，要是想要连写的话，如背景图片和平铺，只需写image即可，不需要也不能写成background-image。效果：代码：<!DOCTYPE html><html lang="en">&...原创 2018-11-16 17:03:40 · 1267 阅读 · 0 评论