标签 css 下的文章

2024-08-17

Sublime Text 是一款流行的文本编辑器，广泛用于编写和编辑各种代码。Sublime CSS3 插件为 Sublime Text 提供了更好的 CSS3 支持，包括代码高亮、自动完成和代码导航等功能，从而使得编写现代 CSS 代码更加高效和便捷。

以下是如何安装和使用 Sublime CSS3 插件的步骤：

打开 Sublime Text 编辑器。
按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P）打开命令面板。
输入 Install Package 并选择它，然后按回车。
在列表中搜索 CSS3 并选择它进行安装。

安装完成后，CSS3 插件会自动激活，并提供更加丰富的编写体验。

以下是一个简单的 CSS 示例，展示了使用 Sublime CSS3 插件可以提升的编写体验：




/* 使用 Sublime CSS3 插件的自动完成功能 */
.selector {
    display: -webkit-flex; /* Chrome, Safari, 等使用 Webkit 引擎的浏览器 */
    display: flex;         /* 标准的 CSS 显示为 flexbox 布局 */
    align-items: center;   /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

在编写 CSS 代码时，Sublime CSS3 插件可以提供更加智能的代码自动完成，帮助开发者快速准确地编写 CSS 属性和值。此外，它还提供了代码片段（snippets）的功能，用户可以通过输入简写然后按 Tab 键来生成完整的代码块。

System

2024-08-17

所有,css3

在HTML5和CSS3的基础上，我们可以使用以下标签来创建列表、表格和表单，并对文本域和标签进行样式定制。

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>前端开发基础</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- 无序列表 -->
    <ul class="my-list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
 
    <!-- 有序列表 -->
    <ol class="my-list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
 
    <!-- 表格 -->
    <table class="my-table">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
    </table>
 
    <!-- 表单 -->
    <form action="">
        <!-- 文本域 -->
        <label for="my-text">输入你的名字:</label>
        <input type="text" id="my-text" name="username">
 
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

CSS部分：




/* style.css */
.my-list {
    list-style-type: square; /* 实现自定义列表样式 */
}
 
.my-table {
    border-collapse: collapse; /* 实现表格的边框合并 */
    width: 100%;
}
 
.my-table th, .my-table td {
    border: 1px solid #ddd; /* 实现单元格边框样式 */
    padding: 8px;
}
 
.my-table tr:nth-child(even) {
    background-color: #f2f2f2; /* 实现行背景色的交替 */
}
 
.my-table tr:hover {
    background-color: #ddd; /* 鼠标悬浮行的背景色变化 */
}
 
input[type="submit"] {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
 
input[type="submit"]:hover {
    background-color: #45a049;
}

以上代码实现了无序列表、有序列表、表格和表单的基本结构，并通过CSS为它们添加了基本样式。同时，文本域和提交按钮也被添加到表单中，并通过label标签关联，以提高表单的可访问性。

- 阅读更多 -

HTML+CSS大作业：使用html设计一个简单好看的公司官网首页浮动布局

System

2024-08-17

所有,html5

以下是一个使用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>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
  }
  .navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  .navigation li {
    float: left;
  }
  .navigation li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .navigation li a:hover {
    background-color: #111;
  }
  .content {
    margin-left: 160px;
    padding: 10px;
  }
  .sidebar {
    float: left;
    width: 150px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: 0;
  }
  .footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    clear: both;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>公司名称</h1>
</div>
 
<ul class="navigation">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">产品服务</a></li>
  <li><a href="#">博客</a></li>
  <li><a href="#">联系方式</a></li>
</ul>
 
<div class="content">
  <h2>欢迎来到我们的官网</h2>
  <p>这里是公司的首页，我们提供的是高质量的产品和服务。我们致力于创新和提升生活质量。</p>
  <!-- 更多内容 -->
</div>
 
<div class="sidebar">
  <h3>最新新闻</h3>
  <ul>
    <li><a href="#">公司获得XX大奖</a></li>
    <li><a href="#">发布创新产品YYY</a></li>
    <li><a href="#">成功服务于ZZZ项目</a></li>
  </ul>
</div>
 
<div class="footer">
  &copy; 2023 公司名称 | 版权所有
</div>
 
</body>
</html>

这个示例展示了如何使用HTML创建一个简单的公司网站首页，并使用CSS来设计布局，包括使用浮动布局来对导航、内容和侧边栏进行定位。这个网站的结构清晰，使用了合适的颜色和字体，是一个入门级的网站设计示例。

- 阅读更多 -

html结合css实现浏览器展示3D相册

System

2024-08-17

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D相册</title>
<style>
  .album {
    width: 400px;
    height: 400px;
    perspective: 600px;
    margin: 50px auto;
  }
  .album img {
    width: 100%;
    height: 100%;
    transform: translateZ(-1px);
    position: absolute;
    backface-visibility: hidden;
  }
  .album:hover img {
    transform: rotateY(360deg);
    transition: transform 10s ease-in-out;
  }
</style>
</head>
<body>
<div class="album">
  <img src="path_to_your_image_1.jpg" alt="Image 1">
  <img src="path_to_your_image_2.jpg" alt="Image 2">
  <img src="path_to_your_image_3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>
</body>
</html>

这个简单的HTML和CSS代码示例展示了如何创建一个基本的3D相册。当鼠标悬停在相册容器上时，所有的图片会旋转一周。你需要替换src属性的值为你自己的图片路径。这个例子使用了transform和transition属性来实现动画效果，并且通过backface-visibility属性来确保在旋转时不会显示图片的背面。

- 阅读更多 -

CSS3笔记之定位篇z-index

System

2024-08-17

所有,css3

在CSS中，z-index属性主要用于管理定位元素（即position属性值为relative、absolute、fixed或sticky的元素）的堆叠顺序。元素的z-index值越大，它就越位于顶层。

注意，z-index只能应用于相对定位的元素，即position属性值为relative、absolute、fixed或sticky的元素。此外，每个元素都有一个默认的z-index值，通常是0，除非它是一个 positioned元素，在这种情况下，它的默认值是auto。

以下是一些使用z-index的示例：




/* 示例1 */
.first-element {
  position: relative;
  z-index: 10;
}
 
.second-element {
  position: relative;
  z-index: 5;
}
 
/* 示例2 */
.container {
  position: relative;
}
 
.first-child {
  position: absolute;
  z-index: 10;
}
 
.second-child {
  position: absolute;
  z-index: 20;
}
 
/* 示例3 */
.overlay {
  position: fixed;
  z-index: 1000;
}

在示例1中，即使.second-element在HTML结构中先定义，由于其z-index值小于.first-element，因此.first-element将显示在.second-element之上。

在示例2中，即使.first-child在HTML结构中先定义，由于.second-child的z-index值大于.first-child，.second-child将显示在.first-child之上。

在示例3中，.overlay拥有较高的z-index值，因此即使它不是最后定义的元素，它也会显示在其他元素之上。

请注意，z-index只在父元素的z-index值都相同的情况下才会发挥作用。如果父元素的z-index值较高，则子元素无论z-index设置多高都无法显示在其父元素之上。

- 阅读更多 -

css 排行榜动画，排序动画，横向，竖向，网格

System

2024-08-17

所有,css3

要创建一个排行榜的动画，你可以使用CSS的@keyframes规则来定义动画，并使用JavaScript来动态更新排行榜数据。以下是一个简单的例子，演示了如何创建一个横向的排行榜动画。

HTML:




<div class="leaderboard">
  <div class="leader">
    <span class="rank">1</span>
    <span class="name">Player 1</span>
    <span class="score">100</span>
  </div>
  <!-- 更多排行榜数据 -->
</div>

CSS:




.leaderboard {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
 
.leader {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 5px;
  padding: 10px;
  background-color: #f0f0f0;
  transition: all 0.3s ease;
}
 
.rank {
  min-width: 20px;
  color: #333;
  font-weight: bold;
}
 
.name {
  min-width: 100px;
  color: #555;
}
 
.score {
  min-width: 50px;
  color: #777;
  font-weight: bold;
}
 
/* 动画 */
@keyframes rankAnimation {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
 
.leader.animate {
  animation: rankAnimation 0.5s ease forwards;
}

JavaScript:




// 假设你有一个包含排行榜数据的数组
const rankings = [
  { name: 'Player 1', score: 100 },
  // 更多...
];
 
// 更新排行榜函数
function updateLeaderboard(rankings) {
  const leaderboard = document.querySelector('.leaderboard');
  leaderboard.innerHTML = ''; // 清空原有内容
 
  rankings.forEach((ranking, index) => {
    const leader = document.createElement('div');
    leader.classList.add('leader');
    if (index === 0) {
      leader.classList.add('animate'); // 为第一名添加动画
    }
 
    leader.innerHTML = `
      <span class="rank">${index + 1}</span>
      <span class="name">${ranking.name}</span>
      <span class="score">${ranking.score}</span>
    `;
 
    leaderboard.appendChild(leader);
  });
}
 
// 使用setInterval模拟排行榜数据更新
setInterval(() => {
  // 更新数据...
  updateLeaderboard(rankings);
}, 5000);

这个例子中，.leaderboard是排行榜容器，.leader是每个排行榜项的容器。.animate类是被添加到第一名的项目上，以便为其提供动画效果。@keyframes rankAnimation定义了一个动画，它将项目从屏幕外向内移动并逐渐变为可见。updateLeaderboard函数用于更新排行榜数据，并可以被定期调用来模拟实时更新。

- 阅读更多 -

小按钮大宇宙，分享几个宇宙风格的按钮动效，让你爱上CSS

System

2024-08-17

所有,css3

在这里，我将提供两个简单而又炫目的CSS按钮动效，它们都是以宇宙风格设计的。

星辰飘落的按钮:

HTML:




<button class="star-button">点击我</button>

CSS:




.star-button {
  border: none;
  background: none;
  position: relative;
  outline: none;
  font-size: 20px;
  color: #FFF;
  cursor: pointer;
  padding: 10px 20px;
  overflow: hidden;
  box-sizing: border-box;
}
 
.star-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: #F7D674;
  border-radius: 50%;
  opacity: 0;
  animation: star-animation 2s infinite;
}
 
.star-button:hover::after {
  animation: none;
}
 
@keyframes star-animation {
  0% {
    transform: translate(-50%, -100%) rotate(0deg);
    opacity: 1;
    width: 0;
    height: 0;
  }
  100% {
    transform: translate(-50%, 0) rotate(720deg);
    opacity: 0;
    width: 1000px;
    height: 1000px;
  }
}

火焰般的按钮:

HTML:




<button class="flame-button">点击我</button>

CSS:




.flame-button {
  position: relative;
  background: #f7d674;
  border: none;
  padding: 10px 20px;
  outline: none;
  font-size: 20px;
  color: #FFF;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}
 
.flame-button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  background: #F7D674;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 50%;
  animation: flame-animation 2s infinite;
}
 
.flame-button:hover::before {
  animation: none;
}
 
@keyframes flame-animation {
  0% {
    transform: translate(-50%, 100%) rotate(0deg);
    opacity: 1;
    width: 0;
    height: 0;
  }
  100% {
    transform: translate(-50%, 0) rotate(720deg);
    opacity: 0;
    width: 1000px;
    height: 1000px;
  }
}

这两个按钮动效都是通过CSS的@keyframes规则和animation属性实现的，它们都包含一个动画，在鼠标悬停时停止动画，给用户一个静态的按钮感觉。这种设计模仿了单一按钮在不同状态下的不同视觉效果，体现了CSS的灵活性和强大功能。

- 阅读更多 -

css元素的显示和隐藏

System

2024-08-17

所有,css3

在CSS中，可以使用display属性或visibility属性来控制元素的显示和隐藏。

使用display属性：
- display: none; 可以隐藏元素，并且元素不会占据任何空间。
- display: block; 可以显示元素，通常用于将元素转换为块级元素。
- display: inline; 可以显示元素，通常用于将元素转换为行内元素。
- display: flex; 可以显示元素，并使用弹性盒模型布局。
使用visibility属性：
- visibility: hidden; 可以隐藏元素，但元素仍然占据空间。
- visibility: visible; 可以显示元素。

示例代码：




/* 隐藏元素 */
.hide-display {
  display: none;
}
 
.hide-visibility {
  visibility: hidden;
}
 
/* 显示元素 */
.show-display {
  display: block; /* 或者 inline, flex 等 */
}
 
.show-visibility {
  visibility: visible;
}

在HTML中使用这些类：




<!-- 使用display属性隐藏 -->
<div class="hide-display">这个元素被隐藏了</div>
<div class="show-display">这个元素被显示了</div>
 
<!-- 使用visibility属性隐藏 -->
<div class="hide-visibility">这个元素被隐藏了，但仍占据空间</div>
<div class="show-visibility">这个元素被显示了</div>

使用display: none;时，元素不仅被隐藏，而且在文档流中不再占据空间。使用visibility: hidden;时，元素仍然存在于文档流中，但是被设置为不可见状态。根据需求选择合适的属性来显示或隐藏元素。

- 阅读更多 -

CSS3两个动画顺序衔接播放

System

2024-08-17

所有,css3

在CSS3中，要使两个动画顺序播放，可以使用animation-delay属性来设置动画开始的延迟时间。这样，第二个动画可以在第一个动画完成后开始。

以下是一个简单的例子，演示了如何使用animation-delay来实现这一效果：




/* 定义第一个动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 定义第二个动画 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
 
/* 应用动画到元素上 */
.element {
  /* 第一个动画 */
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards; /* 保持动画结束状态 */
 
  /* 第二个动画 */
  animation-name: slideIn;
  animation-duration: 1s;
  animation-delay: 2s; /* 设置第二个动画开始的延迟 */
  animation-fill-mode: forwards; /* 保持动画结束状态 */
}

在这个例子中，.element将先执行fadeIn动画2秒钟，然后在动画结束后延迟2秒开始执行slideIn动画。通过设置animation-fill-mode为forwards，动画结束时元素将保持最后一帧的状态。

- 阅读更多 -

CSS3 边框、圆角、背景

System

2024-08-17

所有,css3

CSS3 提供了丰富的样式属性，可以用来创建各种效果。以下是如何使用 CSS3 的边框、圆角和背景属性来装饰一个元素的示例代码：




/* 设置边框宽度、样式和颜色 */
.box {
  border: 2px solid #000;
}
 
/* 设置圆角大小 */
.rounded-box {
  border-radius: 10px;
}
 
/* 设置背景图片 */
.background-box {
  background-image: url('background.jpg');
  background-size: cover; /* 背景图片覆盖整个元素 */
}
 
/* 设置背景颜色 */
.colored-box {
  background-color: #f0f0f0;
}

HTML 使用这些样式的元素：




<div class="box rounded-box colored-box">这是一个有边框、圆角和背景颜色的盒子</div>
<div class="box rounded-box background-box">这是一个有边框、圆角和背景图片的盒子</div>

在这个例子中，我们创建了两个 div 元素，分别应用了不同的样式类。第一个盒子有边框、圆角和背景颜色，第二个盒子有边框、圆角和背景图片。通过组合不同的类，CSS 允许你灵活地装饰你的网页元素。

- 阅读更多 -