CSS - 教程之家

97浏览

0评论

css position fixed 左右双定位的实现代码

CSS Position(定位)
position 属性指定了元素的定位类型。position 属性的五个值： static relative fixed absolute sticky元素可以使用的顶部，底部，左侧和右侧...

2021-04-29

108浏览

0评论

CSS完成视差滚动效果

一、是什么视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验我们可以把网页解刨成：背景层、内容层、悬浮层当滚动鼠标滑轮...

2021-04-28

94浏览

0评论

CSS3实现的侧滑菜单

实现效果：实现代码：<!DOCTYPE html><html class="menu"><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content=="IE=edge"/><meta name="google"...

2021-04-28

137浏览

0评论

css如何设置字体平滑

在围观Drupal官方主题的时候，发现了一个有意思的非标准CSS选择器-webkit-font-smoothing，于是上手把玩了一番。如何使用css3字体平滑显示呢要知道，W3C对CSS中字体的抗锯齿渲染...

2021-04-26

127浏览

0评论

css如何设置不规则阴影

项目中用到不规则图片做背景，需要用到阴影效果，如图：如果用阴影box-shadow会出现凹陷的半圆在白色背景显示不出来。
可以使用css 实现阴影效果，解决需求。filter: drop-shadow(0...

2021-04-26

109浏览

0评论

css3新增的伪类有哪些

css3新增的一些伪类： :first-of-type :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。 :last-of-type :last-of-type 选择器匹配属于其父元素的...

2021-04-26

343浏览

0评论

css怎么设置a标签颜色

css设置a标签颜色方法1：使用color属性设置文本颜色Color属性指定文本的颜色。示例：<a href="#">a标签元素</a>默认文本颜色为：使用Color属性a{color: red;}效果图：方法2：使用back...

2021-04-26

173浏览

0评论

css背景图片怎么设置透明度渐变

css背景图片设置透明度渐变在css中，可以利用linear-gradient()和rgba()函数实现图片的透明度渐变<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片透明度...

2021-04-26

91浏览

0评论

CSS 还能这样玩？奇思妙想渐变的艺术

在之前的这篇文章 -- 一行 CSS 代码的魅力中，我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙（也许奇怪更合适）的背景。本文，将继续介绍背景的一些有意思的知识，利用一些...

2021-04-26

79浏览

0评论

用CSS3画一个爱心

实现效果需求/功能:
怎么用CSS+HTMl绘画出一个爱心.分析:
爱心可以通过一个正方形+两个圆形组合成.
先画一个正方形+圆形, 摆放位置如下:再添加上一个圆形.最后再将整个图形...

2021-04-26

121浏览

0评论

CSS3实现的3D隧道效果

实现的效果实现代码html<div class="scene"> <div class="wrapper"> <ul class="tunnel"> <li class="ring"></li> <li class="ring"></li> <li class="...

2021-04-26

128浏览

0评论

css如何让a标签不可点击

css中a标签没有disabled属性，如果想要使a标签不可用，则必须单独设置a标签的样式使它为不可用。1、设置颜色为灰色2、停用事件响应3、设置鼠标样式为默认样式 - 选择用的箭头样...

2021-04-26

90浏览

0评论

css中before的用法是什么

定义和用法:before 选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容。实例：<!DOCTYPE html><html><head><style>p:before{content:"台词：";backg...

2021-04-25

70浏览

0评论

css如何让div隐藏

在我们平时布局网站的时候，想要把p进行隐藏，但是很多人不知道css控制p显示隐藏？下面我们来讲解一下css如何让p隐藏。1、使用display:none来隐藏div我们可以使用display:none属...

2021-04-25

99浏览

0评论

css如何让图片旋转

我们可以给img图片添加了transform和animation样式属性来实现图片旋转效果。示例：HTML代码：<div class="demo"> <img class="an img" src="/test/img/2.png" width="500" h...

2021-04-25

91浏览

0评论

css中怎么设置字体颜色

css里面怎么设置字体颜色？在html中我们经常要用到css样式来美化html标签的一些不足之处，今天我们就来说说如何用css的基本样式来改变文本的颜色，文章通俗易懂，希望大家看完后能...

2021-04-25

90浏览

0评论

Css预编语言及区别详解

一、是什么Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程...

2021-04-25

106浏览

0评论

css3 实现文字闪烁效果的三种方式示例代码

1.通过改变透明度来实现文字的渐变闪烁，效果图：<!DOCTYPE html><html><head></head><title>文字闪烁</title><body><div class="blink">星星之火可以燎原</div></body><style>...

2021-04-25

196浏览

0评论

css如何进行单行注释

习惯性的用//在CSS文件中对单行进行注释。结果在IE中，认为这行定义仍然是有效的，而在chrome、firefox、safari却认为这一行已经被注释掉。正确的注释是使用/* XXXXX *//*设置S...

2021-04-23

138浏览

0评论

css如何去掉图片边框

css如何去掉img边框<img> 标签的 border 属性规定图像周围的边框的宽度，就是说可以增加或去掉图像的边框。也可以使用css中的border属性来设置。border="0" // html属性bord...

2021-04-23

248浏览

0评论

如何去掉css字体的上下空白

新建一个html文件，命名为test.html，用于讲解css字体的上下空白如何去掉。在test.html文件内，使用p标签创建三个单独段落。<!DOCTYPE html><html><head lang="en"> <meta cha...

2021-04-23

89浏览

0评论

css如何实现li不换行显示

方法一：display方法，需要将li转换成行内标签或者行内块标签<html><head> <style type="text/css"> li { display: inline; <-- 或者inline-block --...

2021-04-23

130浏览

0评论

css如何让隐藏的元素显示出来

新建一个html文件，命名为test.html，用于讲解CSS隐藏的元素如何显示出来。在test.html文件内，使用p标签创建两行文字用于测试。在test.html文件内，给第一个p标签添加一个class属...

2021-04-23

243浏览

0评论

css文本框如何去掉边框

css可以用border属性去除文本框的边框。新建html文档，在body标签中添加一些input标签，这时默认情况下浏览器中的文本框有1px的边框：在head标签中添加style标签，设置input的样式，...

2021-04-23

97浏览

0评论

详解纯CSS实现文字渐变色的两种方式

说明这次的重点就在于两个属性， background 属性 mask 属性这两个属性分别是两种实现方式的关键。方式一效果图代码<!DOCTYPE html><html><head> <meta charset="utf-8"...

2021-04-23

167浏览

0评论

position:sticky 粘性定位的几种巧妙应用详解

背景：position: sticky 又称为粘性定位，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素根据正常文档流进行定位，然后相对它的最...

2021-04-23

198浏览

0评论

用position:sticky完美解决小程序吸顶问题的实现方法

最近一个项目甲方一定要两个tab菜单吸顶，在网上找了好久没找到满意的，然后在一个博客中发现可以用position:sticky解决，因为之前没见过这个属性，然后搜了下，了解了用法，写了个小d...

2021-04-23

170浏览

0评论

css中怎么把图片设置居右

新建一个html文件，命名为test.html，用于讲解css如何让div中的图片居右对齐。在test.html文件内，使用div标签创建一个模块，设置div标签的class属性为mycss。在div内，使用img标签创...

2021-04-23

166浏览

0评论

css怎么改变png图片的颜色

在CSS中可以使用Filter属性，利用滤镜功能来换图片的颜色；CSS的Filter属性主要用于设置图像的视觉效果。filter属性定义了元素(通常是<img>)的可视效果，此属性主要用于图像内容...

2021-04-23

66浏览

0评论

CSS怎么设置table样式

表格是个很重要的东西，让我们来美化一下吧!table{ width:290px;height:300px; border:1px solid black;/*设置边框粗细，实线，颜色*/ text-align:center;/*文本居中*/ backgroun...

2021-04-23

76浏览

0评论

如何使用纯CSS、JS实现图片轮播效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <style> .carousel { width: 648px; height: 400px; margin: 0 auto; ...

2021-04-23

130浏览

0评论

css怎么设置首行缩进2字符

关于首行缩进举例如下（根据你页面中字体的大小，如页面中字体是12px，缩进2个字符就是24px）：方法1： h2{text-indent:24px;}方法2：h2｛padding-left:24px;｝建议使用规范的首行缩进属性tex...

2021-04-23

106浏览

0评论

css 的位置怎么设置

css可以使用position属性来设置元素显示位置，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型...

2021-04-23

115浏览

0评论

css中如何让div居中

XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。下面我们来看几种css设置div居中的方法。方法一：对div使用绝对布局position:absolute;并设置t...

2021-04-23

178浏览

0评论

css怎么实现禁止拖动

CSS 禁止拖动选中要想通过CSS禁用页面内容选中和复制操作，只需在body的样式中，增加如下代码：# 禁止拖拽-webkit-user-drag: none;# 禁止选中-webkit-user-select: none;...

2021-04-23

76浏览

0评论

css怎么设置图片拉伸

打开vscode，创建一个html页面，用于演示css如何根据分辨率拉伸图片的设置。如果您没有vscode，使用其他html编辑器，甚至是文本文件都可以，只需要注意文件的后缀必须是.html在测试页...

2021-04-23

128浏览

0评论

用CSS实现图片的3D凹凸感(凸出镜框外或凹陷镜框里)

Ⅰ、问题描述：使用css实现图片的3D凹凸感；Ⅱ实现过程如下：1、展示结果为：
A、正常的图片(图一、图二都正常)：B、图一凸出镜框外，图二正常；
触发过程：将鼠标放在图一的红色边框内，就会...

2021-04-23

113浏览

0评论

CSS3 实现的动态星空背景

实现效果：实现代码html<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'><div id='stars'></div><div id='stars...

2021-04-23

93浏览

0评论

六种css3实现的边框过渡效果

六种效果实现代码html<h1>CSS Border Transitions</h1><section class="buttons"> <button class="draw">Draw</button> <button class="draw meet">Draw Meet</button>...

2021-04-23

153浏览

0评论

css怎么让盒子并排显示

我们先设置3个div盒子对象，什么css样式都不设置看看效果。代码如下：<body> <div>第一个盒子</div> <div>第二个盒子</div> <div>第三个盒子</div></body>div盒子本身...

2021-04-22

97浏览

0评论

css如何去隐藏滚动条

可以使用自定义滚动条的伪对象选择器::-webkit-scrollbar设置隐藏滚动条。使用此伪类选择器隐藏滚动条css代码：.element::-webkit-scrollbar {display:none}如果要兼容 PC 其...

2021-04-22

146浏览

0评论

css如何实现元素不随滚动条滚动

在CSS中，可以使用固定定位（position:fixed;）来固定元素的位置，让元素不随滚动条滚动。fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相...

2021-04-22

203浏览

0评论

css如何实现点击改变颜色

可通过使用css伪类实现点击元素变色的效果，两个伪类是:active, :focus1、:active：用于选择活动链接。当在一个链接上点击时，它就会成为活动的（激活的），:active选择器适用于所有元...

2021-04-22

110浏览

0评论

css如何实现下拉菜单

HTML 部分：我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 <div...

2021-04-22

124浏览

0评论

详解使用纯CSS实现滚动进度条效果的几种技巧

本篇文章给大家介绍介绍一下几种不可思议的纯 CSS 滚动进度条效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。问题先行，如何使用 CSS 实现下述滚动条效...

2021-04-22

91浏览

0评论

css怎么显示svg图片

SVG 文件可通过以下标签嵌入 HTML 文档，显示出来：<embed>、<object> 或者 <iframe>详解：1、使用 <embed> 标签<embed src="circle1.svg" type="image/svg+xml" />2、使用 <obje...

2021-04-22

139浏览

0评论

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

在很久之前的一篇文章，有讲到 -webkit-box-reflect 这个属性 -- 从倒影说起，谈谈 CSS 继承 inherit-webkit-box-reflect 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反...

2021-04-21

91浏览

0评论

CSS3 实现NES游戏机的示例代码

实现效果实现代码html<input type="radio" name="nes-size" id="size1"><label for="size1" class="size1" ></label><input type="radio" name="nes-size" id="size2"><...

2021-04-21

122浏览

0评论

基于CSS3画一个iPhone

实现效果：实现代码html<div class='iphone'> <div class='steel_band'> <div class='mute_rocker'></div> <div class='volume up'></div> <div class='volume dow...

2021-04-21

101浏览

0评论

css如何设置浮动

在css中可以通过float属性来设置浮动。float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS 中，任何元素都可以浮动。浮动元素会生成...

2021-04-21

热门文章