![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
css
卋舉
我即,所我
展开
-
CSS rem3 750设计稿
弹性布局 display:flex;等分居中,水平对齐 justify-content:center;居中对齐(项目 items)align-items:center;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"&g原创 2021-10-14 09:17:25 · 150 阅读 · 0 评论 -
CSS rem2 移动端开发布局
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>rem2 移动端开发布局</title> <meta name="Keywords" content="关键原创 2021-10-14 09:09:32 · 58 阅读 · 0 评论 -
CSS rem 固定移动端布局
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>rem 固定移动端布局</title> <meta name="Keywords" content="关键字原创 2021-10-14 09:07:34 · 60 阅读 · 0 评论 -
CSS bootstrap
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>bootstrap</title> <meta name="Keywords" content="关键字"&原创 2021-10-14 09:06:11 · 57 阅读 · 0 评论 -
CSS 弹性布局 flex 三
弹性布局 display:flex;等分居中,水平居中 justify-content:center;居中对齐(项目 items) align-items:center;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"&原创 2021-10-13 10:34:45 · 138 阅读 · 0 评论 -
CSS 弹性布局 flex 二
居中等分 justify-content:center;居中对齐(项目 itmes) align-items:center;布局方向(方向 direction; 行 row; 列 lcoumn) flex-direction:lcoumn;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="w原创 2021-10-13 10:28:26 · 127 阅读 · 0 评论 -
CSS 弹性布局 flex
弹性布局 display:flex;居中等分 justify-content:center;布局方向(方向 direction;行 row;列 column) flex-direction:column;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2021-10-13 10:10:21 · 47 阅读 · 0 评论 -
CSS 四等分
行内盒子 display:inline-block;垂直(vertical) vertical-align:top;多余部分隐藏 overflow:hidden;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1">原创 2021-10-13 10:01:22 · 641 阅读 · 0 评论 -
CSS div 三等分
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>div 三等分</title> <meta name="Keywords" content="关键字">原创 2021-10-13 09:55:05 · 2127 阅读 · 0 评论 -
CSS div 自适应布局
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>div 自适应布局</title> <meta name="Keywords" content="关键字"&原创 2021-10-13 09:53:15 · 286 阅读 · 0 评论 -
CSS div 布局 正中央居中
绝对定位 position:absolute;正中心 left:50%;top:50%;transform:translate(-50%,-50%);固定 (fixed) position:fixed;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,i原创 2021-10-13 09:52:15 · 111 阅读 · 0 评论 -
CSS 媒体查询 media
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>媒体查询 media</title> <meta name="Keywords" content="关键字"原创 2021-10-13 09:49:57 · 46 阅读 · 0 评论 -
CSS rem
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>rem</title> <meta name="Keywords" content="关键字">原创 2021-10-13 09:48:45 · 53 阅读 · 0 评论 -
CSS px em rem
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Title</title> <meta name="Keywords" content="关键字">原创 2021-10-12 09:45:18 · 76 阅读 · 0 评论 -
CSS 动画 多帧 animation 旋转
动画 animation;一直 infinite;控制中心点 transform-origin:right bottom;变换 transform; 旋转 rotate<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"&原创 2021-10-12 09:43:58 · 800 阅读 · 0 评论 -
CSS 动画 多帧 animation 一闪一闪效果
透明 transparent;一闪一闪效果 HTML超链接有参考<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Title</title> <meta原创 2021-10-12 09:39:44 · 822 阅读 · 0 评论 -
CSS 动画多帧 animation 二
绝对定位 position:absolute;中心 left:50%;top:50%;transform:translate(-50%,-50%);圆角 border-radius:50%;动画 animation:an1 ease-in-out 0s infinite alternate;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta原创 2021-10-12 09:35:56 · 185 阅读 · 0 评论 -
CSS 动画 animation 多帧
动画(animation) 名字 一次周期的时间 效果 起始时间 旋转次数animation an1 .5s linear 2s alternate;交替 alternate;保存动画后的效果 animate:an2 1s ease-in-out 0s 1 forwar播放状态(暂停paused) animation-play-state:paused;<!DOCTYPE html><html lang="zh-CN"><head> <meta原创 2021-10-12 09:28:02 · 211 阅读 · 0 评论 -
CSS 过渡动画 transition 二
水平翻转 transform:rotate(180deg);平滑一点(linear) transition:all .5s linear 0s;超出部分隐藏 overflow:hidden;透明度(opacity) opacity: .8;缩放(scale) transform:scale(1.2,1.2);填充 (CSS background)有参考background-image:linear-gradient(green, red);<!DOCTYPE html><h原创 2021-10-12 09:19:31 · 214 阅读 · 0 评论 -
CSS 过渡动画 transition
过渡动画,由慢到快(ease-in) transform:width .5s ease-in 1s;左浮动 float:left;右浮动 float:right;行高 line-height:50px;内边距,距离左边15px padding-left:15px;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2021-10-12 09:10:08 · 484 阅读 · 0 评论 -
CSS 变换 transform(位置 translate,缩放 scale,旋转 rotate,中心点 origin)
位置 transform:translate(100px);宽高(缩放 scale) transform:scale(1.5,1.5);旋转(旋转 rotate) transform:rotate(45deg);控制中心点(原点 origin) transform-origin:150px 100px;动画 (transition) transition:all .5s ease-in 0s;<!DOCTYPE html><html lang="zh-CN"><h原创 2021-10-12 09:05:17 · 2568 阅读 · 0 评论 -
CSS 尺寸 补白
行内盒子 display-inline:1px s<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>尺寸 补白</title> <meta name="Ke原创 2021-10-12 08:59:46 · 143 阅读 · 0 评论 -
CSS display(布局) float clear overflow(隐藏)
左浮动 float:left;清除浮动 style=“clear:both”;去除ul标签(有序标签)的黑点 list-style:none;行内盒子 display:inline-block;取消右边的线 border-right:none;最小宽度 min-width:15px;取消下划线(装饰 decoration) text-decoration:none;右边添加一条线 border-right:1px solid gray;隐藏,不占位置 display:none;隐藏,还占位原创 2021-10-12 08:53:39 · 157 阅读 · 0 评论 -
CSS position 位置
取消标签加粗 font-weight:normal;绝对定位 position:absolute;距离左边(left) left:150px; 距离右边(right) right:150px;数字越大,优先显示 z-index:1;固定 position:fixed;变换 transform; 位移 tranlate;页面正中央 left:50%; top:50%;transform:tranlate(-50%,-50%);底部 bottom:0;点击" × " 后,十秒后在重新显示的效果原创 2021-10-11 16:33:57 · 110 阅读 · 0 评论 -
CSS shadow 阴影
文字阴影 text-shadow盒子阴影 box-shadow<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>阴影 shadow</title> <me原创 2021-10-11 16:27:12 · 110 阅读 · 0 评论 -
CSS border-radius 圆角
盒子外边距 margin:5px;左浮动 float:left;双线轮廓 border:5px double gray:双线(double)过渡动画 transition:all .5s;(动画 transition)圆角 border-radius:10%;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport原创 2021-10-11 16:25:48 · 101 阅读 · 0 评论 -
CSS border
虚线(dashed); 实线(solid); 双线轮廓(double);顶部边框的线 border-top:1px solid gray;取消边框 border:none;有边框,但像素为0 border:0;边框透明 border:transparent;三角形箭头 font-size:0; width:0; height:0; border:15px solid transparent; border-left-color:aqua;border-top-color:green;取消下划原创 2021-10-11 16:20:59 · 103 阅读 · 0 评论 -
CSS background 二
盒子模型 display:block;不平铺 background-repeat:no-repeat;位置 background-position:left top;(位置 position;顶部 top)光标形状(手型) cursor:pointer;(十字交叉 crosshair,沙漏型 wait);<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> &原创 2021-10-08 21:18:33 · 60 阅读 · 0 评论 -
CSS background
默认平铺 background-imgae:url("image/o.jpg:);不平铺 background-repeat:no-repeat;水平重复 background-repeat:repeat-x;垂直重复 background-repeat:repeat-u;位置(position) background-position:cneter;填充 background-image:linear-gradient(30deg green 20% red); 角度(deg)圆环效果 bac原创 2021-10-08 21:14:04 · 79 阅读 · 0 评论 -
CSS iconfont awesome
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>iconfont</title> <meta name="Keywords" content="关键字"&g原创 2021-10-08 21:08:24 · 79 阅读 · 0 评论 -
CSS emoji
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Title</title> <meta name="Keywords" content="关键字">原创 2021-10-08 21:07:15 · 255 阅读 · 0 评论 -
CSS 文本装饰样式 换行
添加边框 border:1px solid green;强制不允许换行 white-space:nowrap;强制换行,内容到边才允许换行 word-dreak:break-all;以单词长度,选择换行,默认 break-wordword-break:break-word;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="v原创 2021-10-08 21:05:35 · 132 阅读 · 0 评论 -
CSS 文本装饰样式 阴影shadow
盒子居中 margin: 0 auto;阴影 text-shadow:2px 2px 3px green;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>阴影</title原创 2021-10-08 21:01:30 · 110 阅读 · 0 评论 -
CSS 文本装饰样式 垂直对齐
内边距 padding:18px;正中心 line-height:300px;右下角 display:table-cell;vertical-align:bottom;box-sizing: border-box;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device原创 2021-10-08 20:59:15 · 74 阅读 · 0 评论 -
CSS 文本装饰样式
边框 border:1px solid gray;内边距 padding:5px;转换大小写 text-transform:uppercase;(小写 lowercase)字间距 letter-spacing:5px;行高 line-height:25px;首行缩进 text-indent:50px;斜体 font-style:italic;下划线 text-decoration:underline dashed green;(虚线 dashed; 实线:solid)<!DOCTYPE原创 2021-10-08 20:52:53 · 100 阅读 · 0 评论 -
CSS font 字体设置
取消标签加粗效果 font-weight:normal;居中 text-align:center;按照盒子模型,居中 text-align:center;display:block;取消斜体 font-style:normal;控制文字首行缩进 text-indent:50px;斜体 italic 加粗 bold 字号,行高font-italic bold 25px/30px ‘chaoshu’<!DOCTYPE html><html lang="zh-CN">&原创 2021-10-08 20:46:01 · 484 阅读 · 0 评论 -
CSS 对象透明 颜色透明 opacity
加粗 font-weight:bold;居中 text-align:center;正中心 line-height:200px;对象透明 opacity: .3;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1">原创 2021-10-08 20:41:03 · 132 阅读 · 0 评论 -
CSS 自动编号样式
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>自动编号样式</title> <meta name="Keywords" content="关键字">原创 2021-10-06 17:21:44 · 186 阅读 · 0 评论 -
CSS Selectors font,input
开头: before; 结尾 : after; 内边距 : padding:15px; 左对齐 : float:left;边框border : border:1px solid gray; 行高 : line-height:35px;动画 : transition:transform .5s ease-in; 水平翻转 : transform:totatry(180deg);去除表单的活动框 : outline:none;更改placeholder颜色; placeholder框内提示:原创 2021-10-06 17:19:58 · 72 阅读 · 0 评论 -
CSS Selectors 伪类选择符2
细线表格 border-collapse: collapse; 宽度 width; 盒子居中 margin: 0 auto;加粗 bold normal: font: bold normal 18px “”; 细线,灰色(边框) border: 1px solid gray;虚线,灰色 border: 1px dashed gray; 内边距 padding: 5px; 文本居中 text-align: center; button 按钮隔行效果(odd even 2n+1):.t &g原创 2021-10-06 17:12:31 · 147 阅读 · 0 评论