1. 首页
  2. 分类
  3. 前端技术
HTML+CSS实现漂亮的套餐价格表页面演示
System
2024-08-07
所有,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>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .pricing-table {
            text-align: center;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .plan {
            margin: 20px 0;
            padding: 10px 20px;
            position: relative;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .plan:before {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            height: 2px;
            background-color: #2ecc71;
        }
        .plan h3 {
            margin-top: 0;
            color: #2ecc71;
        }
        .plan .price {
            letter-spacing: 1px;
            color: #333;
            font-size: 24px;
            font-weight: bold;
        }
        .plan .price .period {
            font-size: 0.6em;
        }
        .plan ul {
            list-style: none;
            padding: 0;
        }
        .plan li {
            margin-bottom: 10px;
        }
        .plan .button {
            background-color: #2ecc71;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background-color 0.3s ease;
        }
        .plan .button:hover {
            background-color: #27ae60;
        }
    </style>
</head>
<body>
    <div class="pricing-table">
        <div class="plan">
            <h3>Basic Plan</h3>
            <div class="price">
                $9.99<span class="period">/month</span>
            </div>
            <ul>
                <li>10GB Storage</li>
                <li>10 Users</li>
                <li>10GB Download Speed</li>
            </ul>
            <button class="button">Sign Up</button>
        </di
- 阅读更多 -
实现 input框前有固定文字并且文字焦点向右对齐
System
2024-08-07
所有,css3

要实现在input框前有固定文字且文字焦点向右对齐，可以使用HTML和CSS来完成。你可以使用一个span标签来包裹固定文字，并将input放在span之后。然后使用CSS将input向右对齐。

以下是实现这个需求的示例代码：

HTML:




<label for="myInput">用户名:</label>
<span>用户名: </span><input type="text" id="myInput" />

CSS:




span {
  user-select: none; /* 防止用户选中文本 */
}
 
input {
  margin-left: 5px; /* 输入框距离左侧固定文字的距离 */
  vertical-align: middle; /* 垂直居中对齐 */
}

这段代码中，<label> 标签用于提供点击反馈，并将焦点移动到对应的输入框。<span> 包裹固定文字，并使用CSS样式防止用户选中文本。<input> 类型为text，并设置了左边距，以便当文字聚焦时，输入框的左边缘与固定文字的右边缘对齐。

- 阅读更多 -
关于margin-top失效的情况
System
2024-08-07
所有,css3

margin-top失效的情况通常发生在块级元素的直接子元素上，而该子元素又是一个块级元素，且父元素没有设置border, padding或overflow属性。

解释：

当父元素没有边框、内边距或者当overflow属性不是visible时，块级子元素的margin-top会看起来像是应用在了父元素上。这种现象被称为“margin collapse”。

解决方法：

  1. 给父元素设置边框：border: 1px solid transparent;。
  2. 给父元素设置内边距：padding: 1px;。
  3. 如果不希望使用上述方法，可以给父元素设置overflow: auto;或者overflow: hidden;。

示例代码：




/* 解决方法1：给父元素设置边框 */
.parent {
  border: 1px solid transparent;
}
 
/* 解决方法2：给父元素设置内边距 */
.parent {
  padding: 1px;
}
 
/* 解决方法3：给父元素设置overflow */
.parent {
  overflow: auto; /* 或者使用 'hidden' */
}
- 阅读更多 -
HTML网页端，跳动的爱心代码
System
2024-08-07
所有,css3

在HTML页面中创建一个跳动的爱心，可以使用HTML、CSS和JavaScript。以下是一个简单的示例：




<!DOCTYPE html>
<html>
<head>
<style>
  .heart {
    width: 100px;
    height: 100px;
    background: red;
    position: fixed;
    animation: jump 2s infinite;
  }
  @keyframes jump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.5); }
    100% { transform: scale(1); }
  }
</style>
</head>
<body>
 
<div class="heart"></div>
 
</body>
</html>

这段代码定义了一个心形的div，使用CSS的@keyframes规则创建了一个跳动的动画，通过改变transform: scale的值使心跳起来。animation属性设置了动画的持续时间和次数。

- 阅读更多 -
html + css 实现小球跳动动画
System
2024-08-07
所有,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>
  .ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: bounce 2s infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
  }
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>

这段代码使用了CSS的@keyframes规则创建了一个名为bounce的动画，该动画会使小球在垂直位置上跳动。.ball类使用了position: absolute来确保小球位于页面的左上角，并且animation属性应用了跳动动画，使小球不断地在原位置和向下30像素的位置跳动。这个示例展示了如何使用HTML和CSS创建简单的动画效果。

- 阅读更多 -
vue的启动 Unknown command: “dev“报错问题
System
2024-08-07
所有,css3

报错解释：

这个错误表明你尝试在Vue项目中运行一个名为“dev”的命令，但Vue CLI（命令行界面）无法识别这个命令。Vue CLI通常提供的命令有serve、build、inspect等，而不是dev。

解决方法：

确保你要运行的是正确的Vue CLI命令。通常，你可能想要运行npm run serve或yarn serve来启动一个本地开发服务器，或者npm run build或yarn build来构建你的应用以部署到生产环境。

  1. 检查package.json中的scripts部分，确认正确的命令。

  2. 如果你确实想要使用dev命令，你需要在package.json的scripts部分定义它，例如：

    


"scripts": {
  "dev": "vue-cli-service serve"
}
  3. 之后，你可以通过运行npm run dev或yarn dev来启动开发服务器。

如果你已经定义了正确的命令，但仍然遇到这个错误，尝试清除缓存并重新安装依赖：




rm -rf node_modules
rm package-lock.json yarn.lock # 如果你使用的是yarn
npm install # 或者 yarn

然后再次尝试运行正确的命令。

- 阅读更多 -
HTML5 满天繁星+流星划过动画效果（CSS 动画）
System
2024-08-07
所有,css



<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .stars {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            position: relative;
        }
        .stars-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateZ(0);
        }
        .star {
            position: absolute;
            top: 0;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 100%;
            opacity: 0.3;
            transform: translateZ(0);
            animation: twinkle 10s infinite alternate;
        }
        @keyframes twinkle {
            from { opacity: 0.3; }
            to { opacity: 0.8; }
        }
        .meteor {
            position: absolute;
            top: -100px;
            width: 2px;
            height: 100px;
            background: #fff;
            opacity: 0.5;
            transform: translateX(50%);
            animation: shoot 20s linear infinite;
        }
        @keyframes shoot {
            0% { top: -100px; opacity: 0.5; }
            20% { opacity: 0.8; }
            100% { top: 100%; opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="stars">
        <div class="stars-container">
            <!-- 生成随机的星星 -->
            <div class="star" style="left:100px;top:50px;"></div>
            <!-- 更多星星... -->
        </div>
        <!-- 流星 -->
        <div class="meteor"></div>
    </div>
    <script>
        const numStars = 1000; // 星星数量
        const starsContainer = document.querySelector('.stars-container');
 
        for (let i = 0; i < numStars; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            // 随机位置和大小
            star.style.left = Math.random() * 100 + '%';
            s
- 阅读更多 -
CSS3：创造引人注目的Web界面
System
2024-08-07
所有,css3



/* 设置HTML5页面的文档类型 */
html {
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
 
/* 移除默认边距 */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, figcaption, blockquote, dl, dt, dd {
    margin: 0;
    padding: 0;
}
 
/* 设置字体大小 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}
 
/* 使用Flexbox布局创建一个简洁的导航栏 */
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #333;
    color: #fff;
    padding: 0 20px;
}
 
/* 导航链接样式 */
.navigation a {
    color: #fff;
    text-decoration: none;
    padding: 0 10px;
}
 
/* 创建一个带有阴影的圆角边框的登录框 */
.login-box {
    width: 300px;
    padding: 40px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 100px auto;
}
 
/* 创建一个带有阴影的圆角按钮 */
.login-box button {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 为图片添加圆角和阴影效果 */
.img-rounded {
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 为图片添加圆形效果 */
.img-circle {
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 为图片添加阴影效果 */
.img-thumbnail {
    display: inline-block;
    height: auto;
    max-width: 100%;
    border: 2px solid transparent;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 创建一个带有阴影的圆角进度条 */
.progress-bar {
    background-color: #5cb85c;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
}
 
/* 创建一个带有阴影的圆角标签 */
.label-default {
    background-color: #777;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 创建一个带有阴影的圆角下拉菜单 */
.dropdown-menu {
    border-radius: 5px;
    box-shadow: 0 2px
- 阅读更多 -
【css】渐变-背景渐变、边框渐变、文字渐变
System
2024-08-07
所有,css3

背景渐变：




/* 线性渐变，从上到下 */
.background-gradient {
  background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
 
/* 径向渐变，从中心到边缘 */
.background-gradient {
  background: radial-gradient(circle, #ff99cc 0%, #33ccff 100%);
}

边框渐变：




/* 不同浏览器的前缀可能不一样，这里以webkit为例 */
.border-gradient {
  border: 2px solid #33ccff;
  border-image: -webkit-linear-gradient(to right, red, yellow, green);
  border-image: linear-gradient(to right, red, yellow, green);
}

文字渐变：




.text-gradient {
  background: -webkit-linear-gradient(45deg, #ff99cc, #33ccff);
  background: linear-gradient(45deg, #ff99cc, #33ccff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

以上代码实现了背景、边框和文字的渐变效果。注意，为了兼容不同浏览器，可能需要添加不同浏览器的前缀（如-webkit-）。

- 阅读更多 -
CSS——scss中动态引入背景图
System
2024-08-07
所有,css

在SCSS中，你可以使用@each指令来遍历列表并动态地引入背景图。以下是一个简单的例子：




// 假设你有一个包含图片路径的列表
$background-images: 'image1.jpg', 'image2.jpg', 'image3.jpg';
 
// 遍历列表并为每个图片创建一个类
@each $image in $background-images {
  .bg-image-#{$image} {
    background-image: url(#{$image});
  }
}

编译后的CSS将是：




.bg-image-image1.jpg {
  background-image: url(image1.jpg);
}
 
.bg-image-image2.jpg {
  background-image: url(image2.jpg);
}
 
.bg-image-image3.jpg {
  background-image: url(image3.jpg);
}

这样，你可以将生成的类添加到HTML元素中，以应用对应的背景图。

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