标签 css 下的文章

2024-08-19

在CSS中，我们可以使用伪元素来模拟border-bottom，并通过调整伪元素的宽度来改变下划线的长度。以下是一个示例：




.underline-container {
  position: relative;
  display: inline-block; /* 或者 block 根据需求 */
}
 
.underline-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid black; /* 设置下划线的样式 */
  width: 100%; /* 默认长度为100% */
}
 
.custom-length::after {
  width: 50%; /* 示例：设置为父容器宽度的一半 */
}

HTML部分：




<div class="underline-container">默认长度下划线</div>
<div class="underline-container custom-length">自定义长度下划线</div>

在这个例子中，.underline-container 类定义了一个容器，该容器的文本下方会有一个模拟的下划线。.underline-container::after 伪元素用来创建下划线，并且可以通过调整.custom-length::after中的width属性来改变下划线的长度。

- 阅读更多 -

H5+CSS3+JS逆向前置——HTMLtable表格标签

System

2024-08-19

所有,css3

在HTML中，<table>标签用于创建表格布局。以下是一个简单的HTML表格示例，使用了HTML、CSS和JavaScript（简称H5+CSS3+JS）：




<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
    text-align: left;
  }
</style>
</head>
<body>
 
<h2>HTML Table</h2>
 
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>
 
</body>
</html>

这段代码创建了一个具有标题行和两行数据的表格。CSS用于设置表格的样式，包括边框、内边距和文本对齐方式。这个示例展示了如何使用HTML创建表格结构，并通过CSS进行样式化，这是学习Web开发的基础知识。

- 阅读更多 -

CSS打造图片翻转立体3D效果

System

2024-08-19

所有,css3

要使用CSS创建图片翻转的3D效果，你可以使用transform属性中的rotateY函数来实现Y轴的旋转，以及使用perspective和transform-style来创建3D效果。以下是一个简单的例子：

HTML:




<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="image-front.jpg" alt="Front Image">
    </div>
    <div class="back">
      <img src="image-back.jpg" alt="Back Image">
    </div>
  </div>
</div>

CSS:




.flip-container {
  perspective: 1000px; /* 创建3D效果的视距 */
}
 
.flipper {
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 让子元素在3D空间中呈现 */
  position: relative;
}
 
.front, .back {
  backface-visibility: hidden; /* 隐藏翻转的背面 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
.front {
  z-index: 2;
}
 
.back {
  transform: rotateY(180deg); /* 翻转180度 */
  z-index: 1;
}
 
/* 鼠标悬浮时翻转 */
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

这段代码会创建一个容器，其中包含一个带有前后两个面的元素。当鼠标悬停在容器上时，.flipper会旋转180度，显示出背面的图片。通过设置backface-visibility: hidden;，可以在翻转时隐藏不可见的背面，给用户一种看起来像是图片翻转的效果。

- 阅读更多 -

CSS 高频按钮样式

System

2024-08-19

所有,css3

以下是一个简单的CSS样式，用于创建一个具有基本交互反馈的按钮：




.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 5px;
  box-shadow: 0 9px #999;
}
 
.button:hover { background-color: #3e8e41 }
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

这段代码定义了一个.button类，它可以被应用到HTML中的任何按钮元素上。当鼠标悬停在按钮上时，会改变背景颜色；当按钮被激活（即按下去）时，会有一个阴影下沉并且按钮向下移动。这个样式非常基础，但是提供了一个交互的开始，可以根据需要进行扩展和定制。

- 阅读更多 -

CSS3 新增属性-边框圆角-文字阴影-盒子阴影

System

2024-08-19

所有,css3

CSS3 提供了多个新属性来增强样式表的功能，包括边框圆角（border-radius），文字阴影（text-shadow），以及盒子阴影（box-shadow）。

边框圆角（border-radius）:




.box {
  border: 2px solid #000;
  border-radius: 10px; /* 可以是像素值、百分比或者是像素值与百分比的组合 */
}

文字阴影（text-shadow）:




.text {
  text-shadow: 2px 2px 2px #000; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

盒子阴影（box-shadow）:




.box {
  box-shadow: 5px 5px 5px #000; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

CSS3 的这些新特性让页面设计师和开发者能创建更加生动和复杂的页面效果。

- 阅读更多 -

【JavaWeb】CSS基础知识：引入方式 + 选择器

System

2024-08-19

所有,css3

CSS（级联样式表）是一种用来描述网页和其他HTML文件样式的语言。CSS可以通过多种方式引入HTML文档中，主要有以下几种方式：

内联样式：直接在HTML标签中使用style属性来添加样式。




<p style="color: blue;">这是一个蓝色的段落。</p>

内部样式表：在HTML文档的<head>部分使用<style>标签来添加样式。




<head>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p>这是一个红色的段落。</p>
</body>

外部样式表：创建一个CSS文件，并通过HTML文档的<link>标签引入。




<!-- 在<head>部分引入外部CSS文件 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

在CSS中，选择器是一种模式，用于选择需要应用样式的元素。CSS中的选择器主要有以下几种：

类选择器：以.开头，用来选择class名匹配的元素。




.blue-text {
    color: blue;
}




<p class="blue-text">这是一个蓝色的段落。</p>

ID选择器：以#开头，用来选择id名匹配的元素。




#red-text {
    color: red;
}




<p id="red-text">这是一个红色的段落。</p>

元素选择器：直接使用HTML元素名称来选择该元素。




p {
    color: green;
}




<p>这是一个绿色的段落。</p>

伪类选择器：用来选择某些元素的特定状态，比如链接的不同状态。




a:hover {
    text-decoration: underline;
}




<a href="https://example.com">悬停我！</a>

CSS选择器可以结合使用，以实现更为复杂的选择需求，例如：




/* 选择class为"button"且具有"highlighted"类的元素 */
.button.highlighted {
    background-color: yellow;
}




<button class="button highlighted">高亮按钮</button>

以上是CSS引入方式和基本选择器的简单介绍和示例。在实际开发中，CSS还可以用来设置字体、布局、背景等多种属性，并可以通过继承、层叠等机制处理样式冲突。

System

2024-08-19

所有,css3




/* 定义一个基本的HTML元素，如div或span，并应用2D转换 */
.element {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 应用2D转换 - 平移 */
  transform: translate(50%, 50%);
  /* 设置动画过渡效果，使转换更平滑 */
  transition: transform 0.5s ease-in-out;
}
 
/* 鼠标悬停时改变转换，触发过渡动画 */
.element:hover {
  transform: translate(100%, 100%);
}

这段代码定义了一个具有红色背景的HTML元素，并使用CSS3的2D转换功能将其平移。当鼠标悬停在该元素上时，它将被转换到右上角。transition属性确保转换会有一个平滑的过渡效果。

- 阅读更多 -

【前端】CSS3弹性布局（flex）、媒体查询实现响应式布局和自适应布局

System

2024-08-19

所有,css3




.container {
  display: flex; /* 定义弹性容器 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 子元素间隔均匀分布 */
}
 
.item {
  flex-basis: 48%; /* 默认基础宽度 */
  margin: 0.5%; /* 子元素外边距 */
  min-width: 280px; /* 最小宽度，防止过度缩小 */
}
 
/* 媒体查询：根据屏幕宽度调整布局 */
@media (max-width: 600px) {
  .item {
    flex-basis: 100%; /* 子元素宽度自适应 */
  }
}

这段代码使用了CSS3的弹性布局(flexbox)来创建一个响应式的布局系统。.container 是一个弹性容器，其中的 .item 子元素可以根据屏幕宽度的变化而改变其宽度，从而实现自适应布局。同时，媒体查询(media query)用于定义在屏幕宽度小于600px时如何调整布局，使得子元素宽度占满容器宽度。

- 阅读更多 -

css如何把header栏固定在屏幕顶部

System

2024-08-19

所有,css3

在CSS中，可以使用position: fixed;属性来实现将header栏固定在屏幕的顶部。这样，即使用户滚动页面，header栏也会保持在相同的位置。

下面是一个简单的例子：

HTML:




<header class="fixed-top">我是固定在顶部的Header</header>

CSS:




.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  z-index: 1000; /* 确保header总是显示在页面的上方 */
}

在这个例子中，.fixed-top 类应用于header元素，使其固定在屏幕的顶部。top: 0; 和 left: 0; 确保了header栏会出现在屏幕的左上角。width: 100%; 使得header的宽度与屏幕的宽度相同。z-index: 1000; 确保了header总是显示在页面上的其他元素之上。

- 阅读更多 -

uni-app+Vue2+vue.js+css3实现滑动删除效果

System

2024-08-19

所有,css3

在uni-app中使用Vue2实现一个简单的滑动删除效果，可以通过监听触摸事件来实现。以下是一个简单的示例：




<template>
  <view class="container">
    <view
      class="item"
      v-for="(item, index) in list"
      :key="index"
      @touchstart="start"
      @touchmove="move"
      @touchend="end"
      :data-index="index"
      :class="{ 'item-active': activeIndex === index }"
    >
      {{ item }}
      <view class="delete" v-if="activeIndex === index">删除</view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      startX: 0,
      activeIndex: -1,
    };
  },
  methods: {
    start(event) {
      this.startX = event.touches[0].clientX;
    },
    move(event) {
      const index = event.currentTarget.dataset.index;
      const moveX = event.touches[0].clientX;
      const distance = moveX - this.startX;
      if (distance > 0) {
        this.activeIndex = index;
      }
    },
    end() {
      this.activeIndex = -1;
    },
  },
};
</script>
 
<style>
.container {
  display: flex;
  flex-direction: column;
}
 
.item {
  position: relative;
  height: 50px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  transition: transform 0.3s;
}
 
.item-active {
  transform: translateX(-100%);
}
 
.delete {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100px;
  background-color: red;
  text-align: center;
  line-height: 50px;
  color: #fff;
}
</style>

在这个例子中，每个列表项都有触摸事件监听，当用户滑动时，记录开始滑动的位置，并在移动时计算滑动的距离。如果是向右滑动，那么设置当前滑动的项的索引，并通过添加item-active类来显示删除按钮。当滑动结束或触发touchend事件时，重置activeIndex。这里使用了transform进行滑动效果的实现，并通过transition属性添加了滑动的动画效果。

- 阅读更多 -