css
关注
分享
扫一扫
「已注销」
这个作者很懒，什么都没留下…
展开
-
reset.css
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-...原创 2019-10-22 23:04:48 · 213 阅读 · 0 评论 -
3D转换-长方体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...原创 2019-08-26 21:50:08 · 257 阅读 · 0 评论 -
3D转换-翻转轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...原创 2019-08-26 21:57:08 · 401 阅读 · 0 评论 -
CSS-边框
边框边框圆角格式单独设置连写将正方形变为圆形系统绘制方法边框图片属性border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatborder-image连写边框圆角将直角的边框变为圆角的边框格式单独设置border-xx(top/bottom)-xx(left/r...原创 2019-09-02 15:23:01 · 443 阅读 · 0 评论 -
边框-绘制八卦图
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { position: relative; width: 400px; h...原创 2019-09-02 15:26:09 · 317 阅读 · 0 评论 -
CSS-vertical-align
vertical-alignvertical-alignvertical-align设置元素的垂直对齐方式注意 :text-align是设置给需要对齐元素的父元素vertical-align是设置给需要对齐的那个元素本身vertical-align只对行内元素有效img { /*默认情况下图片和一行文字的基线对齐 基线就是一行文字中最短那个文字的底部*/ /* 基线 *...原创 2019-09-02 23:51:32 · 764 阅读 · 0 评论 -
滑动门
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 300px; height: 60px; backgr...原创 2019-09-03 00:17:31 · 225 阅读 · 0 评论 -
边框图片-滑动门
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 200px; height: 20px; margin:...原创 2019-09-03 00:19:24 · 185 阅读 · 0 评论 -
CSS-渐变
渐变线性渐变注意径向渐变注意线性渐变background: linear-gradient( , );div { /*默认情况下会从上至下的渐变*/ background: linear-gradient(red, green); /* 向上 */ background: linear-gradient(to top ,red, green); /* 向下 */ backgrou...原创 2019-09-03 14:01:02 · 95 阅读 · 0 评论 -
CSS-伸缩布局
伸缩布局伸缩布局伸缩容器伸缩项主轴辅轴主尺寸主轴方向修改主轴起点的位置注意对齐与空间主轴排布与主轴起点对齐与主轴终点对齐主轴中心对齐两端对齐环绕对齐辅轴对齐与侧轴起点对齐与侧轴终点对齐与侧轴中心对齐基线对齐拉伸对齐 / 等高对齐对齐个别项align-items 和 align-self 区别与联系伸缩布局中的垂直对齐在这里插入图片描述换行和换行对齐换行flex-wrapwrapwrap-rever...原创 2019-09-04 00:36:33 · 401 阅读 · 0 评论 -
圣杯布局和双飞翼布局
圣杯布局和双飞翼布局圣杯布局圣杯布局的步骤代码窗口缩放前窗口缩放后在这里插入图片描述双飞翼布局步骤代码圣杯布局圣杯布局和双飞翼布局,两者实现的功能都一样, 都是用于实现两侧的宽度不变, 中间的宽度自适应的三栏布局的圣杯布局的步骤一个容器, 里面放三个盒子设置两侧盒子的宽度(固定)设置中间盒子的宽度等于容器的宽度(100%)设置容器的padding等于两侧盒子的宽度让三个盒子都在同...原创 2019-09-04 15:24:34 · 258 阅读 · 0 评论 -
CSS-文字超出隐藏
overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段落中的文本不进行换行 */原创 2019-10-10 16:23:56 · 177 阅读 · 0 评论 -
3D转换-正方体
按顺序做上 后 下 前 左 右上 : x轴旋转90度 , z轴正向偏移100px后 : x轴旋转180度 , z轴正向偏移100px下 : x轴旋转270度 , z轴正向偏移100px前 : x轴旋转360度 , z轴正向偏移100px左 : x轴负向偏移100px , y轴旋转90度右 : x轴正向偏移100px , y轴旋转90度<!DOCTYPE html>&...原创 2019-08-26 21:48:22 · 325 阅读 · 0 评论 -
CSS-3D转换
3D转换2D和3D如何让某个元素呈3D展现转换属性Transform 方法2D和3D2D就是一个平面, 只有宽度和高度, 没有厚度3D就是一个立体, 有宽度和高度, 还有厚度默认情况下所有的元素都是呈2D展现的如何让某个元素呈3D展现和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可转换属...原创 2019-08-26 21:38:58 · 207 阅读 · 0 评论 -
CSS-过渡
过渡三要素有属性发生变化哪个属性需要执行过渡效果过渡效果持续时长注意当多个属性需要同时执行过渡效果时用逗号隔开即可transition-property: width, background-color;transition-duration: 5s, 5s;...原创 2019-08-23 22:02:29 · 166 阅读 · 0 评论 -
过渡-弹性效果
思路 : 一个大盒子中有很多小盒子,鼠标移入大盒子给小盒子添加margin属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style type=...原创 2019-08-24 12:04:48 · 134 阅读 · 0 评论 -
过渡-手风琴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; ...原创 2019-08-24 12:28:51 · 128 阅读 · 0 评论 -
CSS-浮动
网页的布局方式?网页的布局方式其实就是浏览器是如何对网页中的元素进行排版标准流(文档流/普通流)排版方式其实浏览器默认的排版方式就是标准流的排版方式在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平...原创 2019-08-20 17:21:44 · 115 阅读 · 0 评论 -
CSS-2D转换
2D 转换translate()rotate()scale()translate()通过 translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标) 和 top（y 坐标） 位置参数/*从左侧移动 50 像素，从顶端移动 100 像素*/div { transform: translate(50px,100px);}rotate()元素顺时针旋转...原创 2019-08-24 16:23:50 · 385 阅读 · 0 评论 -
CSS-清除浮动
浮动元素高度问题在标准流中内容的高度可以撑起父元素的高度在浮动流中浮动的元素是不可以撑起父元素的高度的清除浮动方式给前面一个父元素设置高度注意 : 在开发中, 能不写高度就不写高度, 所以这种方式用得很少给后面的盒子添加clear属性clear属性取值:none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)left: 不要找前面的左浮动元素...原创 2019-08-20 18:55:39 · 104 阅读 · 0 评论 -
CSS
文字相关属性文字样式font-style : normal / italic;文字粗细font-weight : lighter / normal / bold / bolder / 1~900(100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold)文字大小font-size文字字体中文必须用双引号引...原创 2019-08-17 21:53:44 · 111 阅读 · 0 评论 -
CSS-定位
定位流分类相对定位绝对定位固定定位静态定位(浏览器默认)相对定位相对定位就是相对于自己以前在标准流中的位置来移动 position: relative;相对定位注意点相对定位是不脱离标准流的, 会继续在标准流中占用一份空间在相对定位中同一个方向上的定位属性只能使用一个由于相对定位不脱离标准流, 所以在相对定位中是区分块级元素/行内元素/行内块级元素由于相对定位...原创 2019-08-22 21:01:38 · 102 阅读 · 0 评论 -
CSS-盒子阴影和文字阴影
盒子阴影和文字阴影盒子阴影格式注意点文字阴影格式注意点盒子阴影box-shadow 属性向框添加一个或多个阴影格式box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;(前两个必选)div { box-shadow: 10px 10px 10px 10px skyblue; box-shadow: 10px 10px 10px 10px skyblue i...原创 2019-08-26 16:36:05 · 382 阅读 · 0 评论 -
CSS-动画
动画模块三要素属性@keyframesanimationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode取值:动画属性连写格式简写 : ...原创 2019-08-26 16:57:57 · 87 阅读 · 0 评论 -
动画-云层效果
效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; ...原创 2019-08-26 17:17:51 · 398 阅读 · 0 评论 -
动画-无限滚动
效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } ...原创 2019-08-26 17:23:31 · 237 阅读 · 0 评论 -
CSS-盒模型
边框属性边框就是环绕在标签宽度和高度周围的线条边框属性的格式连写同时设置四条边的边框border: 边框的宽度 边框的样式 边框的颜色;分别设置四条边的边框border-top: 边框的宽度 边框的样式 边框的颜色;border-right: 边框的宽度 边框的样式 边框的颜色;border-bottom: 边框的宽度 边框的样式 边框的颜色;border-left: 边框...原创 2019-08-19 21:00:31 · 119 阅读 · 0 评论