标签 css 下的文章

CSS 实现跳动的方块动画

2024-08-14




/* 定义一个跳动的方块动画 */
.jumping-box {
  width: 50px;
  height: 50px;
  background-color: #333;
  margin: 30px 0;
  animation: jump 1s infinite;
}
 
/* 定义关键帧 */
@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

这段代码定义了一个.jumping-box类，当它被应用到HTML元素上时，会产生一个上下跳动的动画效果。动画通过@keyframes规则定义了元素在50%的时候向上移动10像素，并在动画的开始和结束时元素保持在原始位置。动画的持续时间是1秒，并且会无限次数地循环。

CSS使用flex弹性盒子保持容器平均分

2024-08-14

在CSS中，使用flex弹性盒子模型可以轻松地保持容器内的项目均匀分布。以下是一个简单的例子，演示如何使用flexbox来保持容器内的项目平均分布：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Average Split</title>
<style>
  .container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100px;
    background-color: #f0f0f0;
  }
 
  .item {
    flex: 1;
    text-align: center;
    line-height: 100px;
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
 
</body>
</html>

在这个例子中，.container 类使用了 display: flex 来声明一个flex容器。.item 类使用了 flex: 1 来确保所有子项均匀分配容器的空间。justify-content: space-around 则用于确保子项在容器中均匀分布，并且两端对齐。

CSS实现水平居中的几种方法

2024-08-14

CSS实现元素水平居中的方法有很多种，以下是几种常用的实现方式：

使用flexbox布局:




.parent {
  display: flex;
  justify-content: center;
}
 
.child {
  /* 子元素内容 */
}

使用margin:auto方法:




.child {
  margin: 0 auto;
  display: block;
  width: 50%; /* 或者具体的宽度 */
}

使用text-align和inline或inline-block元素:




.parent {
  text-align: center;
}
 
.child {
  display: inline-block;
}

使用绝对定位和transform:




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

使用grid布局:




.parent {
  display: grid;
  place-items: center;
}
 
.child {
  /* 子元素内容 */
}

每种方法都有其适用的场景，比如flexbox适合于需要灵活控制空间分布的布局，margin:auto适用于块级元素，text-align适用于内联元素，绝对定位和transform则适合于需要精确控制位置的元素，而grid布局提供了一种更模块化的方式来处理布局。

前端学习＜二＞CSS基础——14-CSS3属性详解：Web字体

2024-08-14

在CSS中，@font-face规则用于加载Web字体，这使得我们可以将自定义字体添加到网页中。以下是如何使用@font-face规则的示例：




@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
 
body {
  font-family: 'MyWebFont', sans-serif;
}

在这个例子中，MyWebFont是我们声明的字体名称，src属性指定了不同的字体文件路径，以及它们各自的格式。font-family属性在body选择器中使用，以便将我们的自定义字体应用到整个页面中。

请注意，为了使@font-face规则生效，你需要确保字体文件位于你的服务器上，并且你的网页引用的路径是正确的。此外，为了兼容不同的浏览器，你通常需要提供多种格式的字体文件。

CSS溢出隐藏单行、多行隐藏一行半

2024-08-14

在CSS中，可以使用text-overflow属性来处理文本溢出的情况。对于单行和多行文本的溢出隐藏，以及一行半的隐藏，可以分别设置overflow和text-overflow属性。

单行隐藏溢出文本:




.single-line-ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 添加省略符号表示文本被截断 */
}

多行隐藏溢出文本:




.multi-line-ellipsis {
  overflow: hidden; /* 隐藏溢出的内容 */
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  -webkit-box-orient: vertical; /* 垂直方向的子元素排列 */
  text-overflow: ellipsis; /* 添加省略符号表示文本被截断 */
}

一行半隐藏溢出文本，可以使用伪元素和绝对定位来实现:




.half-line-ellipsis {
  position: relative;
  line-height: 1.5; /* 设置行高 */
  height: 3em; /* 容器高度为3em */
}
 
.half-line-ellipsis::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 5px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

HTML 使用示例:




<div class="single-line-ellipsis">这是一个单行文本，溢出内容会显示为省略符号。</div>
<div class="multi-line-ellipsis">这是一个多行文本，溢出内容会显示为省略符号。这使得我们可以很好地控制文本的显示，而不会导致布局的问题。</div>
<div class="half-line-ellipsis">这是一个试图在一行的一半显示文本，溢出内容会显示为省略符号。</div>

以上CSS类可以应用于HTML元素中，实现文本溢出时的隐藏效果。

css+html制作订单页面

2024-08-14

为了创建一个简单的订单页面，我们可以使用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 { font-family: Arial, sans-serif; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ddd; padding: 8px; }
  th { background-color: #f2f2f2; }
  .center { text-align: center; }
  .right { text-align: right; }
</style>
</head>
<body>
 
<h1>订单详情</h1>
 
<table>
  <tr>
    <th class="center">商品名称</th>
    <th class="center">单价</th>
    <th class="center">数量</th>
    <th class="center">小计</th>
  </tr>
  <tr>
    <td class="center">商品A</td>
    <td class="right">$99.99</td>
    <td class="center">1</td>
    <td class="right">$99.99</td>
  </tr>
  <!-- 添加更多的商品行 -->
</table>
 
<hr>
 
<table>
  <tr>
    <th class="right">总计：</th>
    <td class="right">$99.99</td>
  </tr>
</table>
 
</body>
</html>

这个简单的HTML和CSS组合创建了一个包含商品列表和总计的订单页面。你可以根据需要添加更多的商品行，并调整价格和文本以反映实际的订单信息。

CSS三大特性之层叠性~

2024-08-14

层叠性（Cascading）是CSS的一个主要特性，它确保了多个样式表在网页中能够恰当地相互作用。层叠性遵循一定的规则，确保样式表按预期效果叠加。

层叠性的基本规则如下：

样式表中具有相同选择器优先级的规则，后定义的样式会覆盖先定义的样式。
不同选择器优先级的规则，根据选择器的权重（权重高的选择器规则将被应用）。
对于同一选择器中的多个声明，遵循"层叠"规则，即后声明的属性会覆盖先声明的属性。
对于继承的样式，不受层叠性影响，除非明确覆盖。

示例代码：




/* 选择器权重相同，后定义的样式会覆盖先定义的样式 */
p {
  color: red;
}
p {
  color: blue; /* 这个规则将会覆盖上面的规则，段落文本颜色将为蓝色 */
}
 
/* 选择器权重不同，权重高的选择器将会被应用 */
h1 {
  color: green;
}
p.important {
  color: red; /* 由于权重比h1高（类选择器比标签选择器多1级），这个规则将会被应用 */
}

在实际应用中，确保正确理解和应用CSS层叠性是非常重要的，它可以帮助开发者更好地控制网页的样式表现。

CSS：浏览器窗口缩小时，浮动元素换行问题

2024-08-14

在CSS中，可以使用min-width属性为浮动元素设置一个最小宽度，以保证即使在浏览器窗口缩小到一定程度时，这些浮动元素也不会换行。

例如，如果你有一个浮动元素<div>，你可以在其样式表中使用以下CSS规则：




.float-element {
  float: left; /* 或者使用 float: right; 根据需要进行设置 */
  min-width: 200px; /* 设置一个最小宽度 */
  /* 其他样式 */
}

这样，即使浏览器窗口缩小，导致可用空间不足以容纳min-width以下的宽度，浮动元素也不会换行。它会缩小到min-width设置的宽度，而不是缩小到只有其内容的宽度。

HTML示例：




<div class="float-element">这是一个浮动元素</div>
<!-- 其他内容 -->

CSS示例：




.float-element {
  float: left;
  min-width: 200px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 5px;
}

在这个例子中，即使浏览器窗口变窄，float-element也会保持最小宽度200像素，而不会换行。

2024-08-14

在CSS中，first-child、last-child和nth-child(3)是用来选择元素的特定子元素的选择器。

first-child选择器用来选择父元素的第一个子元素。
last-child选择器用来选择父元素的最后一个子元素。
nth-child(3)选择器用来选择父元素下的第三个子元素。

以下是这些选择器在Vue模板中的使用示例：




<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" :class="{'first': index === 0, 'last': index === items.length - 1, 'third': index === 2}">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  }
};
</script>
 
<style>
.first {
  color: red; /* 第一个子元素的颜色 */
}
.last {
  color: green; /* 最后一个子元素的颜色 */
}
.third {
  color: blue; /* 第三个子元素的颜色 */
}
</style>

在这个示例中，我们使用了Vue的v-for指令来循环生成列表项，并通过计算属性为特定的元素添加了类名来模拟CSS选择器的效果。这样做的好处是，不需要使用复杂的CSS选择器，可以在JavaScript逻辑中更灵活地处理元素的样式。