css
huxiaoxiao.
努力学习中。。
展开
-
记录一下 overflow-x 出现无法超出宽度出现滚动条的问题
对比了一下之前写的,好像是 设置了 overflow-x 的盒子内的 子级不能固定 宽度,写了好多次,今天去写又卡住了,咋写不生效,心想不科学啊也不是第一次用。我用的 width 不生效,改成 min-width 完美解决。原创 2023-04-23 13:55:29 · 510 阅读 · 0 评论 -
css定位时使用transform: translateX(-50%)水平居中
用于一个没有父级的元素 ,定位后水平居中,上代码、简单记录一下,每次用都会忘记。原创 2023-02-14 09:44:58 · 749 阅读 · 0 评论 -
less 的基本使用
分享一下 less 配合 考拉 软件的基本用法先新建一个文件夹,在文件夹里新建两个文件mian.less 和 less.html把文件夹拖入软件 考拉 中右击 mian.less,选择 设置输出路径在文件名中输入 mian.css 点击保存单击 mian.less点击 执行编译 ,在页面跳出 success 后就设置成功了。去vscode 查看结果在 mian.less 中输入我们要敲的css样式去mian.css中查...原创 2021-11-16 17:00:21 · 325 阅读 · 0 评论 -
CSS3 内阴影的应用
内阴影应用效果展示:运用到的具体属性:box-shadow:0px 1px 0px rgb(255 255 255/10%),inset 0px 1px 1px rgb(0 0 0/70%)值 说明 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。 inset 可选。从外层的阴...原创 2021-11-30 21:50:50 · 636 阅读 · 0 评论 -
css3实现步骤进度条
使用伪类完成箭头样式步骤条:布局部分: <body> <div class="main"> <div class="item">需求讨论</div> <div class="item">需求讨论</div> <div class="item">需求讨论</div> <div class="item">需求讨论</div>原创 2021-11-28 14:11:25 · 672 阅读 · 0 评论 -
CSS3多重背景结合动画打造会飘动的热气球
1、引入所需要的图片,分别定义他们的位置,其中background-position: x轴 y轴,x轴 y轴;注意要和图片一一对应。2、添加动画与关键帧布局: <div id="wrap"> <h1>飞喽</h1> <div class="banner"></div> </div>样式:*{ margin: 0; paddi原创 2021-11-28 14:30:15 · 475 阅读 · 1 评论 -
css3做渐变进度条
布局:<body> <section class="container"> <div class="loading-bar"> </div> </section> <h1>css3渐变进度条</h1></body>样式部分:<style> body{ backgr原创 2021-11-25 21:06:51 · 381 阅读 · 0 评论 -
CSS3小球掉落依次排列动画
布局思路:1、先在一个大盒子里建立三个小盒子来储存图片2、为大盒子绝对定位脱标,然后再将图片脱标集中在一起3、先为三个图片添加公共动画,其中:4、为三个图片分别添加向左、向右以及原地不动的动画<div id="wrap"> <div class="pic1"><img src="./img/1.png" alt=""></div> <div class="pic2"><img src=原创 2021-11-28 16:00:15 · 550 阅读 · 0 评论 -
CSS3鼠标悬停图片360度旋转效果
布局:<body> <section class="photo"> <div class="pic pic1"></div> <div class="pic pic2"></div> </section></body>样式:<style> .photo{ width: 600px;原创 2021-11-24 22:32:19 · 2221 阅读 · 0 评论 -
css3 制作炫酷的发光文字动画
布局:<body> <h2> <span style="--i:1;">H</span> <span style="--i:2;">a</span> <span style="--i:3;">p</span> <span style="--i:4;">p</span> <span style原创 2021-11-24 22:42:07 · 440 阅读 · 0 评论 -
CSS3制作旋转饼状的图
1、先设计一个圆,然后将圆划分为两个颜色{background-image: linear-gradient(to right,transparent 50%, green 0);}2、然后实现一个伪类,设计一个与上一个圆颜色相反的圆,并让这个圆顺时针旋转630deg<div class="pig"></div>样式: *{ margin: 0; padding: 0; } .pig{原创 2021-11-28 16:09:55 · 267 阅读 · 0 评论 -
css3 做渐变的头部
使用linear-gradient 线性渐变,做出头部区域:布局:<body> <div class="head"> </div></body>样式部分: <style> *{ padding: 0; margin: 0; } .head{ width: 100%; ..原创 2021-11-26 08:58:34 · 367 阅读 · 0 评论 -
弹性布局做骰子布局
使用弹性布局完成骰子 一点 到 九点 的布局;(七点和八点没写)先做出基本样式: <style> /* 全局样式 */ *{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; } /* body背景颜色,让整个骰子居中显原创 2021-12-01 10:22:09 · 3491 阅读 · 5 评论 -
CSS3漂亮的相册集
使用鼠标的悬停做出漂亮的照片样式:布局部分:<body> <header> <h1>美丽人像图集</h1> </header> <section> <div class="photo"> <ul> <li> <a href=""><img src="img/1.jpg原创 2021-11-25 14:00:15 · 239 阅读 · 0 评论 -
css变量
在/css中全局定义变量:root定义全局样式 :root{ font-size: 50px;/* css中定义变量语法:--变量名:赋值的内容 (变量名不能用数字开头,不能是中文) */ --borderColor: lightblue; }css中使用变量:使用var()函数 .name{ width: 150px; height: 90px; .原创 2021-11-25 21:48:02 · 347 阅读 · 0 评论 -
CSS3 炫酷的时钟制作
时钟制作效果: 首先你要知道时钟的运行规律(虽然大部分人都知道),然后给三个针制作符合自身运动规律的动画,这里需要用到定时器,但是如果只需要像定时器一样可刷新,用infinit也行。其次是针的摆放需要应用到transform-origin这一属性transform-origin: x-axis y-axis z-axis;值 描述 x-axis 定义视图被置于 X 轴的何处。可能的值: left ...原创 2021-11-30 21:44:30 · 353 阅读 · 0 评论 -
CSS3仿腾讯专题页,实现3D旋转效果
布局部分:<div class="nav"> <div class="box box1"> <a href="#"> <div class="border b1"><img src="./img/n1.png" alt=""></div> </a> </div> <div class="box box2">原创 2021-11-26 09:38:45 · 291 阅读 · 0 评论 -
css3做炫酷的变色龙效果
布局:<body> <div class="wrap"> <div class="bianselong"></div> <div class="bg-box"> <div class="bg"></div> </div> <div class="dong"></div>原创 2021-11-24 22:27:24 · 156 阅读 · 0 评论 -
css3作炫酷的加载特效
布局部分:<body> <section> <div class="loading"> <div class="blocks" style="--i:1;"></div> <div class="blocks" style="--i:2;"></div> <div class="blocks" style="--i:3原创 2021-11-25 20:33:51 · 240 阅读 · 0 评论 -
CSS3 文本内的泡沫漂浮动画
用 css3 做出文字背景图泡沫样式漂浮效果使用标签在页面上写出一句话,内容自定义<body> <h1>happy!</h1></body>在style标签里书写样式 *{ margin: 0; padding: 0; list-style: none; text-decoration: none; }原创 2021-11-22 14:11:07 · 712 阅读 · 0 评论 -
CSS3做齿轮旋转的动画
大致思路:1、先建立一个大盒子,并设为圆形,然后在其中添加齿轮图片,使用z-index实现齿轮的层次感。2、为齿轮添加旋转特效,注意旋转角度布局:<div class="cricle"> <div class="rotate1 gear1"> <img src="./img/bg-gear-f_089274a.png" alt=""> </div> <div cla原创 2021-11-28 14:42:35 · 901 阅读 · 2 评论 -
css3做太极图
使用 css3 制作炫酷的会转的太极图:先做出基本外观:<body> <div class="box"></div></body>最外层样式: <style> .box{ width: 400px; height: 400px; border: 1px solid #000; /* 最外层大盒子倒原创 2021-11-24 21:48:10 · 491 阅读 · 0 评论 -
CSS3弹跳小球运动效果
css3 做小球弹跳的 效果布局部分,需要三个小球,不同的颜色,每个小球下方有影子: <div class="w1200"> <div class="box red"> <div class="ball"></div> <div class="shadow"></div> </div> <div class="bo原创 2021-11-23 10:04:25 · 840 阅读 · 0 评论 -
CSS3中filter hue-rotate()制作炫酷的文字效果
布局部分:<body> <div class="box"> <h2>h</h2> <h2>e</h2> <h2>l</h2> <h2>l</h2> <h2>o</h2> <h2 style="margin-left: 20px;">w</原创 2021-11-24 22:10:56 · 526 阅读 · 0 评论 -
小程序的 position: sticky; 吸顶效果的使用方法
今天在使用 uniapp 编写小程序时需要使用到吸顶效果,设置如下:.head { position: sticky; top: 88rpx; z-index: 100;}在网页上的显示效果是刚好固定在顶部显示,但是在微信开发者工具上,就距离顶部有了间隙后面发现在小程序中,需要设置: top: 0;.head { position: sticky; top: 0; z-index: 100;}注意事项:(1)距离顶部的吸顶距离 top:0 时才会生效;(2原创 2022-03-30 09:24:31 · 3063 阅读 · 1 评论 -
关于今天在写 flex 布局,遇到 for 循环后的失效问题
最开始我的 for 循环 和 flex 布局 写在 同一层,就出现了我想让他横着排列,结果却不生效 <view class="size" v-for="(item,index) in mianliao" > <view class="size-content u-m-t-16"> <image :src="item.img" mode=""></image> <text class="u-fo原创 2022-03-03 15:27:34 · 472 阅读 · 3 评论 -
解决头部使用 position:fixed; 固定定位后遮住下方内容的问题
今天在做一个页面的时候,有一个效果是要让头部固定,但是在给了position:fixed; 后,继续往下写会发现下方内容有部分被头部遮住了,有两个办法可以解决这种问题1.在头部下面给一个空的 div给这个div设置高度,把页面撑开,这种方法是让头部刚好遮住的是这个空div,把内容放出来。但是这种方法需要一点点调试高度,所以不推荐。2.把整个要使用 position:fixed; 的盒子,用另一个盒子包起来比如说我有一个头部区域,需要固定 <div class="head"&g原创 2021-12-30 09:45:00 · 14759 阅读 · 5 评论 -
制作箭头和三角形的方法
用div盒子制作简易箭头div{width: 30px;height: 30px;border-right: 1px solid red;border-bottom: 1px solid red;transform: rotate(-45deg);}显示如图:制作三角形:/* .box{width: 0;height: 0;border-top: 50px solid transparent;border-right: 50px sol..原创 2021-08-18 11:26:32 · 115 阅读 · 0 评论 -
CSS相对定位
网页中定位定位有三种,分别是相对定位、绝对定位、固定定位。相对定位:position:relative;绝对定位:position:absolute;固定定位:position:fixed;1.1)相对定位相对定位,就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。相对定位的定位值可以用left、right来描述盒子右、左的移动;可以用top、bottom来描述盒子的下、上的移动。也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位 posit原创 2021-08-13 17:09:31 · 1828 阅读 · 0 评论 -
background-position属性及css精灵
position就是“位置”的意思。background-position就是背景定位属性。 background-position:向右移动量 向下移动量; 定位属性可以是负数:css精灵“css精灵”,英语css sprite,所以也叫做“css雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个h...原创 2021-08-13 16:44:52 · 418 阅读 · 0 评论 -
background属性
一.background-color(背景颜色)用 英文单词表示;用 十六进制表示 #FF0000 简写#F00用 rgb(0,0,0) r,g,b取值范围0-255用 rgba(0,0,0,1) r,g,b取值范围0-255,a透明度0--1 (0.1 0.2 ... 0.9 1) 注意:数字如果是0.5,可以把小数点前面的零0 省略掉!二.background-image(背景图片)用于给盒子加上背景图片: background-image:url(img/a7.jpg);原创 2021-08-13 13:57:53 · 134 阅读 · 0 评论 -
行高和字号
line-height 行高作用:让文本垂直居中。文本在行里面居中公式----行高:盒子高;height:40px;line-height:40px;如果有时候,不需要给高度的是,我们直接给这个元素设置宽度和行高。width:100%;line-height:60px;行高、字号,一般都是偶数font属性能够将字号、行高、字体,能够一起设置font: 14px/24px “宋体”等价于三行语句:font-size:14px;line-height:24px;font.原创 2021-08-13 11:14:04 · 609 阅读 · 0 评论 -
浮动的性质
浮动是css里面布局用的最多的属性。float: left; (左浮动)float: right; (右浮动) .box{ width: 300px; height: 400px; float: left; background-color: green; } .box1{ w...原创 2021-08-12 17:06:14 · 110 阅读 · 0 评论 -
标准文档流
宏观的讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个“流”,必须从上而下,像“织毛衣”。而设计软件,想往哪里画个东西,都能画。(一)标准流的微观现象1)空白折叠现象:如果我们想让图片之间没有空隙,那么我们要让img标签紧密连接例如<img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""> 如下:...原创 2021-08-12 16:30:53 · 236 阅读 · 0 评论 -
css盒子 margin属性了解,及用法
margin外边距水平居中margin:0auto;注意:1)使用margin:0auto;的盒子,必须有width,有明确的width2)只有标准流的盒子,才能使用margin:0auto;居中。也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0auto;3)margin:0auto;是在居中盒子,不是居中文本。文本的居中,要使用text-align:center;如果上下值相等,左右值相等,只写2个值:margin:0auto;如果...原创 2021-08-10 17:14:58 · 932 阅读 · 0 评论 -
css盒子 padding属性border属性 ,了解及用法
盒子但凡是块元素,都可以认为是盒子!一个盒子中主要的属性就5个:width、height、padding、border、marginwidth是“宽度”的意思,CSS中width指的是“内容的宽度”,而不是盒子的宽度。height是“高度”的意思,CSS中height指的是“内容的高度”,而不是盒子的高度。padding是“内边距”的意思。border是“边框”。margin是“外边距”。盒子真实占有宽度= 左border + 左padding + width + 右pad...原创 2021-08-10 13:58:15 · 1546 阅读 · 0 评论 -
CSS语法及选择器
css语法: 选择器{ k:v; 例如 color: red; k:v; 属性: 值; k:v; k:v; }k 属性v 值选择器的命名:只能有字母、数字、下划线_、连接线-必须以字母开头选择器分类:1.标签选择器:就是标签的名字(直...原创 2021-08-09 11:50:18 · 105 阅读 · 0 评论