分类 css3 下的文章

2024-08-10

在HTML中，表格（table）和表单（form）是常用的两个元素，用于展示和收集数据。以下是关于HTML表格和表单的详细解释和示例代码：

表格（table）

HTML表格由 <table> 标签定义，表头使用 <th> 标签，表行使用 <tr> 标签，单个单元格使用 <td> 标签。




<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
  </tr>
</table>

表单（form）

HTML表单用于收集用户输入信息，使用 <form> 标签定义，表单控件（输入元素）如文本框、单选按钮、下拉列表等，使用 <input> 标签定义，并通过 <label> 标签关联到 <input>。




<form action="/submit" method="post">
  <label for="username">用户名:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="提交">
</form>

在这个例子中，表单包含两个输入框和一个提交按钮。当用户填写信息后点击提交按钮，表单数据会被发送到服务器上的 /submit 路径，使用POST方法传输。

- 阅读更多 -

WEB前端网页设计 CSS Position（定位）

System

2024-08-10

所有,css3

在CSS中，position属性用于定义元素的定位方式。这个属性有四个值：static、relative、absolute和fixed。

static：默认值，无特殊定位，元素遵循正常文档流。
relative：相对定位，元素相对于其正常位置进行定位。
absolute：绝对定位，元素相对于最近的非static定位的祖先元素进行定位。
fixed：固定定位，元素相对于浏览器窗口进行定位。

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  .static {
    position: static;
    border: 3px solid #73AD21;
    padding: 10px;
    margin: 10px;
  }
 
  .relative {
    position: relative;
    top: 20px;
    left: 20px;
    border: 3px solid #424242;
    padding: 10px;
    margin: 10px;
  }
 
  .absolute {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 3px solid #FF0000;
    padding: 10px;
    margin: 10px;
  }
 
  .fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    border: 3px solid #0000FF;
    padding: 10px;
    margin: 10px;
  }
</style>
</head>
<body>
 
<div class="static">
  <p>这是一个静态定位的元素。</p>
</div>
 
<div class="relative">
  <p>这是一个相对定位的元素。</p>
</div>
 
<div class="absolute">
  <p>这是一个绝对定位的元素。</p>
</div>
 
<div class="fixed">
  <p>这是一个固定定位的元素。</p>
</div>
 
</body>
</html>

在这个例子中，我们创建了四个div元素，每个都使用了不同的position值。每个div都有自己的文本内容说明其定位方式。通过调整浏览器窗口的大小或滚动页面，可以看到fixed定位的元素始终固定在视窗的右下角，而absolute定位的元素相对于最近的非static定位的祖先元素（在这个例子中是视窗）进行定位。

- 阅读更多 -

走马灯效果（html+css+js）

System

2024-08-10

所有,css3

走马灯效果通常指的是文字滚动显示，类似于新闻滚动或者公告栏的效果。以下是一个简单的HTML、CSS和JavaScript结合的走马灯效果实现：

HTML:




<div id="marquee-container">
  <p id="marquee-text">这是走马灯效果的文本，将会从右向左滚动显示。</p>
</div>

CSS:




#marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
 
#marquee-text {
  display: inline-block;
  animation: marquee 10s linear infinite;
}
 
@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

JavaScript (可选，用于处理文本长度动态调整滚动速度):




function adjustMarqueeSpeed(textElement, containerWidth) {
  const textWidth = textElement.getBoundingClientRect().width;
  if (textWidth > containerWidth) {
    const duration = textWidth / containerWidth * 10; // 10s基础上根据文本长度调整
    textElement.style.animationDuration = `${duration}s`;
  }
}
 
window.onload = function() {
  const container = document.getElementById('marquee-container');
  const text = document.getElementById('marquee-text');
  adjustMarqueeSpeed(text, container.offsetWidth);
};

这段代码实现了一个基本的走马灯效果。@keyframes定义了名为marquee的动画，通过改变transform的translateX值实现滚动效果。JavaScript 代码用于在页面加载完成后调整走马灯的滚动速度，使得当文本长度超出容器宽度时可以更慢或者更快地滚动。

- 阅读更多 -

HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头

System

2024-08-10

所有,css3

以下是一个使用HTML、CSS和JavaScript实现的简单轮播图效果的示例代码。该示例包括分页按钮和切换箭头。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
  }
  .slider img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .slider img.active {
    opacity: 1;
  }
  .pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .pagination button {
    cursor: pointer;
    padding: 5px;
    margin: 0 5px;
    background-color: #ddd;
    border: none;
    outline: none;
  }
  .pagination button.active {
    background-color: #007bff;
    color: white;
  }
  .arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: #ddd;
    user-select: none;
  }
  .arrow:hover {
    color: #007bff;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img src="image1.jpg" class="active">
  <img src="image2.jpg">
  <img src="image3.jpg">
 
  <div class="arrow left">&#10094;</div>
  <div class="arrow right">&#10095;</div>
 
  <div class="pagination">
    <button class="active"></button>
    <button></button>
    <button></button>
  </div>
</div>
 
<script>
  let index = 0;
  const images = document.querySelectorAll('.slider img');
  const pagination = document.querySelectorAll('.pagination button');
  const leftArrow = document.querySelector('.left');
  const rightArrow = document.querySelector('.right');
 
  function showImage(imageIndex) {
    images.forEach((img, i) => img.classList.toggle('active', i === imageIndex));
    pagination.forEach((button, i) => button.classList.toggle('active', i === imageIndex));
  }
 
  showImage(index);
 
  rightArrow.addEventListener('click', () => {
    index = (index + 1) % images.length;
    showImage(index);
  });
 
  leftArrow.addEventListener('click', () => {
    index = (index + images.length - 1) % images.length;
    showImage(index);
  });
 
  pagination.forEach((button, i) => {
    button.addEven

- 阅读更多 -

如何使用纯CSS实现瑞兔日历

System

2024-08-10

所有,css3

要使用纯CSS实现一个类似瑞兔日历的效果，你可以参考以下的代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RenRen Calendar</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .calendar {
    width: 240px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #000;
  }
  .calendar-header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
  }
  .calendar-weekdays {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
  }
  .calendar-weekday {
    width: 14.28%;
    text-align: center;
  }
  .calendar-month {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }
  .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 14.28%);
  }
  .calendar-day {
    text-align: center;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
  }
  .calendar-day--current {
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
<div class="calendar">
  <div class="calendar-header">
    <div class="calendar-month">August 2023</div>
  </div>
  <div class="calendar-weekdays">
    <div class="calendar-weekday">Sun</div>
    <div class="calendar-weekday">Mon</div>
    <div class="calendar-weekday">Tue</div>
    <div class="calendar-weekday">Wed</div>
    <div class="calendar-weekday">Thu</div>
    <div class="calendar-weekday">Fri</div>
    <div class="calendar-weekday">Sat</div>
  </div>
  <div class="calendar-days">
    <div class="calendar-day">1</div>
    <div class="calendar-day">2</div>
    <div class="calendar-day">3</div>
    <div class="calendar-day">4</div>
    <div class="calendar-day">5</div>
    <div class="calendar-day">6</div>
    <div class="calendar-day">7</div>
    <div class="calendar-day">8</div>
    <div class="calendar-day">9</div>
    <!-- ... other days ... -->
  </div>
</div>
</body>
</html>

这个简单的例子使用了CSS Grid布局来创建日历的网格，并使用Flexbox布局来创建星期的行。你可以根据需要添加更多的日期，并使用CSS来添加当前日期的特殊样式（比如背景颜色）。这个例子不包括任何JavaScript，仅使用CSS来创建一个静态的UI。

System

2024-08-10

所有,css3

CSS3盒子模型定义了用户代理应该如何计算一个元素的总宽度和总高度，这由box-sizing属性控制。

content-box：这是CSS2.1的盒子模型。元素的宽度/高度由width/height属性设置。元素的边框和内边距不会被包括在内。
border-box：元素的宽度/高度包含了元素的边框（border）和内边距（padding），不包括外边距（margin）。

例子：




/* 设置元素的盒子模型为content-box */
.content-box {
  width: 300px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* 计算宽度和高度时，包含内容，但不包含边框和内边距 */
}
 
/* 设置元素的盒子模型为border-box */
.border-box {
  width: 300px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box; /* 计算宽度和高度时，包含内容、内边距和边框 */
}

在这个例子中，.content-box元素的总宽度将是300px + 10px(左右内边距) + 10px(左右边框) + 5px(左右边框) = 320px，高度类似计算。而.border-box元素的总宽度将是300px，内边距和边框都包含在这个宽度内。

- 阅读更多 -

CSS 之层叠规则（权级、权重、顺序）详解

System

2024-08-10

所有,css3

CSS层叠规则主要指的是多个CSS规则应用在同一元素上时，决定哪个规则生效的过程。这涉及到几个关键因素：权重、顺序和层叠。

权重：
- 内联样式（行内样式）：1,0,0,0
- ID 选择器：0,1,0,0
- 类选择器、属性选择器等：0,0,1,0
- 元素选择器：0,0,0,1
- 通配选择器：0,0,0,0
- 继承的样式：没有权重值

当比较权重时，按照四位数字从左到右进行比较，如果某一位数字相同，则比较下一位数字。

顺序：
- 同权重规则下，后定义的样式会覆盖先定义的样式。
- 如果使用了!important，它会覆盖任何权重，无论位置靠后还是靠前。
层叠：
- CSS解析器会根据选择器的特异性和在样式表中的位置来决定哪个属性值是最终的。
- 当同一选择器应用于相同元素且都含!important时，浏览器将遵循!important规则。

例子：




/* 内联样式 */
span { color: red; } /* 权重为：0,0,0,1 */
 
/* ID 选择器 */
#mySpan { color: blue !important; } /* 权重为：0,1,0,0，!important覆盖 */
 
/* 类选择器 */
.myClass { color: green; } /* 权重为：0,0,1,0 */
 
/* 应用于同一元素的选择器，后定义的覆盖先定义的 */
span { color: black; } /* 权重为：0,0,0,1，由于顺序，不会被应用 */

HTML中使用这些样式的元素：




<span id="mySpan" class="myClass">这是一个文本。</span>

在这个例子中，元素最终的颜色将是蓝色，因为ID选择器的!important规则覆盖了其他所有规则。

- 阅读更多 -

使用vant-tabs改变active-tab样式

System

2024-08-10

所有,css3

在Vant中，可以通过修改vant-tabs组件的active-tab-style属性来改变当前激活标签的样式。这个属性接受一个对象，里面可以定义样式名和值。

以下是一个简单的例子，展示如何通过active-tab-style属性来改变激活标签的样式：




<template>
  <van-tabs v-model="activeTab" active-tab-style="color: #3f51b5;">
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2">内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
  </van-tabs>
</template>
 
<script>
import { ref } from 'vue';
import { Tabs, Tab } from 'vant';
 
export default {
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  setup() {
    const activeTab = ref(0);
    return { activeTab };
  },
};
</script>

在这个例子中，active-tab-style被设置为color: #3f51b5;，这将改变激活标签的文本颜色为蓝色。你可以根据需要调整其他样式属性，比如font-size、background-color等。

System

2024-08-10

所有,css3

CSS中的特殊选择器连接符含义速记可以如下记忆：

+ 表示“兄弟选择器”，用于选择紧随在另一个元素之后的元素。
~ 表示“一般兄弟选择器”，用于选择同级别的所有元素。
> 表示“子选择器”，用于选择直接子元素。
" " 表示“后代选择器”，用于选择所有的后代元素（不仅是子元素）。
" 表示“类选择器”，用于选择具有特定类的元素。
# 表示“ID选择器”，用于选择具有特定ID的元素。

例如，如果我们有以下HTML结构：




<div>
  <p>这是一个段落。</p>
  <span>这是一个span元素。</span>
  <div>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
  </div>
</div>

相应的CSS可以是：




/* 子选择器 */
div > p { color: red; } /* 选择div的直接子元素p */
 
/* 兄弟选择器 */
p + span { color: blue; } /* 选择紧跟在p元素之后的第一个span元素 */
 
/* 一般兄弟选择器 */
p ~ span { font-weight: bold; } /* 选择p元素之后的所有span元素 */
 
/* 后代选择器 */
div p { text-decoration: underline; } /* 选择div的所有后代p元素 */
 
/* 类选择器 */
.my-class { background-color: yellow; } /* 选择所有class为my-class的元素 */
 
/* ID选择器 */
#my-id { border: 1px solid black; } /* 选择ID为my-id的元素 */

这样，通过记忆这些特殊符号的含义，开发者可以更快地写出CSS选择器，提高开发效率。

- 阅读更多 -

CSS实现文字镂空效果炫酷背景效果

System

2024-08-10

所有,css3

在CSS中，实现文字的镂空效果通常涉及到使用text-stroke或者text-shadow。以下是一个简单的示例，展示如何使用CSS为文字添加镂空效果，并配合炫酷的背景效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Stroke and Background Effect</title>
<style>
  .hollow-out {
    color: white; /* 文字颜色 */
    font-size: 60px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    text-align: center; /* 文字居中 */
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); /* 创建一个炫酷的背景渐变 */
    background-size: 400%; /* 背景大小，用于当背景移动时创建动感 */
    background-repeat: no-repeat; /* 背景不重复 */
    animation: bg-move 10s infinite alternate linear; /* 应用背景移动的动画 */
  }
 
  @keyframes bg-move {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 100% 100%;
    }
  }
 
  .hollow-out {
    -webkit-text-stroke: 1px black; /* 为了兼容性添加黑色文字边框 */
    text-stroke: 1px black; /* 设置文字边框 */
  }
</style>
</head>
<body>
<div class="hollow-out">
  镂空文字效果
</div>
</body>
</html>

在这个示例中，.hollow-out 类定义了文字的样式，包括字体大小、加粗和颜色。使用-webkit-text-stroke属性（以及为了更好的兼容性而设置的text-stroke）为文字创建了一个1像素的黑色边框，实现了镂空效果。同时，通过background属性设置了一个炫酷的线性渐变背景，并通过animation属性使背景不断移动以创建动感。

- 阅读更多 -