CSS共27篇
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
ul中,如何让6个li,分成两列?-红穆笔记

ul中,如何让6个li,分成两列?

在HTML和CSS中,有多种方式可以实现将<ul>中的6个<li>元素分成两列显示。下面介绍几种常见的方法:方法1:使用CSS Flexbox你可以将<ul>设置为一个flex容器,然后通过设置flex...
红穆的头像-红穆笔记钻石会员红穆3个月前
1716
li标签下有一个a标签,鼠标放在li标签上,如何让a标签变色-红穆笔记

li标签下有一个a标签,鼠标放在li标签上,如何让a标签变色

要实现当鼠标放在 li 标签上时让内部的 a 标签变色,你可以使用 CSS 的 :hover 选择器结合后代选择器。下面是一个简单的示例:假设你的 HTML 结构如下:<ul> <li><a href='#'>...
红穆的头像-红穆笔记钻石会员红穆5个月前
07013
HTML+CSS+Swiper 实现网易云手机端三列左右滑动思路-红穆笔记

HTML+CSS+Swiper 实现网易云手机端三列左右滑动思路

先利用Swiper 来实现左右滑动!再用HTML+css实现文字图片布局显示!代码: 
红穆的头像-红穆笔记钻石会员红穆10个月前
0926
html css 标题显示一行 超出部分隐藏-红穆笔记

html css 标题显示一行 超出部分隐藏

要实现在HTML中使标题显示一行,并隐藏超出部分,可以使用CSS样式来控制元素的显示方式。下面是一种常用的方法:HTML代码:<div class='title'> <h1>这是一个非常非常长的标题,需...
红穆的头像-红穆笔记钻石会员红穆1年前
0786
在判断p标签下存在img标签的情况下才使img标签居中-红穆笔记

在判断p标签下存在img标签的情况下才使img标签居中

可以使用以下CSS代码来在存在<img>标签时将其居中:p img { display: block; /* 将<img>标签设置为块级元素 */ margin: 0 auto; /* 设置左右外边距为自动,即水平居中 */ }这将使&l...
红穆的头像-红穆笔记钻石会员红穆1年前
08211
css绝对定位居中-红穆笔记

css绝对定位居中

css绝对定位居中的实现方法有很多,下面将给大家介绍css绝对定位居中的四种方法。 1、兼容性不错的主流css绝对定位居中的用法: .conter{ width:600px;height:400px; position:absolute;left:50...
红穆的头像-红穆笔记钻石会员红穆1年前
02907
css 鼠标悬停 出现菜单-红穆笔记

css 鼠标悬停 出现菜单

当用户将鼠标悬停在图像上时显示菜单叠加。 使用 a 包装元素和将包含菜单链接的元素。 <figure> <img> <div>使用 and 属性在悬停时对图像进行动画处理,从而创建滑动效果。 o...
红穆的头像-红穆笔记钻石会员红穆2年前
02165
css 鼠标悬停时显示图像叠加效果-红穆笔记

css 鼠标悬停时显示图像叠加效果

悬停时显示图像叠加效果。 分别将 和 伪元素用于叠加层的顶部和底部栏。设置它们的,并产生所需的效果。 :before:afteropacitytransformtransition将 用于叠加的文本。设置 ,并将文本居中到图...
红穆的头像-红穆笔记钻石会员红穆2年前
01147
css 创建悬停时旋转的双面卡-红穆笔记

css 创建悬停时旋转的双面卡

创建悬停时旋转的双面卡。 将卡的 设置为无。 backface-visibility最初,将卡的背面设置为 ,将正面设置为 。 rotateY()-180deg0deg悬停后,将正面设置为 和 背面 。 rotateY()180deg0deg设置适...
红穆的头像-红穆笔记钻石会员红穆2年前
08315
css 汉堡包按钮-红穆笔记

css 汉堡包按钮

显示一个汉堡菜单,该菜单在悬停时转换为十字按钮。 使用包含顶部、底部和中间条形的容器。 .hamburger-menudiv将容器设置为 with 。 display: flexflex-flow: column wrap使用 添加条形图之间...
红穆的头像-红穆笔记钻石会员红穆2年前
07213
css 兄弟姐妹褪色-红穆笔记

css 兄弟姐妹褪色

淡出悬停项的同级。 使用 a 对 所做的更改进行动画处理。 transitionopacity使用 和 伪类选择器更改除鼠标所在的元素之外的所有元素。 :hover:notopacity0.5 <div class="sibling-fade&...
红穆的头像-红穆笔记钻石会员红穆2年前
01545
animate.css – 齐全的CSS3动画库-红穆笔记

animate.css – 齐全的CSS3动画库

简介animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多...
红穆的头像-红穆笔记钻石会员红穆2年前
01125