随笔分类 -  CSS

摘要:white-space: nowrap; // 溢出部分隐藏 overflow: hidden; // 文字溢出用...替换 text-overflow: ellipsis; 阅读全文
posted @ 2022-05-06 10:43 嘉琦 阅读(44) 评论(0) 推荐(0) 编辑
摘要:1.定义动画 1.1 两个个动画的定义方法 @keyframes 动画名称{ from{} to {} } 使用 html代码 <div class="box"></div> css代码: <style> /* 定义动画 */ @keyframes change { from{width: 200p 阅读全文
posted @ 2022-01-07 18:10 嘉琦 阅读(59) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-01-07 14:59 嘉琦 阅读(64) 评论(0) 推荐(0) 编辑
摘要:华为网页链接:https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent html代码部分: <div class="box"> <ul> <li> <a href="#"> <img src="./images/product.jpe 阅读全文
posted @ 2022-01-06 19:33 嘉琦 阅读(150) 评论(0) 推荐(0) 编辑
摘要:1.实现元素位移效果 语法:transform:translate(x轴水平移动距离,Y轴垂直移动距离) 取值:正负都可以 取值方式:数字+px 百分比 :参照自己本的盒子的百分比 比如:本身自己的宽度是100px 那么x轴的百分之100,则走的是100px 使用写法: transform:tran 阅读全文
posted @ 2022-01-06 19:15 嘉琦 阅读(3835) 评论(0) 推荐(0) 编辑
摘要:一。字体阴影属性名:text-shadow:水平偏移量 垂直偏移量 模糊度 阴影颜色; html代码: <div>农夫山泉有点甜</div>css代码: div{ font-size:100px; font-weight:700; text-align:center; line-height:300 阅读全文
posted @ 2022-01-01 18:46 嘉琦 阅读(108) 评论(0) 推荐(0) 编辑
摘要:属性名: background-size: 宽度 高度; 属性值 说明 数字+px 简单方便,常用 百分比 相当于盒子自身的百分比,如:百分百,就是就算是图片变形也要显示 contain 动比例缩放,但不会超出盒子最大,不会变形,有可能留白 cover 覆盖,等比例缩放,不会留白 属性1:因为盒子和 阅读全文
posted @ 2022-01-01 14:56 嘉琦 阅读(94) 评论(0) 推荐(0) 编辑
摘要:使用步骤1.创建盒子 <div class="one"></div> 2.使用PxCook量取图标大小,将图标的宽高设置成为盒子的宽高 3.将精灵图片设置盒子的背景图片 background: url('./images/sprites.png') 4.用PxCook量取小图标的坐标,并取负值给背景 阅读全文
posted @ 2022-01-01 14:24 嘉琦 阅读(643) 评论(0) 推荐(0) 编辑
摘要:1.无序列表:就是不需要排列顺序的情况,用无序列表 语法结构:<ul> <li></li> <li></li> </ul> 特点:每一个li前面都有一个小圆点 /* 清除黑点代码:list-style='none' */ 注意点:ul只能包裹li,li可以包裹任意内容 2.有序列表:有规则、有排序的 阅读全文
posted @ 2021-12-30 18:57 嘉琦 阅读(42) 评论(0) 推荐(0) 编辑
摘要:属性名:opacity:数字+px; 数字值取值0-1之间数字 数字值:1表示完全不透明 0表示完全透明使用后效果 html结构代码 <div class="box"> <img src="./images/code.jpg" alt=""> </div CSS结构代码 <style> .box{ 阅读全文
posted @ 2021-12-30 16:41 嘉琦 阅读(114) 评论(0) 推荐(0) 编辑
摘要:1.visibility:hidden; 2.display: none; 区别: 1.visibility:hidden 隐藏元素本身,且在网页中 占位置 2.display:none; 隐藏元素本身,且在网页中不占用位置,脱标 开发中常用: display:none;隐藏 display:blo 阅读全文
posted @ 2021-12-30 16:33 嘉琦 阅读(54) 评论(0) 推荐(0) 编辑
摘要:属性:overflow 值 作用 visible 默认,内容溢出部分可见 hidden 内容溢出部分不可见 scroll 内容有无溢出,都有滚动条 auto 有内容溢出,自动显示滚动条 阅读全文
posted @ 2021-12-30 16:18 嘉琦 阅读(212) 评论(0) 推荐(0) 编辑
摘要:属性:border-radius:数字+px; 用途:修饰盒子圆角 使用语法格式: 1. border-radius:20px ; /* 四个叫同时以半径20px圆角*/ 2. border-radius: 20px 30px /*左上角和右下角同时以半径20px圆角;右上角和左下角同时以半径30p 阅读全文
posted @ 2021-12-30 16:07 嘉琦 阅读(152) 评论(0) 推荐(0) 编辑
摘要:vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertical-align:top;/vertical-align:bottom; 之后效果 案例,html结 阅读全文
posted @ 2021-12-30 15:31 嘉琦 阅读(834) 评论(0) 推荐(0) 编辑
摘要:html结构 <body> <div class="father"> <div class="son"></div> </div> </body> CSS结构 <style> .father{ position: relative; width: 400px; height: 300px; back 阅读全文
posted @ 2021-12-29 22:06 嘉琦 阅读(24) 评论(0) 推荐(0) 编辑
摘要:1.相对定位:position:relative; 属性名:position 属性值:relative; 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top、left、right,bottom 3.相对定位,位置虽然移动了,但原来的位置还在,并未脱标应用场景: 1.配合绝对定位使用(子绝 阅读全文
posted @ 2021-12-29 21:17 嘉琦 阅读(85) 评论(0) 推荐(0) 编辑
摘要:BFC的作用和创建1.html标签是BFC盒子2.浮动元素是BFC盒子3.行内块元素是BFC盒子4.overflow属性值不为visible,如:auto、hidden。。。作用:1.清除浮动; 2.解决塌陷注意:display:table也可以生成BFC的原因在于Table会默认生成一个匿名的ta 阅读全文
posted @ 2021-12-29 20:13 嘉琦 阅读(70) 评论(0) 推荐(0) 编辑
摘要:1.单伪元素清除法;清除浮动 .clearfix::after{ content: '.'; display: block; clear: both; height: 0; /* 这两行代码是清除content里.的这个内容*/ visibility: hidden; } 清除浮动之前,两个盒子重叠 阅读全文
posted @ 2021-12-29 19:52 嘉琦 阅读(49) 评论(0) 推荐(0) 编辑
摘要:效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">Redmi 手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> </ul> CSS 阅读全文
posted @ 2021-12-29 18:48 嘉琦 阅读(134) 评论(0) 推荐(0) 编辑
摘要:html代码: <body> <div class='red'> </div> <div class='green'> </div> <div class='blue'> </div> </body>浮动特点: 1.使用浮动时会脱标,被脱标的物体会向上空飘去,不占用正常流的位置, 此时用的是 .gr 阅读全文
posted @ 2021-12-29 16:38 嘉琦 阅读(590) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示