层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
原理 创建两个div嵌套在一起 外层的div设置固定宽度和overflow:scroll 滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth 实现代码 /** * 获
设置滚动条样式 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px;
前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将我遇到的问题记录下来,以及记录我的解决办法,以下问题及解决办法,都是真实可用的,本人亲测~~ 一、
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大家。方案简单实用,笔者已在生产环境使用过。通过整体的html使用filter来进行过滤。如下,只要引入
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css 使用css的keyframe属性,配合animation。 js配合 我们实现的效果应该是一进来
html代码 css代码 效果图
在做移动端开发的时候大家肯定会遇到适配问题,手机的屏幕大小有非常多的类别,使用传统的px距离单位已经无法满足我们的需要,于是rem便横空出世,他与百分比定位是比较像的,但是也是有一定的区别,在这里就跟
最近工作有一个需求是将一个界面改为响应式布局,由于UI还没有给设计,于是自己先查了一下资料做了一个demo。其实实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要
因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看。有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客。 样式介绍 给大
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂。关键的是笔者有点懒,要写那么多div和css真是不想下手啊。多看了两眼,这布局不跟网格挺像吗?c
一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box
display的值及作用 display属性可以设置元素的内部和外部显示类型,元素的外部显示类型将决定该元素在流式布局中的表现,例如块级或内联元素,元素的内部显示类型可以控制其子元素的布局,例如gri
CSS3新特性 是最新的 标准,旨在扩展 。 圆角 通过 属性可以给任何元素制作圆角。 : 所有四个边角 属性的缩写。 : 定义了左上角的弧度。 : 定义了右上角的弧度。 : 定义了右下角的弧度。 :
CSS引入方式 将 作用到 主要有四种方式,分别为 元素添加内联样式、` 特点 与`HTML HTTP`请求 适合于动态样式,对于不同的用户从数据库加载不同样式嵌入到页面 不足 嵌入样式不能被浏览器缓
CSS选择器 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/EveryDay 使用 对`HTML`页面中的元素实
CSS隐藏元素的方法 使用CSS隐藏元素的主要方式有diaplay: none;、opacity: 0;、visibility: hidden;、position: absolute; overflo
CSS盒子模型 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/EveryDay 所有的 元素都可以看作是一个盒子
FLEX布局 布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。 基础 通过指定 来标识一个弹性布局盒子,称为 容器,容器内部的盒子就成为 容器的成员,
GRID布局 目前 布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。 布局与 布局有一定的相似性,都可以指定容器内部多个成员的位
CSS优先级 当样式表比较复杂时,很容易出现多个样式对作用于一个标签的情况,这时就需要注意 优先级来决定哪些样式会被作用于该标签,哪些会被覆盖。 选择器的优先级 对于标签自有的属性,选择器的优先级规则
响应式布局的实现 响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局,能够在大屏设备以及小屏设备获得更好的浏览体验,简单来说就是页面适应终端而无需为每个终端制作单独的页面。 媒体查询
文本溢出截断省略 文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。 单行溢出省略 单行文本溢出截断省略直接使用C
Table布局 来布局。 实例 实现一个简单的布局,将表格的 、`cellpadding cellspacing 0`,表格的边框和间距就不占有页面空间,它只起到划分空间的作用,如果布局复杂,可以在单