css3
好好学
美式因子
美式我需要
展开
-
3D案例——旋转木马
运用transform元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } body{ perspective: 1000px;原创 2020-08-01 18:07:53 · 254 阅读 · 0 评论 -
CSS3——靶心,圣杯与双飞翼布局
靶心布局 重点理解marggin的使用 * { margin: 0; padding: 0; } .round1,.round2,.round3,.round4,.round5{ border-radius: 50%; background-color: #00b3ff; margin: 40px; } .round1{ width: 500px; height: 500px;原创 2020-08-01 19:14:31 · 321 阅读 · 0 评论 -
CSS3补充
浏览器前缀 浏览器前缀 浏览器 -webkit- Google Chrome, Safari, Android Browser -moz- Firefox -o- Opera -ms- Internet Explorer, Edge -khtml- Konqueror 背景渐变 兼容性问题很严重,我们这里之讲解线性渐变 语法格式: background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色); background:-w原创 2020-08-01 18:05:42 · 89 阅读 · 0 评论 -
CSS3(七)——认识BFC
什么情况下可以让元素产生BFC 这些元素添加如下属性就可以触发BFC。 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible。 BFC元素所具有的特性 BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。 BFC的主要用途 清除元素内部浮动 在BFC中原创 2020-08-01 16:52:31 · 206 阅读 · 0 评论 -
CSS3入门与提高(六)——新增2D和3D属性
这里写目录标题2D变形(CSS3) transform移动 translate(x, y)缩放 scale(x, y)旋转 rotate(deg)transform-origin可以调整元素转换变形的原点倾斜 skew(deg, deg)3D变形(CSS3) transformtranslateX(x)translateY(y)translateZ(z)透视(perspective)translateX(x)translateY(y)translateZ(z)translate3d(x,y,z)开门案例ba原创 2020-08-01 16:02:27 · 224 阅读 · 0 评论 -
CSS3入门与提高(五)
这里写目录标题滑动门的核心技术before和after伪元素(详解)过渡(CSS3) 滑动门的核心技术 a { margin: 100px; display: inline-block; height: 33px; /* 千万不能给宽度 写死宽度是不对滴,我们要推拉门 自由缩放*/ background: url() no-repeat; padding-left: 15px; color: #fff; text-decoration: none; line-heigh原创 2020-07-31 19:46:45 · 161 阅读 · 0 评论 -
CSS3入门与提高(四)
这里写目录标题定位(position)定位模式(定位的分类)静态定位(static)相对定位relative(自恋型)绝对定位absolute (拼爹型)父级没有定位父级有定位绝对定位的盒子水平/垂直居中固定定位fixed(认死理型)叠放次序(z-index)定位模式转换元素的显示与隐藏display 显示visibility 可见性设置或检索是否显示对象。overflow 溢出CSS高级技巧CSS用户界面样式鼠标样式cursor轮廓 outline防止拖拽文本域resizevertical-align 垂原创 2020-07-31 17:31:48 · 88 阅读 · 0 评论 -
CSS3入门与提高(二)——盒子模型
盒子模型盒子模型(CSS重点)盒子边框(border)盒子边框写法总结表内边距(padding)外边距(margin)清除元素的默认内外边距外边距合并相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并content宽度和高度CSS3盒模型盒子阴影浮动(float)布局流程一列固定宽度且居中两列左窄右宽型通栏平均分布型清除浮动clear属性用于清除浮动额外标签法(W3C)父级添加overflow属性方法使用after伪元素清除浮动使用before和after双伪元素清除浮动 盒子模型(CSS重点) 所谓盒子原创 2020-07-30 20:32:27 · 621 阅读 · 0 评论 -
CSS3入门与提高(三)——PS基本操作
ps基本操作基本操作移动工具 V自由变形图层操作(重点)矩形选区工具 M颜色填充索套工具 L多边形套索磁性套索工具魔棒工具 W选区布尔运算(与魔棒工具一起用)钢笔工具: P 基本操作 文件下拉菜单: 新建 新建文档 CTRL+N 单位:像素 厘米 毫米 屏幕显示: 单位 像素 72像素/英寸 RGB颜色模式 关闭文档 CTRL+W 存储 CTRL+S (替存) 存储为 CTRL+SHIFT+S 另存一份文件原创 2020-07-30 19:56:38 · 499 阅读 · 0 评论 -
CSS3入门与提高(一)
学会使用CSS选择器 标签选择器(元素选择器) 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 类选择器 .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签调用的时候用 class=“类名” 即可 多类名选择器 1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。 2. 各个类名中间用空格隔开。 id选择器 #id名{属性1:属原创 2020-07-29 17:41:41 · 127 阅读 · 0 评论