![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 83
FL1768317420
这个作者很懒,什么都没留下…
展开
-
[CSS]CSS 网格元素
grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。以下实例设置 "item8" 从第 1 行开始和第 2 列开始, 第 5 行和第 6 列结束。原创 2024-06-21 09:49:16 · 700 阅读 · 0 评论 -
[CSS]CSS 网格容器
justify-content 属性用于对齐容器内的网格,设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。如果您希望网格布局包含 4 列,则需要设置 4 列的宽度,如果所有列的宽度都是一样的,可以设置为 auto。grid-template-columns 属性定义了网格布局中的列的数量,它也可以设置每个列的宽度。如果您在 4 列网格中有 4 个以上的网格元素,网格布局会生成新的一行放置该元素。网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。原创 2024-06-21 09:48:45 · 474 阅读 · 0 评论 -
[CSS]CSS 网格布局
网格是一组相交的水平线和垂直线,它定义了网格的列和行。CSS 提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位。原创 2024-06-21 09:47:59 · 547 阅读 · 0 评论 -
[CSS]CSS3 多媒体查询实例
本章节我们将为大家演示一些多媒体查询实例。开始之前我们先制作一个电子邮箱的链接列表。原创 2024-06-20 06:18:14 · 781 阅读 · 0 评论 -
[CSS]CSS3 多媒体查询
对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。原创 2024-06-20 06:17:42 · 440 阅读 · 0 评论 -
[CSS]CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。原创 2024-06-20 06:17:09 · 636 阅读 · 0 评论 -
[CSS]CSS3 框大小
CSS3box-sizing属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。原创 2024-06-19 06:04:58 · 838 阅读 · 0 评论 -
[CSS]CSS 分页实例
本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。原创 2024-06-19 06:04:24 · 778 阅读 · 0 评论 -
[CSS]CSS 按钮
章节我们为大家介绍使用 CSS 来制作按钮。原创 2024-06-19 06:03:49 · 579 阅读 · 0 评论 -
[CSS]CSS 图片
本章节将为大家介绍如何使用 CSS 来布局图片。原创 2024-06-18 05:14:53 · 708 阅读 · 0 评论 -
[CSS]CSS3 用户界面
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。CSS3中,resize属性指定一个元素是否应该由用户去调整大小。这个 div 在边框之外 15 像素处有一个轮廓。表格中的数字表示支持该属性的第一个浏览器版本号。原创 2024-06-18 05:14:18 · 452 阅读 · 0 评论 -
[CSS]CSS3 多列
CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例:菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。原创 2024-06-18 05:13:43 · 736 阅读 · 0 评论 -
[CSS]CSS3 动画
CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。您必须定义动画的名称和动画的持续时间。0% 是动画的开始,100% 是动画的完成。原创 2024-06-17 06:18:35 · 869 阅读 · 0 评论 -
[CSS]CSS3 过渡
CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。指定的CSS属性的值更改时效果会发生变化。如果未指定的期限,transition将没有任何效果,因为默认值是0。CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。表格中的数字表示支持该属性的第一个浏览器版本号。当鼠标光标移动到该元素时,它逐渐改变它原有样式。原创 2024-06-17 06:15:45 · 895 阅读 · 0 评论 -
[CSS]CSS3 3D 转换
* Safari 与 Chrome */ }-webkit-transform: rotateY(130deg);/* Safari 与 Chrome */ }紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。rotateX()方法,围绕其在一个给定度数X轴旋转的元素。rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。表格中的数字表示支持该属性的第一个浏览器版本号。原创 2024-06-17 06:14:04 · 674 阅读 · 0 评论 -
[CSS]CSS3 2D 转换
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。rotate()方法,在一个给定度数顺时针旋转的元素。scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。原创 2024-06-16 06:02:14 · 718 阅读 · 0 评论 -
[CSS]CSS3 文本效果
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影。CSS3 中,text-shadow属性适用于文本阴影。CSS3文本溢出属性指定应向用户如何显示溢出内容。CSS3中包含几个新的文本特征。原创 2024-06-16 05:59:31 · 650 阅读 · 0 评论 -
[CSS]CSS3 渐变(Gradients)
渐变效果CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐变(gradients):线性渐变相关属性:background-image。线性渐变在线工具:渐变在线工具。表中的数字指定了完全支持该属性的第一个浏览器版本。注意:IE8 及原创 2024-06-15 06:46:09 · 751 阅读 · 0 评论 -
[CSS]CSS3 背景
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。background-size指定背景图像的大小。content-box, padding-box,和 border-box区域内可以放置背景图像。不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。background-origin 属性指定了背景图像的位置区域。你指定的大小是相对于父元素的宽度和高度的百分比的大小。原创 2024-06-15 06:45:32 · 747 阅读 · 0 评论 -
[CSS]CSS3 圆角
如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。表格中的数字表示支持该属性的第一个浏览器的版本号。原创 2024-06-15 06:43:30 · 572 阅读 · 0 评论 -
[CSS]CSS3 边框
用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。border-image 属性允许你指定一个图片作为边框!在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在div中添加box-shadow属性。在 CSS3 中,很容易创建圆角。在 div 中使用图片创建边框。原创 2024-06-14 05:47:55 · 220 阅读 · 0 评论 -
[CSS]CSS !important 规则
CSS 中的!important 规则用于增加样式的权重。!important 与优先级无关,但它与最终的结果直接相关,使用一个!important 规则时,此声明将覆盖任何其他声明。原创 2024-06-14 05:47:04 · 141 阅读 · 0 评论 -
[CSS]CSS 网页布局
现在更高级的方式是使用 CSS Flexbox 来创建列的布局,但 Internet Explorer 10 及更早的版本不支持该方式, IE6-10 可以使用浮动方式。不相等的列一般是在中间部分设置内容区域,这块也是最大最主要的,左右两次侧可以作为一些导航等相关内容,这三列加起来的宽度是 100%。创建 4 列可以设置为 25%。底部区域在网页的最下方,一般包含版权信息和联系方式等。如果你想了解更多 @media 的规则可以查看。CSS Flexbox 的更多内容可以查看。原创 2024-06-14 05:45:10 · 223 阅读 · 0 评论 -
[CSS]CSS 计数器
CSS 计数器通过一个变量来设置,根据规则递增变量。原创 2024-06-13 06:24:29 · 269 阅读 · 0 评论 -
[CSS]CSS 表单
默认情况下,一些浏览器在输入框获取焦点时(点击输入框)会有一个蓝色轮廓。我们可以设置 input 样式为。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。属性来禁用文本框可以重置大小的功能(一般拖动右下角可以重置大小)。属性,该属性设置了输入框在获取焦点时会向右延展。属性可以修改 input 边框的大小或颜色,使用。如果你想在输入框中添加图标,可以使用。属性可以在输入框中添加内边距。如果你只想添加底部边框可以使用。属性来设置输入框的背景颜色,更多内容可以参考我们的。原创 2024-06-13 06:23:11 · 521 阅读 · 0 评论 -
[CSS]CSS 属性 选择器
IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。具有特定属性的HTML元素样式不仅仅是class和id。原创 2024-06-13 06:20:35 · 123 阅读 · 0 评论 -
[CSS]CSS 媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。原创 2024-06-12 06:02:09 · 232 阅读 · 0 评论 -
[CSS]CSS 图像拼合技术
我们想使用拼合图像 ("img_navsprites.gif"),以创建一个导航列表。因为这是一个单一的图像,而不是6个单独的图像文件,当用户停留在图像上不会有延迟加载。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。这是使用图像拼合最简单的方法,现在我们使用链接和悬停效果。有了CSS,我们可以只显示我们需要的图像的一部分。使用图像拼合会降低服务器的请求数量,并节省带宽。现在,我们希望我们的导航列表中添加一个悬停效果。图像拼合就是单个图像的集合。原创 2024-06-12 06:01:26 · 838 阅读 · 0 评论 -
[CSS]CSS 图像透明/不透明
使用CSS很容易创建透明的图像。CSS Opacity属性是W3C的CSS3建议的一部分。原创 2024-06-12 06:00:56 · 620 阅读 · 0 评论 -
[CSS]CSS 图片廊
【代码】[CSS]CSS 图片廊。原创 2024-06-11 06:02:41 · 121 阅读 · 0 评论 -
[CSS]CSS 提示工具(Tooltip)
本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。提示工具在鼠标移动到指定元素后触发,先看以下四个实例:头部显示右边显示底部显示左边显示。原创 2024-06-11 06:01:33 · 894 阅读 · 0 评论 -
[CSS]CSS 下拉菜单
元素。使用容器元素 (如: ) 来创建下拉菜单的内容,并放在任何你想放的位置上。下拉菜单菜鸟教程 1菜鸟教程 2菜鸟教程 3原创 2024-06-11 05:59:45 · 1106 阅读 · 0 评论 -
[CSS]CSS 导航栏
主页 新闻 联系 关于原创 2024-06-10 06:39:34 · 1102 阅读 · 0 评论 -
[CSS]CSS 伪元素
CSS 伪元素是用来添加一些选择器的特殊效果。原创 2024-06-10 06:39:03 · 539 阅读 · 0 评论 -
[CSS]CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。原创 2024-06-10 06:38:31 · 968 阅读 · 0 评论 -
[CSS]CSS 组合选择符
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素。后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。CSS组合选择符包括各种简单选择符的组合方式。后代选择器用于选取某元素的后代元素。原创 2024-06-09 06:13:35 · 253 阅读 · 0 评论 -
[CSS]CSS 布局 - 水平 & 垂直对齐
要水平居中对齐一个元素(如 ), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度,并将两边的空外边距平均分配:div 元素是居中的。原创 2024-06-09 06:12:58 · 693 阅读 · 0 评论 -
[CSS]CSS Float(浮动)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。原创 2024-06-09 06:11:51 · 269 阅读 · 0 评论 -
[CSS]CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。这里的文本内容是可以滚动的,滚动条方向是垂直方向。这里的文本内容是可以滚动的,滚动条方向是垂直方向。这里的文本内容是可以滚动的,滚动条方向是垂直方向。这里的文本内容是可以滚动的,滚动条方向是垂直方向。这里的文本内容是可以滚动的,滚动条方向是垂直方向。这里的文本内容是可以滚动的,滚动条方向是垂直方向。原创 2024-06-08 06:12:08 · 350 阅读 · 0 评论 -
[CSS]CSS Position(定位)
position 属性指定了元素的定位类型。元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非事先设定position属性。他们也有不同的工作方式,这取决于定位方法。原创 2024-06-08 06:11:19 · 691 阅读 · 0 评论