标签 css 下的文章

2024-08-19

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属性添加了滑动的动画效果。

- 阅读更多 -

css 实现3D效果

System

2024-08-19

所有,css3

要使用CSS实现3D效果，可以使用transform-style: preserve-3d;属性，它可以让子元素在3D空间中呈现。然后，使用translateZ函数可以对子元素进行深入或者提升。

下面是一个简单的3D立方体示例：

HTML:




<div class="container">
    <div class="face front">前面</div>
    <div class="face back">后面</div>
    <div class="face right">右面</div>
    <div class="face left">左面</div>
    <div class="face top">上面</div>
    <div class="face bottom">下面</div>
</div>

CSS:




.container {
    width: 200px;
    height: 200px;
    margin: 50px;
    perspective: 1000px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(45deg); /* 可选：添加旋转效果 */
}
 
.face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #f0f0f0;
    color: #333;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
}
 
.front {
    transform: translateZ(100px);
}
 
.back {
    transform: translateZ(-100px);
}
 
.right {
    transform: rotateY(90deg) translateZ(100px);
}
 
.left {
    transform: rotateY(-90deg) translateZ(100px);
}
 
.top {
    transform: rotateX(90deg) translateZ(100px);
}
 
.bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

这段代码创建了一个200x200px的立方体容器，其中包含6个面。每个面都被放置在3D空间的不同位置，通过调整translateZ的值，可以改变它们相对于中心点的深度。

System

2024-08-19

所有,css3

在CSS3中，我们可以使用transform属性的scale函数来对元素进行缩放。scale函数接受一个或两个参数，当只有一个参数时，它将对元素进行等比例缩放。两个参数时，第一个参数表示水平方向的缩放比例，第二个参数表示垂直方向的缩放比例。

解法1：使用 scale 设置一个参数，实现元素的等比例缩放。

HTML代码：




<div class="box1"></div>

CSS代码：




.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(0.5);  /* 水平和垂直方向等比例缩放0.5倍 */
}

解法2：使用 scale 设置两个参数，实现元素的不等比例缩放。

HTML代码：




<div class="box2"></div>

CSS代码：




.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: scale(0.5, 2);  /* 水平方向缩放0.5倍，垂直方向缩放2倍 */
}

以上两种方法，第一种方法实现了元素在水平和垂直方向的等比例缩放，第二种方法实现了元素在水平方向和垂直方向的不等比例缩放。

- 阅读更多 -

H5+CSS3+JS逆向前置——HTMLH5文本元素

System

2024-08-19

所有,css3

HTML5 引入了大量新的语义化标签，例如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等，它们有助于开发者编写更清晰的代码，有利于搜索引擎的搜索和更好的用户体验。

以下是一个简单的 HTML5 页面结构示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* CSS3 样式代码 */
        body {
            font-family: Arial, sans-serif;
        }
        header, footer {
            background-color: #ddd;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            background-color: #bbb;
            padding: 5px;
        }
        section {
            background-color: #eee;
            padding: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
        </ul>
    </nav>
    <section>
        <h2>最新文章</h2>
        <p>这里是一些文章内容...</p>
    </section>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
    <script>
        // JavaScript 代码
    </script>
</body>
</html>

这个示例展示了如何使用 HTML5 的语义化标签来构建一个简单的网站结构，并通过内联的 CSS3 样式和 JavaScript 实现一些基本的交互功能。

- 阅读更多 -

CSS中float、flex（弹性盒子）和grid（网格）布局的优缺点

System

2024-08-19

所有,css3

float布局优点：

简单，适合文字环绕。
兼容性好，旧浏览器也能使用。
可以实现左中右等简单布局。

float布局缺点：

需要清除浮动，否则会影响下面的元素。
不能灵活处理内容太多的情况。
对于移动端支持不够好。

flex(弹性盒子)布局优点：

灵活的空间分配。
可以很容易地实现响应式设计。
可以很好地处理内容过多的情况。
对移动端有很好的支持。

flex(弹性盒子)布局缺点：

兼容性问题，较旧的浏览器可能不支持。
不适合复杂的布局，比如具有多级菜单的导航。

grid(网格)布局优点：

提供了二维的布局系统，比flex强大。
可以更方便地创建复杂的布局，比如带有列和行的组合。
提供了强大的功能，如列/行的间隔、对齐和嵌套。

grid(网格)布局缺点：

兼容性问题，较旧的浏览器可能不支持。
学习曲线较陡峭，需要一定时间掌握。
如果过度使用，可能会导致布局复杂度提高，难以维护。

System

2024-08-19

所有,css3

HTML5 基础：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>页面头部</header>
    <nav>导航栏</nav>
    <section>
        <article>
            <h1>文章标题</h1>
            <p>这里是文章内容...</p>
        </article>
    </section>
    <aside>侧边栏</aside>
    <footer>页面底部</footer>
</body>
</html>

CSS3 应用：




/* CSS 文件 */
body {
    background-color: #f3f3f3;
}
header, footer {
    background-color: #444;
    color: white;
    text-align: center;
    padding: 5px 0;
}
nav, aside {
    background-color: #f5f5f5;
    color: #333;
    padding: 10px;
}
section article {
    background-color: white;
    padding: 15px;
    margin-bottom: 10px;
}
section article h1 {
    color: #333;
    margin-bottom: 5px;
}

JavaScript 动画：




// JavaScript 文件
window.onload = function() {
    var header = document.getElementsByTagName('header')[0];
    var nav = document.getElementsByTagName('nav')[0];
    var aside = document.getElementsByTagName('aside')[0];
    var footer = document.getElementsByTagName('footer')[0];
 
    // 使用 setInterval 实现简单的动画效果
    setInterval(function() {
        var random = Math.random() * 20; // 生成一个0到20之间的随机数
        header.style.left = random + 'px'; // 改变元素的位置
        nav.style.height = random + 'px'; // 改变元素的高度
        aside.style.width = random + 'px'; // 改变元素的宽度
        footer.style.fontSize = random + 'px'; // 改变元素的字体大小
    }, 100);
};

以上代码展示了如何使用HTML5和CSS3创建一个简单的页面框架，并通过JavaScript实现动态效果。这个例子旨在展示基础的页面结构和动画技术，并不是实际的动画效果，因为动画效果需要更复杂的逻辑和CSS3的animations和transforms属性。

- 阅读更多 -