css
关注
分享
扫一扫
duansamve
我的Web前端(React、Vue)、NodeJS......开发笔记
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS3动画详细教程
百分比语法：用 0%（动画开始）、50%（动画中间）、100%（动画结束）等百分比指定关键状态；from/to 语法：简化版，from 等价于 0%，to 等价于 100%。示例：简单位移动画/* 定义关键帧：名为 move 的动画 *//* 动画开始（0%）：初始位置 */0% {/* X 轴位移 0 *//* 动画中间（50%）：过渡状态 */50% {/* 斜向位移 *//* 动画结束（100%）：最终位置 */100% {/* X 轴位移 600px */原创 2025-11-23 15:19:17 · 48 阅读 · 0 评论 -
CSS常用语法汇总
属性规定背景图像的尺寸。原创 2024-05-14 21:30:37 · 432 阅读 · 0 评论 -
html特殊字符的html，js，css写法汇总
⇠箭头类符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ ⇠ \u21E0 \21E0 ⇢ ⇢ \u21E2 \21E2 ⇡ ⇡ \u21E1 \21E1 ⇣ ⇣ \u21E3 \21E3 ↞ ↞ \u219原创 2024-05-14 20:53:11 · 1003 阅读 · 0 评论 -
css伪元素::before和::after用法详解
CSS3为了区分伪类和伪元素，伪元素采用双冒号写法。::before和::after下特有的content，用于在css渲染中向元素头部或尾部添加内容。这些添加不会出现在实际DOM结构中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用::before或::after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。上面所列特殊字符的html，js和css的写法是不同的，具体可查看html特殊字符的html，js，css写法汇总。原创 2024-05-14 20:49:13 · 961 阅读 · 0 评论 -
CSS布局方式汇总
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.不能更改元素的height，width的值，大小由内容撑开.可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.原创 2024-05-14 14:30:19 · 1032 阅读 · 0 评论 -
并列的两个盒子，一个有固定宽度，如何让另一个自适应剩余宽度
没有浮动，让页面布局更为稳定。原创 2024-05-14 09:54:37 · 358 阅读 · 0 评论 -
如何将一个div水平垂直居中？
div绝对定位水平垂直居中【margin 负间距】，这或许是当前最流行的使用方法： div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top...原创 2018-04-20 21:48:12 · 195 阅读 · 0 评论 -
CSS3实现鼠标移动到图片上图片变大
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 30原创 2018-04-20 21:46:52 · 479 阅读 · 0 评论 -
CSS3常用语法
1、CSS3属性选择器；2、CSS3结构伪类选择器；3、CSS3伪类选择器；4、CSS3 2D转换；5、CSS3动画；6、CSS3 3D转换；7、浏览器私有前缀。原创 2021-07-24 22:20:09 · 144 阅读 · 0 评论 -
原生HTML、CSS、JS生成一份HTML格式测试报告
因为测试内容比较复杂，后端生成的WORD、PDF格式的测试报告总是不太美观，而HTML能比较容易控制内容格式，这里提供一份HTML格式的报告模板，后端可以直接用该模板来生成HTML格式的报告。<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&原创 2021-07-25 10:36:41 · 1684 阅读 · 1 评论 -
css 强制不换行超出显示省略号，自动换行超出显示省略号
强制不换行white-space:nowrap;自动换行word-wrap:break-word;强制英文单词断行word-break:break-all;*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。超出显示省略号text-overflow:ellipsis; overflow:hidden;内容超过DIV宽度后显示省略号单行white-space: nowrap;overflow: hidden;text-overflow: e原创 2021-04-10 10:02:08 · 376 阅读 · 0 评论 -
CSS总结div中的内容垂直居中的四种方法
一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：p { height:30px; line-height:30px; width:100px; overflow:hidden; }二、内边距（padding）法另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：p { padding:20px 0; }三、模拟表格法将容器设置为dis转载 2021-04-10 09:19:56 · 4950 阅读 · 0 评论 -
纯css实现容器高度随宽度等比例变化的两种解决方案
1、padding-bottom实现这里方法非常巧妙，由于padding-bottom的属性值百分比是按照父容器的宽度来计算的，所以这里我们设置容器宽度为父容器的50%；padding-bottom也为50%；就都是父容器宽度的50%；显示出来就是一个完美的正方形了。<style type="text/css">#container { width: 80%; height: 500px;}.box{ width: 50%; height: 0;转载 2021-04-10 09:06:04 · 1413 阅读 · 0 评论 -
ie8下平铺背景图
body{ background: #ffffff url('{{STATIC_URL}}img/banner.png') no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover...原创 2019-04-29 22:19:45 · 524 阅读 · 0 评论 -
Chrome表单自动填充如何取消(暂时可行的解决办法)
做项目时一直遇到一个问题，那就是用chrome测试的时候页面上的表单一直会自动填充，并且伴有黄色的背景颜色，有时候感觉很方便，有时候又很想去掉。之前也多次寻找过方法，但是网上的方法都差不多，很多都是说在表单上面加上autocomplete="off"，可是事实证明并没有什么用。然后今天终于寻找到了一个方法，就是在type=password 的表单上加上属性autocomplete="new...转载 2018-11-08 23:00:12 · 1327 阅读 · 0 评论 -
ie（包括ie6、ie7、ie8）下背景透明的方法
<div style="z-index: 999; position: absolute;width: 520px; left:50%;top:50%;margin-left:-260px;margin-top:-164px;height: 328px;padding-top: 0; background-color:#000\9;filter:alpha(opacity=77)\9;"&g...原创 2018-06-14 09:46:43 · 392 阅读 · 0 评论 -
CSS设置DIV高度百分之百及后台系统界面布局
html,body{ height: 100%;margin: 0;padding: 0;}<div style="width: 220px;background:#0a6aa1;height: 100%;float:left;"></div><div style="margin-left: 230px;background:#ff66cc;height:...原创 2018-06-04 22:17:42 · 2419 阅读 · 0 评论