标签 css 下的文章

2024-08-16

视口单位vh、vw、vmin和vmax使得我们能够创建响应式布局，它们分别代表了浏览器窗口的高度、宽度，以及最小和最大值。

vh（Viewport Height）：1vh等于视口高度的1%。
vw（Viewport Width）：1vw等于视口宽度的1%。
vmin（Viewport Min）：选取vh和vw中较小的值。
vmax（Viewport Max）：选取vh和vw中较大的值。

例如，如果你设置一个元素的高度为10vh，那么不论浏览器窗口的实际高度是多少，这个元素的高度将始终是窗口高度的10%。




/* 设置元素高度为视口高度的10% */
div {
  height: 10vh;
}
 
/* 设置元素宽度为视口宽度的10% */
div {
  width: 10vw;
}
 
/* 设置元素高度和宽度都是视口较小维度的50% */
div {
  height: 50vmin;
  width: 50vmin;
}
 
/* 设置元素高度和宽度都是视口较大维度的80% */
div {
  height: 80vmax;
  width: 80vmax;
}

使用视口单位可以创建布局，这些布局会根据用户调整浏览器窗口大小而自动适应。这在响应式设计中非常有用，可以提高用户体验。

- 阅读更多 -

总结css的知识点和css3的新特性

System

2024-08-16

所有,css3

CSS（级联样式表）是一种用来描述网页和用户界面样式的语言，主要用于设计网页的表现层。CSS3是CSS的一个版本，引入了许多新特性，如阴影、渐变、变换、动画等，以及选择器的增强和布局模块的增加。

CSS3的一些新特性：

选择器（Selector）：提供了更多选择器，如属性选择器、结构伪类选择器等。
阴影和图像效果（Shadow and Image Effects）：提供了box-shadow、text-shadow等属性，用于创建阴影和模糊效果。
边框和背景（Border and Background）：提供了圆角边框（border-radius）、渐变背景（gradient）等。
文字效果（Text Effects）：提供了文字阴影（text-shadow）、字体加载（@font-face）等。
2D/3D转换（Transform）：提供了transform属性，可以进行2D或3D转换。
动画（Animation）：提供了关键帧（@keyframes）和动画（animation）属性，可以创建复杂的动画效果。
多列布局（Multi-column Layout）：提供了多列布局的支持。
用户界面（User Interface）：提供了更多的UI特效，如滚动条样式（scrollbar）。

CSS3的新特性可以用来创建更加丰富和动态的网页设计。

示例代码：




/* 圆角边框 */
div {
  border-radius: 10px;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 阴影效果 */
div {
  box-shadow: 5px 5px 10px #888888;
}
 
/* 键帧动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 多列布局 */
div {
  column-count: 3;
}
 
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

以上代码展示了CSS3的几个常用特性：圆角边框、渐变背景、盒子阴影、关键帧动画、多列布局和自定义滚动条样式。这些都是CSS3提供的强大工具，可以用来增强网页的视觉效果。

- 阅读更多 -

css3把radio样式修改成checkbox样式

System

2024-08-16

所有,css3

要使用CSS3将radio按钮的默认样式修改为checkbox的样式，并允许用户选择多个选项，您可以通过隐藏原生的radio按钮，并使用label标签的:before伪元素来创建自定义的checkbox样式。以下是实现这一效果的示例代码：

HTML:




<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
 
<input type="radio" id="option2" name="options" value="2">
<label for="option2">Option 2</label>
 
<input type="radio" id="option3" name="options" value="3">
<label for="option3">Option 3</label>

CSS:




input[type="radio"] {
  display: none;
}
 
label {
  position: relative;
  cursor: pointer;
  margin-right: 15px;
}
 
label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  background-color: transparent;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
 
input[type="radio"]:checked + label:before {
  content: "✔";
  text-align: center;
  line-height: 15px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
}

在这个例子中，每个radio按钮被隐藏，并且与它的label关联。label的:before伪元素创建了一个自定义的checkbox样式。当radio按钮被选中时，:before伪元素会改变其内容，显示一个选中的标记，从而允许用户选择多个选项。

- 阅读更多 -

html css简单实现九宫格布局，自适应屏幕

System

2024-08-16

所有,css3

HTML 和 CSS 代码实现九宫格布局，并且能够自适应屏幕大小的示例如下：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格布局</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列布局 */
    grid-gap: 10px; /* 格子间隔 */
    padding: 10px; /* 容器内边距 */
  }
  .grid-item {
    background-color: #f0f0f0; /* 格子背景色 */
    border: 1px solid #ccc; /* 格子边框 */
    text-align: center; /* 文字居中 */
    padding: 20px 0; /* 格子内边距 */
  }
</style>
</head>
<body>
 
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
 
</body>
</html>

这段代码使用了CSS Grid布局来创建一个九宫格布局，其中.grid-container定义了一个三列的网格布局，.grid-item则表示每个网格的样式。这个布局能够适应不同的屏幕大小，网格项会自动填充可用空间。

- 阅读更多 -

js 关于如何动态设置css的hover样式最佳方式，设置hover样式

System

2024-08-16

所有,css3

在JavaScript中，你可以通过操作CSS类来动态设置元素的hover样式。首先，定义一个CSS类，其中包含hover状态的样式。然后，使用JavaScript来添加或移除这个类。

CSS:




.custom-hover:hover {
  background-color: yellow;
}

JavaScript:




// 假设你要为一个按钮添加hover效果
var button = document.getElementById('myButton');
 
// 添加hover类
button.classList.add('custom-hover');
 
// 移除hover类
// button.classList.remove('custom-hover');

HTML:




<button id="myButton">Hover over me!</button>

这样，当按钮处于hover状态时，会应用.custom-hover:hover定义的样式。如果你想动态地控制这个hover效果，你可以在JavaScript中根据条件添加或移除.custom-hover类。

- 阅读更多 -

CSS3进阶技巧：Flexbox布局实战与高级应用

System

2024-08-16

所有,css3




/* 设置一个容器使用Flexbox布局 */
.container {
  display: flex;
  flex-direction: row; /* 默认值，可以省略 */
  justify-content: space-around; /* 水平方向均匀分布子元素 */
  align-items: center; /* 垂直方向居中对齐子元素 */
  height: 100vh; /* 高度设置为视口高度 */
}
 
/* 子元素样式 */
.child {
  flex: 1; /* 子元素可伸缩，默认平分空间 */
  text-align: center; /* 文字居中对齐 */
  border: 1px solid #000; /* 边框，便于观察布局效果 */
  padding: 20px; /* 内边距 */
}
 
/* 特定子元素的样式 */
.child:nth-child(2) {
  order: 1; /* 调整子元素的排列顺序 */
  flex-grow: 2; /* 增长比例为其他子元素的两倍 */
}

这段代码展示了如何使用Flexbox布局来创建一个简单的布局，其中包含了Flexbox布局的基本和高级属性。通过.container类定义了一个Flexbox容器，并通过.child类定义了子元素的共有样式。通过:nth-child伪类选择器可以针对特定的子元素设置不同的样式，展示了如何调整元素的排列顺序和伸缩性。

- 阅读更多 -

详细介绍less（css预处理语言）

System

2024-08-16

所有,css3

LESS 是一种动态样式语言，它扩展了CSS的功能，添加了变量、函数、混合等特性，使CSS更易于维护和扩展。LESS 可以运行在 Node 或者浏览器端。

特性

变量：可以在 LESS 中使用变量(variables)，在一个地方定义，然后在整个样式表中使用。




@color: #4D926F;
header {
  color: @color;
}
nav {
  color: @color;
}

混合(Mixins)：可以定义一些class 作为可重用的样式块，然后在其他class中使用。




.rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
 
#header {
  .rounded-corners;
}
 
.button {
  .rounded-corners;
}

函数：LESS 提供了一些内置的函数，如 lighten(), darken(), and fade() 等。




@base: #f04646;
@width: 100px;
@height: 200px;
 
.box {
  background-color: @base;
  width: @width + 10;
  height: @height + 10;
}

嵌套规则：LESS 允许你写嵌套的 CSS 规则，可以使你的 CSS 更加的组织，和清晰。




#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        border-width: 1px;
      }
    }
  }
}

导入：可以导入其他的 LESS 文件。




// 导入其他less文件
@import "variables.less";
@import "mixins.less";

编译

LESS 文件在浏览器中直接使用时，需要将其转换为CSS。这个过程通常是手动完成的，但也可以使用工具自动完成。

在 Node.js 环境中，可以使用 npm 安装 less 包，并使用命令行工具将 LESS 文件编译为 CSS。




npm install -g less
lessc styles.less styles.css

在浏览器端，你可以使用 <link> 标签引入一个 .less 文件，但需要确保服务器能够正确处理 .less 文件，通常需要一个能够将 .less 文件转换为 .css 的服务器端程序。

- 阅读更多 -

使用CSS绘制几何图形（圆形、三角形、扇形、菱形等

System

2024-08-16

所有,css3

以下是使用CSS绘制几何图形的简单示例：

圆形:




.circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
}

三角形:




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #e74c3c;
}

扇形:




.sector {
  width: 100px;
  height: 50px;
  background-color: #f1c40f;
  border-radius: 0 100px 0 0;
}

菱形:




.diamond {
  width: 100px;
  height: 50px;
  background-color: #9b59b6;
  position: relative;
}
.diamond::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: inherit;
  transform: rotate(45deg);
}
.diamond::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: inherit;
  transform: rotate(-45deg);
}

这些CSS样式可以直接应用于HTML元素中，例如:




<div class="circle"></div>
<div class="triangle"></div>
<div class="sector"></div>
<div class="diamond"></div>

以上代码展示了几种常见的几何图形的创建方法，包括使用border-radius创建圆形和扇形，使用border创建三角形，以及使用::before和::after伪元素和transform属性创建菱形。

- 阅读更多 -

有趣的css —— li 标签的样式操作（含自定义）

System

2024-08-16

所有,css3

以下是一个简单的HTML和CSS示例，演示了如何为li标签添加自定义样式：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom List Item Style</title>
<style>
  ul.custom-list {
    list-style-type: none; /* 移除列表的标记（例如圆点） */
    padding-left: 0; /* 移除列表的内边距 */
  }
 
  ul.custom-list li {
    padding: 10px; /* 添加列表项的内边距 */
    margin-bottom: 5px; /* 添加列表项之间的间距 */
    background-color: #f0f0f0; /* 设置列表项的背景颜色 */
    border-radius: 5px; /* 添加圆角边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  }
 
  ul.custom-list li:hover {
    background-color: #e9e9e9; /* 鼠标悬停时改变背景颜色 */
  }
</style>
</head>
<body>
 
<ul class="custom-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>
 
</body>
</html>

这段代码演示了如何为ul元素添加一个自定义的class属性（这里是custom-list），然后在CSS中针对该类定义样式。同时，为li标签添加了自定义的内边距、背景颜色、圆角和阴影等样式，以及一个鼠标悬停效果。这样的实践可以帮助开发者学习如何对列表元素进行样式定制，从而创建更加个性化的网页布局。

- 阅读更多 -

CSS3 实现卡片翻牌效果

System

2024-08-16

所有,css3




/* 设置基础的卡片容器样式 */
.card-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}
 
/* 设置卡片样式 */
.card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
}
 
/* 设置卡片背面样式 */
.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 200px; /* 使文本垂直居中 */
}
 
/* 设置卡片正面样式 */
.card .front {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #bbada0;
  text-align: center;
  line-height: 200px; /* 使文本垂直居中 */
}
 
/* 当卡片容器被悬停时，卡片翻转180度 */
.card-container:hover .card {
  transform: rotateY(180deg);
}

这段代码展示了如何使用CSS3中的3D转换和悬停效果来创建卡片翻牌效果。.card-container 是卡片的外层容器，它定义了一个3D视图，并设置了一个视距，以便子元素可以进行3D转换。.card 是卡片本身，它使用 transform-style: preserve-3d; 来保持其子元素的3D位置，并且设置了一个过渡效果，以便在悬停时可以平滑地旋转。.back 和 .front 分别代表卡片的正反面，.back 使用 backface-visibility: hidden; 来在卡片翻转时隐藏背面内容，而 .front 则设置了背景颜色和文本对齐。最后，当 .card-container 被悬停时，卡片的 transform 属性被设置为旋转Y轴180度，从而显示出背面内容。

- 阅读更多 -