CSS
文章平均质量分 58
A Lucky Boy
这件事,没有时间的限制,只要愿意,什么时候都可以开始。
展开
-
【CSS】CSS之flex布局详解
flex布局flex布局flex主轴flex侧轴flex让子盒子在父盒子中实现水平垂直居中方法伸缩比圣杯布局小结改变默认主轴方向弹性盒子换行flex布局flex布局极大的提高了我们布局的效率,更简单、灵活。display: flex; 一定要给亲爸爸加。flex主轴flex主轴是水平方向来布局的一个参考线 常用的属性为 /* 默认对齐方式 左侧对齐 */ justify-content: flex-start; /* 右侧对齐 */ justify-原创 2022-05-25 18:06:46 · 1867 阅读 · 0 评论 -
【CSS】CSS之&旋转&动画
#CSS位移&旋转&缩放&动画iconfont图标的使用进入https://www.iconfont.cn添加完成icon font图标之后点击添加至项目,在项目中就可以看到添加的图标常用的有三种方法,第一种下载至本地 第二种生成在线代码复制到相应的文件内 第三种使用为元素添加使用时要用标签包裹,且有两个类名 第一个为iconfont 第二个为需要引用的字体图标下载至本地需要引入两个字体图标到根目录的fonts文件夹内 分别为下图四个文件 且引入icon原创 2022-05-23 19:13:42 · 2682 阅读 · 0 评论 -
【CSS】CSS让父盒子里的内容水平、垂直居中的写法
第一种:使用margin的方法 第一种方法是使用margin来使子盒子居中,但是这种方法会有一定的缺陷:需要给父盒子一个 overflow: hidden属性来清除塌陷,而且还需要精确计算上下的边距 如果父盒子改变大小,则还需重新计算大小<style> /* 第一种 使用margin来使父盒子里边的内容居中 缺点:需要给父盒子一个 overflow: hidden属性来清除塌陷,且还需要精确计算上下的边距 如果盒子改变大小,则还需重新计算大小 ...原创 2022-05-15 15:35:06 · 493 阅读 · 0 评论 -
【css选择器】nth-child()的相关用法
目录前言一、列表中的偶数标签 :nth-child(2n)二、列表中的奇数标签 :nth-child(2n+1)三、选择从第6个开始,直到最后 :nth-child(n+6)四、选择第1个到第6个 :nth-child(-n+6)五、选择第6个到第9个六、补充:nth-of-type(n)七、从倒数第六个开始变色前言:nth-child()选择器,该选择器选取父元素的第 N 个子元素,与类型无关,公式通用。一、列表中的偶数标签 :nth-child(...原创 2022-05-14 14:17:38 · 5281 阅读 · 0 评论 -
【3D旋转墙】最简单的3d旋转墙
还在为节日不知道送女朋友什么而烦恼?还在为父母不知道计算机专业是写代码而烦恼?还在为母亲节or父亲节送父母礼物父母说不要乱花钱?(当然父母只是口头说一下他们什么都不缺,但收到孩子送的礼物,心里还是很高兴的),还在为最近爆火的3D旋转墙不知道如何实现而烦恼? 那么这篇博文可能对你很大的帮助,利用HTML、CSS、JavaScript实现史上最简单的3D旋转墙,关注博主,助你解决以上所有烦恼!!!!!原创 2022-05-02 10:19:42 · 588 阅读 · 5 评论 -
【JavaScript】利用JS实现在数组内的对象遍历到页面中
【JavaScript】利用JS实现在数组内的对象遍历到页面中原创 2022-04-19 11:22:11 · 2107 阅读 · 0 评论 -
【JavaScript】利用JS实现柱形统计图
CSS代码部分:<style> * { margin: 0px; padding: 0px; } .box { display: flex; width: 700px; height: 500px; border-left: 1px solid pink; border-bottom: 1px solid pink; margin: 50px auto; justify-content: space-ar原创 2022-04-14 16:33:07 · 2287 阅读 · 7 评论 -
【HTML、CSS】利用html、css构成静态页面——品优购(导航和尾部)
只是打了一个头部导航和尾部,中间部分为小米商城商品列表源码地址:https://github.com/wmc1459563528/-原创 2022-03-19 16:16:19 · 185 阅读 · 0 评论 -
【icon图标】icon字体图标的下载与使用
icon字体图标的下载与使用原创 2022-03-17 09:20:03 · 2336 阅读 · 0 评论 -
【HTML、CSS】利用HTML、CSS实现静态页面——学成在线
HTML部分源码: <!-- 头部导航栏 --> <div class="header w"> <!-- logo图片 --> <div class="pic"> <img src="../pic/学成在线.png" alt="学成在线logo" /> </div> <div class="nav"> ..原创 2022-03-15 10:56:16 · 1082 阅读 · 0 评论 -
【HTML、CSS】利用HTML、CSS仿小米商城商品列表
利用HTML、CSS仿小米商城商品列表原创 2022-03-12 11:50:28 · 1022 阅读 · 0 评论 -
【CSS】CSS基础标签(三)
圆角边框:border-radius:length;单位可以为像素,也可以为百分比如果是正方形 想设置一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%如果是矩形 设置高度的一半,就可以实现两边为圆角的边框盒子阴影:box-shadow: h-shadow v-shadow blur spread color inset;box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;值 描述.原创 2022-03-10 22:24:28 · 130 阅读 · 0 评论 -
【CSS】CSS基础标签(二)
目录CSS优先级CSS优先级比较规则CSS盒子模型网页布局过程盒子模型的组成边框内边距CSS内减模式外边距外边距合并嵌套元素垂直外边距的塌陷清除内外边距两种方法行内元素内外边距无效情况CSS优先级选择器 选择器权重 继承或者* 0.0.0.0 元素选择器 0.0.0.1 类选择器,伪类选择器 0.0.1.0 ID选择器 0.1.0.0 行内样式 style=“” 1.0..原创 2022-03-08 22:06:43 · 177 阅读 · 0 评论 -
【HTML、CSS】使用HTML、CSS实现动态爱心
HTML部分源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-02-26 18:57:59 · 4531 阅读 · 2 评论 -
【CSS】CSS基础标签(一)
1、CSS的三种导入样式内部样式:<style>css样式代码,每一个声明,最好都用分号结尾语法:选择器{声明1;声明2;……}引用外部样式:<link rel="stylesheet" href=" ">将css样式导入html中行内样式:直接在需要增加样式得标签元素中添加style属性,编写样式即可,如果有多个样式,用分号结尾优先级:就近原则2、选择器2.1 基本选择器标签选择器:会选择到页面上所有的标签&...原创 2022-02-20 14:37:09 · 1435 阅读 · 0 评论