摘要: 一、背景颜色 background-color: pink; 这个属性后面可以加上对应的颜色。 二、背景图片 background-image: url("./images/demo.png"); 这个属性用来添加背景图片。 注意:背景图片与背景颜色并不冲突,元素既可以添加背景颜色,也可以添加背景图 阅读全文
posted @ 2021-08-01 14:26 qingshanyici 阅读(773) 评论(0) 推荐(0) 编辑
摘要: 我们知道,当一个div的高度是40px的时候,设置其line-height为40px,就能实现文字的垂直居中,这是为什么呢? 行高,也就line-height的组成部分有三部分组成,文字大小,上间隙,下间隙。 如果元素的高是40px,文字大小为20px,那么他的上间隙和下间隙加起来就是40-20=2 阅读全文
posted @ 2021-06-28 08:48 qingshanyici 阅读(658) 评论(0) 推荐(0) 编辑
摘要: 当页面滚动到某一个特定位置的时候,标题栏就始终保持到顶部固定位置,当页面滚回到某一个特定位置的时候,标题栏再恢复到原来的状态。 效果图: 思路的难点: 第一步,先给滚动动作添加处理事件,handleScorll事件 第二步,事件获取的高度,是两个属性,scrollTop和元素的高度位置offsetT 阅读全文
posted @ 2021-05-17 09:50 qingshanyici 阅读(71) 评论(0) 推荐(0) 编辑
摘要: 一、基本使用 首先要定义动画的名字,然后通过name属性应用。duration表示这个动画效果持续的时间。如果不指定animation-duration 属性,则动画不会发生,因为默认值是 0s(0秒)。 定义的动画主要是由动画序列组成。比如做一个div块,让他在页面加载的时候x轴从0px移到100 阅读全文
posted @ 2021-05-10 09:34 qingshanyici 阅读(99) 评论(0) 推荐(0) 编辑
摘要: 题目地址:https://leetcode-cn.com/problems/two-sum/ 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 的那 两个 整数,并返回它们的数组下标。 思路:用map先存一下,然后去找。 难点:map的用法。 var arr 阅读全文
posted @ 2021-05-08 11:41 qingshanyici 阅读(36) 评论(0) 推荐(0) 编辑
摘要: 第一梯队:位置相关的属性 display position float clear visibility overflow 第二梯队:自身属性 width height margin padding border background 第三梯队:文字属性 color font text-decora 阅读全文
posted @ 2021-04-22 14:26 qingshanyici 阅读(50) 评论(0) 推荐(0) 编辑
摘要: 1、偏移translate 对元素进行偏移,这个方法的好处是不会影响文档流中其他元素的位置。 这个方法的主要用途是用户经过元素的时候,给元素一个提起来的效果。 <div class="uplift"> <ul> <li> <img src="./images/img_01.png" /> </li> 阅读全文
posted @ 2021-04-22 14:13 qingshanyici 阅读(521) 评论(0) 推荐(0) 编辑
摘要: 1、单行文本溢出用省略号代替 .content { width: 300px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、多行文本溢出后最后一行用省略号代替 < 阅读全文
posted @ 2021-04-01 15:29 qingshanyici 阅读(94) 评论(0) 推荐(0) 编辑
摘要: 首先,先看一个现象:为什么图片与父元素的底部会有一个缝隙呢?即使给父元素设置了padding仍不起作用。 因为这个缝隙并不是由于padding导致的。 <div class="line-wrap"> <img src="./images/icon_plane.png" /> </div> 这个缝隙, 阅读全文
posted @ 2021-04-01 08:46 qingshanyici 阅读(265) 评论(0) 推荐(0) 编辑
摘要: 1、画三角 注意点: 宽与高一定要设为0.想要哪个方向的三角,只要将相应的border置为transparent就可以了。 .jiao { width: 0px; height: 0px; border-left: 30px solid blue; border-right: 30px solid 阅读全文
posted @ 2021-03-31 10:19 qingshanyici 阅读(119) 评论(0) 推荐(0) 编辑