CSS
文章平均质量分 75
CSS模块,主要用来给页面进行美化
bear*6
努力的小熊
展开
-
动态生成表格案例(HTML+CSS+JS)
在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除。实现代码为:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0;原创 2021-12-21 16:07:06 · 5340 阅读 · 0 评论 -
模态框拖拽效果实战(HTML+CSS+JS)
在这里做一个模态框拖曳的案例,在这里要实现的功能有:点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。鼠标松开,可以停止拖动模态框移动。实现思路为:点击弹出层, 模态框和遮挡层就会显示出来 display:block;点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标。触发事件是鼠标按原创 2021-12-21 15:41:37 · 852 阅读 · 0 评论 -
放大镜效果实战(HTML+CSS+JS)
在浏览网页时,我们经常会看到各种各样放大镜效果,那么小熊今天就来模拟一下该效果。我们要实现的功能为:当鼠标经过小图片时, 会在小图片上显示一个小的遮挡层并将遮挡层里面的内容放大显示,当鼠标离开时,让遮挡层和放大显示的图片消失掉。实现思路为:先让小的遮挡层跟随鼠标移动。因为遮挡层坐标以父盒子为准,所以把鼠标坐标给遮挡层不合适。首先是获得鼠标在盒子的坐标,之后把数值给遮挡层做为left 和top值。但是为了美观,在这里可以将遮挡层中间的坐标给鼠标,即让遮挡层位置再减去盒子自身高度和宽度的一半。然后用到原创 2021-12-21 15:41:13 · 1859 阅读 · 0 评论 -
精灵图技术
精灵图技术一、为什么需要精灵图技术二、精灵图的使用三、案例一、为什么需要精灵图技术一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称CSS Sprites、CSS 雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。二、精灵图的使用使用精灵图核心:原创 2021-10-29 21:51:31 · 295 阅读 · 0 评论 -
CSS(九)(过渡)
过渡1.transition-property属性2.transition-duration属性3.transition-timing-function属性4.transition-delay属性5.transition属性6.过渡和变形的区别CSS3提供了强大的过渡属性,它可以在不使用Flash动画或者JavaScript脚本的情况下,为元素从一种样式转变为另一种样式时添加效果,例如渐显、渐弱、动画快慢等。1.transition-property属性transition-property 属性用于原创 2021-10-24 21:31:09 · 225 阅读 · 0 评论 -
CSS3新特性(属性选择器 、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀)
这里写目录标题一、CSS3 属性选择器二、CSS3 结构伪类选择器三、 CSS3 伪元素选择器四、CSS3 2D转换1.2D 转换之移动 translate2.2D 转换之旋转 rotate3. 2D 转换中心点 transform-origin4.2D 转换之缩放scale5.2D转换综合写法五、 CSS3 动画1.动画基本的使用1. 用keyframes 定义动画(类似定义类选择器)2.元素使用动画2. 动画常用属性3.动画简写属性4.速度曲线细节六、CSS3 3D转换1、三维坐标系2.3D移动 tra原创 2021-10-21 23:40:52 · 289 阅读 · 0 评论 -
CSS(八)(滚动标签)
滚动标签一级目录二级目录三级目录一级目录二级目录三级目录原创 2021-10-21 22:23:07 · 2112 阅读 · 0 评论 -
CSS(七)(弹性盒子)
这里写目录标题一、flex布局原理二、flex 布局父项常见属性1. flex-direction 设置主轴的方向1. 主轴与侧轴2.属性值2.justify-content 设置主轴上的子元素排列方式3.flex-wrap 设置子元素是否换行4.align-items 设置侧轴上的子元素排列方式(单行 )5.align-content 设置侧轴上的子元素的排列方式6.align-content 和 align-items 区别7.flex-flow三、flex 布局子项常见属性1.flex 属性2. al原创 2021-10-21 21:49:44 · 99 阅读 · 0 评论 -
CSS(六)(元素的显示和隐藏)
本质:让一个元素在页面中隐藏或者显示出来原创 2021-10-21 20:16:34 · 100 阅读 · 0 评论 -
CSS(五)(定位)
目录一、定位1.定位组成(1)定位模式(2)边偏移2.静态定位 static3.相对定位 relative4.绝对定位 absolute5.子绝父相的由来6. 固定定位 fixed二、元素的显示与隐藏一、定位浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。1.定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。定位 = 定位模式 + 边偏移 。定位原创 2021-10-21 19:51:58 · 88 阅读 · 0 评论 -
CSS(四)(盒子塌陷问题)
文章目录一、盒子塌陷问题1.出现问题2.解决办法3.具体实现二、其他盒子塌陷问题一、盒子塌陷问题1.出现问题有两个嵌套的DIV盒子,父盒子里面有一个子盒子,想让子盒子和父盒子上边距之间有一段间距,但是给子级元素添加的外边距没有效果,效果显示在了父级元素身上。例如:给定两个DIV盒子,父盒子为宽高均为200像素的蓝色盒子,子盒子为宽高均为100像素的绿色盒子,给子盒子添加上外边距30px。HTML结构为:<body> <div class="father">原创 2021-10-15 22:57:14 · 597 阅读 · 0 评论 -
CSS(三)(浮动)
目录一、浮动1.传统网页布局的三种方式2.标准流(普通流/文档流)3.什么是浮动?4.浮动特性二、常见网页布局三、清除浮动1、为什么要清除浮动?2、 清除浮动本质3、清除浮动方法1. 额外标签法2. 父级添加 overflow 属性3. 父级添加after伪元素4. 父级添加双伪元素5.清除浮动总结一、浮动1.传统网页布局的三种方式 CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):1、普原创 2021-10-14 14:51:34 · 139 阅读 · 0 评论 -
CSS(二)(盒子模型)
文章目录一、网页布局二、盒子模型的组成三、边框(border)四、表格的细线边框五、边框会影响盒子的实际大小六、内边距(padding)五、外边距(margin)六、外边距典型应用七、外边距合并1. 相邻块元素垂直外边距的合并2.嵌套块元素垂直外边距的塌陷八、清除内外边距一、网页布局网页布局过程:先准备好相关的网页元素,网页元素基本都是盒子 Box 。利用 CSS 设置好盒子样式,然后摆放到相应位置。往盒子里面装内容.网页布局的核心本质: 就是利用 CSS 摆盒子。二、盒子模型的组成&原创 2021-10-10 23:45:04 · 156 阅读 · 2 评论 -
CSS(一)(基础选择器、字体及文字属性、引入方式)
文章目录一、CSS 基础选择器1. CSS 选择器的作用2. 选择器分类3.标签选择器4.类选择器多类名选择器5. id 选择器6.通配符选择器7.id 选择器和类选择器的区别二、CSS Fonts字体属性1. 字体系列2. 字体大小3.字体粗细4.文字样式5. 字体复合属性三、CSS 文本属性1.文本颜色2.对齐文本3. 装饰文本4.文本缩进5. 行间距四、CSS 的引入方式1.CSS 的三种样式表2. 内部样式表3. 行内样式表4.外部样式表一、CSS 基础选择器1. CSS 选择器的作用选择器原创 2021-10-10 23:35:37 · 595 阅读 · 0 评论 -
CSS简介
文章目录前言一、CSS功能二、 CSS 语法规范三、 CSS 代码风格1.样式格式书写2. 样式大小写风格3. 样式空格风格总结前言 前面学习到的HTML,其实只关注内容的语义,只能用来做一些简单的样式,而CSS 的主要使用场景就是美化网页,布局页面的。CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言原创 2021-10-04 17:43:29 · 118 阅读 · 0 评论