摘要：
在CSS中，可以通过white-space属性来实现文字不换行显示；只要将white-space属性的值为nowrap就可强制文字不换行。 white-space属性指定元素内的空白怎样处理。它有以下属性值： normal：默认。空白会被浏览器忽略。 pre：空白会被浏览器保留。其行为方式类似 HT 阅读全文
posted @ 2020-05-11 14:18
前端一点红
阅读(15672)
评论(0)
推荐(0)
摘要：
JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改，而是使用 CSS 自定义属性甚至 Sass 变量。 CSS 自定义属性和 JavaScript 自定义属性在这里应该不会令人感到惊讶 阅读全文
posted @ 2020-05-11 12:57
前端一点红
阅读(631)
评论(0)
推荐(0)
摘要：
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 1、将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设 阅读全文
posted @ 2020-05-11 12:54
前端一点红
阅读(6134)
评论(0)
推荐(0)
摘要：
雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件： 合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用 首先确定要使用的图标的位置和大小（可以通过ps测量）， 如下的雪碧图大小统 阅读全文
posted @ 2020-05-11 12:52
前端一点红
阅读(2398)
评论(0)
推荐(0)
摘要：
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。 方法一 这个方法把一些 阅读全文
posted @ 2020-05-11 12:47
前端一点红
阅读(21499)
评论(0)
推荐(0)
摘要：
当你的用户需要一些额外的上下文来放置图标，或者当他们需要一些保证来点击按钮，或者可能是一个复活节彩蛋的标题来搭配一个图片时，工具提示是一个很好的方法来增强用户界面。现在让我们来制作一些动画工具提示，只使用HTML和CSS。 演示 以下是我们的工作目标: 主要目标是拥有一种添加工具提示的简单方法，因此 阅读全文
posted @ 2020-05-11 12:37
前端一点红
阅读(794)
评论(0)
推荐(0)
摘要：
复杂的网页布局都是通过各种网页元素灵活定位实现的，网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。 float定位（即浮动定位）： 这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），它的定位是相对于父元素容器； 如果该元素设置 阅读全文
posted @ 2020-05-11 12:34
前端一点红
阅读(2446)
评论(0)
推荐(0)
摘要：
因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。 在网上找了很多方法，最终的方法基本都是改动画规则，比如 @keyframes move{ /* 此处从75%开始 */ 75%{ transform: translat 阅读全文
posted @ 2020-05-11 12:30
前端一点红
阅读(2676)
评论(0)
推荐(0)
摘要：
再日常项目中可能会用到一些特殊的样式，比如大写字母转小写、小写字母转大写、首字母大写等。 可以通过 CSS 的 text-transform 属性来实现： text-transform 转换不同的文本 属性值： none 带有小写字母和大写字母的标准的文本（默认属性）。 capitalize 首字母 阅读全文
posted @ 2020-05-11 12:28
前端一点红
阅读(448)
评论(0)
推荐(0)
摘要：
通过设置元素的pointer-events属性设置为none，来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击。 css设置不可点击： css代码： .disable { pointer-events: none; } 示例： const disabled = true; < 阅读全文
posted @ 2020-05-11 12:27
前端一点红
阅读(18006)
评论(0)
推荐(0)
摘要：
浏览器网页左上角小图标实现方式。 方式一： 在线生成ICO图标制作一个16*16 的.icon文件，文件名必须要favicon.ico，然后放在服务器根目录下面，一般浏览器会自动默认在跟目录下面查找。 方式二： 其实不必方式一这么麻烦。 在html的head表头中加： <link rel="shor 阅读全文
posted @ 2020-05-11 12:25
前端一点红
阅读(1733)
评论(0)
推荐(0)
浙公网安备 33010602011771号