技术文章库 - 编程教程与技术分享平台
使用 CSS3 截断溢出文本
要截断溢出文本，请使用word-wrap属性并将其设置为"break-word"。以下代码展示了如何使用CSS3截断溢出文本−示例<!DOCTYPEhtml><html><head><style>div{font-family:"SegoeUI",Tahoma,Geneva,Verdana,
鼠标悬停时更改图像不透明度
使用opacity属性和:hover选择器来更改鼠标悬停时的不透明度。以下代码用于更改鼠标悬停时图像的不透明度−示例<!DOCTYPEhtml><html><head><style>body{font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-seri
如何使用 CSS 在悬停时显示元素?
要使用CSS在悬停时显示元素，代码如下:−示例<!DOCTYPEhtml><html><head><style>body{margin:20px;padding:20px;font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;
CSS3 使用 Box-Sizing 属性调整框的宽度
使用box-sizing属性不仅可以更改元素的宽度，还可以更改高度。以下是使用CSS3使用box-sizing属性调整框宽度的代码−示例<!DOCTYPEhtml><html><head><style>body{font-family:"SegoeUI",Tahoma,Geneva,Ver
如何使用 CSS 创建工具提示?
使用CSS创建工具提示，代码如下−示例<!DOCTYPEhtml><html><style>body{text-align:center;font-family:"SegoeUI",Tahoma,Geneva,Verdana,sans-serif;}.tooltip{positio
如何创建 CSS3 关键帧动画?
要在CSS3中创建关键帧动画，请定义单个关键帧。关键帧将控制CSS3中的中间动画步骤。以下是使用CSS3创建关键帧动画的步骤−示例<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background:rgb(218,78,36);
使用 CSS3 在透明框中设置文本
使用CSS3在透明框中设置文本，代码如下−示例<!DOCTYPEhtml><html><head><style>body{font-family:"SegoeUI",Tahoma,Geneva,Verdana,sans-serif;}.transparentBox{background:u
如何使用 CSS 创建技能栏?
使用CSS创建技能栏，代码如下−示例<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"/><style>*{box-sizing:
如何使用 CSS 和 JavaScript 创建滚动指示器?
要使用CSS和JavaScript创建滚动指示器，代码如下−示例<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"><style>body
使用 CSS 构建工具提示
工具提示用于设置额外的信息。当访问者将鼠标指针移动到元素上时，它会在网页上显示。以下是使用CSS构建工具提示的代码−示例<!DOCTYPEhtml><html><style>body{font-family:"SegoeUI",Tahoma,Geneva,Verdana,sans-serif;text-a
使用 Flexbox 进行高级 CSS 布局
CSS3提供了一种布局模式:FlexibleBox，通常简称为Flexbox。Flexbox(弹性盒子)是CSS3的一种布局模式。使用此模式，您可以轻松创建复杂应用程序和网页的布局。它包含容器、弹性项目等。容器具有以下属性−flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content以下是使用
如何使用 CSS 创建响应式"时间轴"?
使用CSS创建响应式时间轴，代码如下−示例<!DOCTYPEhtml><html><head><metaname="viewport"event="width=device-width,initial-scale=1.0"><style>*{box-sizing:
CSS 在表单的输入元素内放置图标
为了演示如何使用CSS在表单的输入元素内放置图标，代码如下−示例<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawe
如何使用 CSS 和 JavaScript 创建删除确认模式?
要使用CSS和JavaScript创建删除确认模式，代码如下−示例<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"/><style>b
如何使用 CSS 和 JavaScript 创建模态框?
使用CSS和JavaScript创建模态框，代码如下−示例<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"/><style>body
使用 CSS 设置跨浏览器不透明度
属性opacity是现代解决方案，适用于Firefox0.9+、Safari2、Opera9+、IE9+以及所有版本的Chrome。-moz-opacity属性适用于Firefox0.9之前的版本，而–khtml-opacity属性适用于从1开始的Safari版本。filter属性适用于IE5到9的浏览器，可实现类似不透明度的效果。将所
如何使用 CSS 创建全屏视频背景?
使用CSS创建全屏视频背景，代码如下−示例<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"/><style>*{box-sizin
CSS 特异性
特异性使我们能够比较属于同一元素的两个或多个相互冲突的CSS规则，并根据浏览器规则确定哪个规则更具体。特异性的顺序如下:−示例idselectors(#first)>classselectors(.sample),pseudoclass(:active)andattributeselectors([type=”text”])>
如何使用 CSS 创建比较表?
使用CSS创建响应式表格，代码如下−示例<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"><style>table{border-c
如何使用 CSS 创建响应式表格?
使用CSS创建响应式表格，代码如下−示例<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"><style>body{font-famil
