- 博客(18)
- 收藏
- 关注
原创 text 文本个人笔记
text:文本 p{ text-indent:2rem !所有p标签首行缩进2 font-family:‘楷体’; !修改所有p标签为楷体字 text-align:center; !设置标签内容居中对齐 color:red; !颜色 font-size:30px; !字体大小 ...
2020-01-04 18:23:51
156
原创 定位笔记
position:定位span:nth-child(1){ !找到span第一个子元素position:relative(相对(absolute绝对定位);! 改变内容位置(相对位置)top:10px; ! 位置离上方10像素left:calc(50% - 50px); 父元素一半 - 本身的一半 定位到左右居中(垂直居中用top)position:fixed; !固定位...
2020-01-04 18:23:49
187
原创 清除样式 空格 清除浮动的超级棒的笔记
其他:*{text -decoration:none;!清除链接下划线list-style: none; !清除点}*/空格处理nomal :忽略空格且换行nowrap:忽略空格不换行pre:不忽略空格不换行pre-wrap:不忽略空格;换行white-space:pre; 空格换行可用代码*/(odd)奇数事件 (even)偶数事件checked(点击事件)d...
2020-01-04 18:23:40
166
原创 元素笔记
元素:color:inherit; !继承父元素的颜色属性值行元素 !同一行显示不能设置宽高块元素 !独占一行 可以设置display:inline-block; !变成行内块元素display:block(inline);!转换成块(行内元素p::after(before){ !在被选元素后(前)插入指定内容content:“xxxx” !引入}overf...
2020-01-04 18:20:24
223
原创 阴影和颜色个人笔记
shadow:阴影 颜色opacity: 0.5; 透明度div{box-shadow:10px(左右距离)10px(上下距离)10px(清晰度)red(颜色)!盒子阴影可以设置多个阴影 incet(内阴影)}p{ 文本阴影同上!}span{background:linear-gradient(to right bottom(方向)(0deg角度变换)),...
2020-01-04 18:16:17
156
原创 表格 文本框 按钮个人笔记
table:表格 文本框 按钮<table><caption>表格标题</caption><thead> !表头 <tr> 行 <th> ...
2020-01-04 18:13:32
133
原创 border边框 笔记
border:边框(内(外)边距)body{margin:0; !设置body外边框为0(同元素使用最好)padding-top:50px; !设置内边框为50(父子元素用最好)border-style:dashed(dotted double solid groove ridge); ! 虚线 点状线 双实线 实线 凹槽效果 隆起效果border:0; 隐藏边框border-...
2020-01-04 18:12:11
179
原创 css3图片img笔记
img:图片<img src=“ 图片路径” alt=“加载失败提示” title=“图片名”>! 插入图片img{vertical-align: middle;图片与行内文字对齐(middle居中对齐text-top上对齐text- bottom下对齐)默认值下对齐;注意:不能设置给block元素*/}html{background-image:ur...
2020-01-04 18:09:00
221
原创 css3 过渡 旋转 动画个人笔记
css3:1.动画 过渡 旋转@keyframes 别名{ !动画(还可以用百分比)from{初始化样式}to{改变后的样式}(动画盒子必须绝对定位).别名{animation-name:别名;!执行定义的动画animation-duration!2s;!动画时间animation-timing-function:linear;! 速度...
2020-01-04 18:07:51
313
原创 HTML个人笔记
HTML:!important(权重10000)>style(权重1000)>ID(权重100)>class标签选择器(权重10)>*(权重1)./当前文件 …/上一层文件 ! 根标签 !头标签 网页标题编辑区 !改变编码格式,能解决中文乱码 网页标题名称 导航栏内容头部内容中间部分...
2020-01-04 18:06:45
82
原创 js质数判断
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
2020-01-04 18:04:30
1615
原创 js写闰年判断
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
2020-01-04 18:03:42
649
原创 css帧动画全
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
2020-01-04 17:52:38
277
原创 HTML5弹性布局
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
2020-01-04 17:49:20
1139
原创 HTML盒模型(边距)
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
2020-01-04 17:29:21
317
原创 HTML标签快捷方式
shift+!(html基本结构)<body> <!-- ul>(li.box>img[src=$$.png]+p{内容$})*3 --> <ul> <li class="box"> <img src="01.png" alt=""> <p...
2020-01-04 17:26:20
1024
原创 交叉轴
交叉轴:【主轴垂直】方向;默认【竖直】 起点【上面】设置元素在交叉轴上对齐方式flex-start: 默认值 交叉轴起点flex-end 交叉轴末端center 居中baseline 文本内容 基线对齐 (文字对齐)stretch 子元素不设置高度;拉伸子元素高度到父元素【内容高度】子元素不能有高度:子元素会拉伸到有限的最大高度 !...
2019-11-11 15:45:36
318
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人