1. 首页
  2. 作者
  3. System
CSS 实现伸缩导航仪表板侧边栏菜单
System
2024-08-08
所有,css

以下是一个简化的代码实例，展示了如何使用CSS创建一个伸缩导航仪表板侧边栏菜单：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stretchy Navigation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
 
  .navigation {
    background-color: #333;
    overflow: hidden;
    height: 100%;
    width: 200px; /* Set the width of the sidebar */
    position: sticky; /* Stick the sidebar at the top of the user's screen when scrolling */
    top: 0;
    transition: width 0.5s; /* Add a transition effect when menu is toggled */
  }
 
  .navigation .menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
 
  .navigation .menu li {
    padding: 8px 16px;
    text-align: left;
    display: block;
  }
 
  .navigation .menu li:hover {
    background-color: #555;
    color: white;
  }
 
  .navigation .banner {
    color: white;
    padding: 16px;
    background-color: #4CAF50;
    text-align: center;
  }
 
  /* When the screen is less than 600px wide, hide all list items, except for the first one ("Home"). Show the list item that contains the "toggle" button */
  @media screen and (max-width: 600px) {
    .navigation .menu li {
      display: none;
    }
    .navigation .menu li.active {
      display: block;
    }
  }
 
  /* When the list item is clicked, add the "active" class to it and slide the navigation bar */
  .navigation .menu li.active .icon {
    visibility: hidden;
  }
 
  .navigation.toggled {
    width: 80px; /* Set the collapsed width of the sidebar */
  }
 
  .navigation.toggled .menu li {
    display: block;
  }
</style>
</head>
<body>
 
<div class="navigation">
  <div class="banner">Logo</div>
  <ul class="menu">
    <li class="active"><a href="#home" class="icon-home">Home</a></li>
    <li><a href="#news" class="icon-news">News</a></li>
    <li><a href="#contact" class="icon-contact">Contact</a></li>
    <li><a href="#about" class="icon-about">About</a></li>
    <li class="toggle">
      <a href="#" onclick="toggleMenu();">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </li>
  </ul>
</div>
 
<script>
  function toggleMenu() {
    var navigation = document.querySelector('.navigation');
    navigation.classList.toggle('toggled');
  }
</script>
 
</bod
- 阅读更多 -
【前端技术】HTML与CSS案例分析：探索网页设计的无限可能
System
2024-08-08
所有,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>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 10px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group input[type="password"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-group input[type="submit"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #5cb85c;
            color: white;
            cursor: pointer;
        }
        .form-group input[type="submit"]:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
    <form>
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="email">电子邮件:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
            <input type="submit" value="更新个人资料">
        </div>
    </form>
</body>
</html>

这个代码示例展示了如何使用HTML和内联CSS创建一个简单的用户资料编辑表单。表单包含用户名、电子邮件和密码字段，并且每个字段都有适当的标签和样式。同时，它演示了如何使用类选择器来为不同类型的输入框设置统一的样式，以及如何使用伪类来为按钮设置鼠标悬停效果。这个示例教学了如何结合HTML和CSS来创建一个有专业感的网页。

- 阅读更多 -
SCSS基本使用：解锁CSS预处理器的高效与优雅
System
2024-08-08
所有,css



// 引入其他SCSS文件
@import "./_variables.scss";
 
// 使用变量
body {
  background-color: $background-color;
}
 
// 嵌套规则
ul {
  margin: 0;
  padding: 0;
  list-style: none;
 
  li {
    position: relative;
    margin-bottom: 10px;
 
    &:last-child {
      margin-bottom: 0;
    }
  }
}
 
// 混合(mixin)
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}
 
.some-element {
  @include clearfix;
}
 
// 函数的使用
.border-radius {
  border-radius: round(10px / 2);
}

这个SCSS代码示例展示了如何使用SCSS的变量、嵌套规则、混合(mixin)和内置函数来提高CSS编写效率和代码质量。通过预处理器，我们可以更方便地组织和管理样式代码，减少冗余，并提升可维护性。

- 阅读更多 -
TailwindCSS 如何配置默认单位为px
System
2024-08-08
所有,css

在Tailwind CSS中，默认的尺寸单位是rem，但你可以通过配置Tailwind CSS的配置文件来改变默认单位。

首先，确保你有一个tailwind.config.js文件在你的项目根目录中。如果没有，你可以通过运行npx tailwindcss init来创建这个文件。

然后，在tailwind.config.js文件中，你可以使用theme对象的spacing键来指定单位。例如，如果你想要将所有间距单位改为px，你可以这样做：




// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        1: '4px',
        2: '8px',
        3: '12px',
        4: '16px',
        5: '20px',
        6: '24px',
        7: '28px',
        8: '32px',
        9: '36px',
      },
    },
  },
  // 其他配置...
};

请注意，这将改变所有间距（包括padding、margin等）的默认单位。如果你只想改变默认字体大小单位，可以使用fontSize键：




// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'xs': ['10px', '12px'],
        'sm': ['12px', '14px'],
        'base': ['14px', '16px'],
        'lg': ['16px', '18px'],
        'xl': ['18px', '20px'],
        // 更多尺寸...
      },
    },
  },
  // 其他配置...
};

这样配置后，Tailwind CSS将使用px作为默认字体大小单位。

- 阅读更多 -
CSS八种让人眼前一亮的HOVER效果
System
2024-08-08
所有,css

CSS中的hover效果可以通过改变元素的颜色、大小、位置或其他视觉属性来实现。以下是八种简单而引人注意的hover效果的示例代码：

  1. 改变颜色：



.element:hover {
  color: #ff0000; /* 红色 */
}
  1. 放大：



.element:hover {
  transform: scale(1.1);
}
  1. 阴影增加：



.element:hover {
  box-shadow: 0 0 10px #ff0000; /* 红色阴影 */
}
  1. 文字弯曲：



.element:hover {
  transform: skew(30deg);
}
  1. 图片亮度调整：



.element:hover img {
  filter: brightness(80%);
}
  1. 旋转：



.element:hover {
  transform: rotate(45deg);
}
  1. 渐变色背景：



.element:hover {
  background: linear-gradient(to right, #ff0000, #00ff00);
}
  1. 边框大小变化：



.element:hover {
  border: 5px solid #ff0000;
}

将这些效果应用到你的HTML元素上，并根据需要调整颜色和值以适应你的设计。

- 阅读更多 -
写一个简单的 CSS 动画
System
2024-08-08
所有,css

以下是一个简单的 CSS 动画示例，它会使一个元素在页面上移动：




/* 首先定义一个关键帧动画 */
@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
 
/* 接着应用动画到一个元素上 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  /* 使用动画名称和持续时间 */
  animation: moveRight 2s infinite;
}



<!-- HTML 结构 -->
<div class="box"></div>

这段代码定义了一个名为 moveRight 的关键帧动画，它将元素从原始位置向右移动 100px。然后，.box 类应用了这个动画，使得类 box 的所有元素都会无限循环地执行这个动画。

- 阅读更多 -
创造视觉奇迹：WebKit的CSS内容生成特性解析
System
2024-08-08
所有,css



/* 使用CSS内容生成技术创造视觉奇迹 */
.icon-star::before {
  content: url("../img/star.png"); /* 使用图片作为图标 */
  position: absolute;
  left: -20px; /* 将图标定位到文本之前 */
  top: 5px;
}
 
.icon-heart::before {
  content: url("../img/heart.png");
  position: absolute;
  left: -20px;
  top: 5px;
  color: red; /* 更改图标颜色 */
}
 
.icon-moon::before {
  content: url("../img/moon.png");
  position: absolute;
  left: -20px;
  top: 5px;
  animation: rotate 2s infinite linear; /* 应用旋转动画 */
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这个例子展示了如何使用CSS内容生成技术来插入图片作为图标，并通过CSS动画实现旋转效果。这里的.icon-star, .icon-heart, 和 .icon-moon 类分别表示不同的图标样式，并通过伪元素 ::before 来插入对应的图标。图标可以通过URL引用外部图片文件，并利用CSS动画进行旋转等效果的应用。这种方法提供了一种简单高效的图标解决方案，并且易于扩展和维护。

- 阅读更多 -
uni-app配置tailwindcss
System
2024-08-08
所有,css

要在uni-app项目中配置Tailwind CSS，你需要按照以下步骤操作：

  1. 安装PostCSS和postcss-loader：



npm install postcss postcss-loader autoprefixer --save-dev
  1. 安装Tailwind CSS：



npm install tailwindcss --save-dev
  1. 在项目根目录创建postcss.config.js文件，并配置Tailwind CSS：



module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}
  1. 创建tailwind.config.js文件，并配置Tailwind CSS：



// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
  1. 在tailwind.config.js中配置purge选项，以仅包含你项目中实际使用的Tailwind类。
  2. 在<head>标签中的index.html或相应页面添加Tailwind CSS link标签：



<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  1. 在你的组件或页面的<style>标签中使用Tailwind CSS类：



<template>
  <view class="bg-white text-gray-700">Hello Tailwind!</view>
</template>

请注意，由于uni-app的编译方式，这个配置可能需要额外的工具或者适配，以确保在不同平台（如小程序）的兼容性。如果你遇到任何特定的平台问题，请查看官方文档或相关社区获取帮助。

- 阅读更多 -
用CSS代码写出的各种形状图形的方法，0基础学前端开发
System
2024-08-08
所有,css

在CSS中，我们可以使用不同的属性来绘制各种形状。以下是一些常用的方法：

  1. 使用border属性创建三角形：



.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
  1. 使用border-radius属性创建圆形：



.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}
  1. 使用transform: rotate()方法创建平行四边形：



.parallelogram {
  width: 150px;
  height: 100px;
  background-color: red;
  transform: skew(20deg);
}
  1. 使用linear-gradient创建彩色的图形：



.colorful-shape {
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, red, blue);
}
  1. 使用clip-path属性创建多边形：



.polygon {
  width: 150px;
  height: 150px;
  background-color: red;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
  1. 使用before或after伪元素和border-radius创建心形：



.heart {
  width: 100px;
  height: 100px;
  position: relative;
}
 
.heart:before,
.heart:after {
  content: "";
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  position: absolute;
  top: 0;
  left: 50px;
}
 
.heart:before {
  transform: rotate(-45deg);
}
 
.heart:after {
  transform: rotate(45deg);
}

这些方法可以创建各种形状，你可以根据自己的需求选择合适的方法。在实际开发中，你可以根据这些基本原理结合实际情况创建更复杂的形状。

- 阅读更多 -
前端 CSS 经典：水波进度样式
System
2024-08-08
所有,css

以下是一个简单的水波进度条样式示例，使用了CSS3动画来实现进度条的视觉效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水波进度条</title>
<style>
  .wave-progress {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
  }
 
  .wave-progress::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 50% 50%, transparent 50%, #3399ff 50%);
    background-repeat: no-repeat;
    background-size: 100% 100%, 200% 200%;
    animation: wave-animation 2s linear infinite;
  }
 
  @keyframes wave-animation {
    0% {
      transform: translateX(-100%);
      background-position: 0 0, 100% 100%;
    }
    100% {
      transform: translateX(100%);
      background-position: 0 0, 0 100%;
    }
  }
</style>
</head>
<body>
<div class="wave-progress"></div>
</body>
</html>

这段代码定义了一个.wave-progress类，它创建了一个带有圆形渐变的伪元素（::after），通过@keyframes定义的动画使得水波效果不断循环。这个示例提供了一个简单的水波进度条样式，可以根据实际需求进行样式定制和功能扩展。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号