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