CSS
与css有关的文章
米咪米
这个作者很懒,什么都没留下…
展开
-
阿里图标库在旧有的iconfont中添加新的图标
阿里图标库在旧有的iconfont中添加新的图标原创 2022-09-09 17:34:10 · 5151 阅读 · 4 评论 -
CSS3 2D转换rotate 旋转案例
1、问题描述:当鼠标经过div时,用另一个盒子覆盖,并且添加过渡效果触发前:鼠标经过盒子后:2、核心思路:给定一个盒子1,设置宽高, 利用伪元素 ::before,添加另一个盒子2(因为伪元素是行内元素,不能设置宽高,所以我们设置display:block) 设置盒子2的旋转中心为左下角,并旋转180° 当鼠标经过盒子1时,盒子2旋转0° 给盒子2添加过渡效果3、实现代码:<!DOCTYPE html><html lang="en">..原创 2021-08-23 21:44:25 · 194 阅读 · 0 评论 -
CSS实现下拉菜单
关键点在于 display:block 和display:none 的切换实现原理:1、设置下拉框的盒子,想要实现鼠标经过这个盒子时,出现下拉框2、设置下拉框的小盒子,使用相对定位设置其所在的位置,并用display:none设置这个下拉框的盒子为隐藏3、设置样式display:block,当鼠标经过这个红色的盒子时,绿色的下拉框盒子显示出来主要实现代码:<!DOCTYPE html><html lang="en"><head...原创 2021-07-14 10:22:11 · 1207 阅读 · 0 评论 -
CSS制作鼠标移上去,三角形(箭头)旋转
1、假设我们想在“导航网站”后面加个小三角形的箭头那么我们可以使用 ::before选择器创建一个伪元素,然后设置这个伪元素的背景图片为这个小三角的图片,再利用相对定位设置一下位置 .box a::before { content: ''; position: absolute; width: 16px; height: 14px; background: url(./img原创 2021-07-14 09:42:52 · 2012 阅读 · 0 评论 -
精灵图的使用方法(css)
1、为什么要用精灵图 网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,因此,产生了css精灵技术。2、主要使用的是background-position属性比方说,在如图所示的字母图片中,我们想要A字母(1)、设置一个容器div,设置其高度和宽度(2)、设置背景图片,并且不重复(3)、设置背景图片的位置,x,y(左上角是0,0)<!DOCTYPE ...原创 2021-07-13 15:25:26 · 423 阅读 · 0 评论 -
flex弹性布局
一、概述Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-webkit前缀。.box{ displa原创 2021-07-13 09:25:25 · 87 阅读 · 0 评论 -
grid网格布局
1、概述网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。上图就是通过grid布局呈现出来的页面效果Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局二、基本概念2.1 容器和项目采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item.原创 2021-07-12 16:30:49 · 460 阅读 · 0 评论 -
基础样式 base.css
/*清除元素默认的内外边距*/*{margin:0;padding:0;}/*让所有斜体不倾斜*/em,i{font-style:normal;}/*去掉列表前面的小点*/li{list-style:none;}/*图片没有边框,去掉图片底侧的空白缝隙*/img{border:0;/*ie6*/vertical-align:middle;}/*让button按钮变成小...原创 2021-07-12 14:12:27 · 249 阅读 · 0 评论 -
CSS3 box-shadow 属性
box-shadow: 10px 20px 30px #888888;其中,10px表示阴影区域向x轴正向移动10px 及向 → 移动20px表示阴影区域向y轴负向移动20px,及向 ↓ 移动30px表示阴影区域的模糊程度,数值越大,越模糊#888888表示阴影区域的颜色...原创 2021-07-11 15:40:29 · 141 阅读 · 0 评论