1. 首页
  2. 标签
  3. css
html-css-js使用axios和ajax获取接口并携带请求头+获取输入框或选择器内容
System
2024-08-24
所有,ajax



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios Example</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function fetchData() {
            const inputValue = document.getElementById('myInput').value;
            const selectValue = document.getElementById('mySelect').value;
            const headers = {
                'Authorization': 'Bearer ' + inputValue,
                'Another-Header': selectValue
            };
            axios.get('https://api.example.com/data', { headers: headers })
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.error(error);
                });
        }
    </script>
</head>
<body>
    <input type="text" id="myInput" placeholder="Enter token">
    <select id="mySelect">
        <option value="value1">Option 1</option>
        <option value="value2">Option 2</option>
    </select>
    <button onclick="fetchData()">Fetch Data</button>
</body>
</html>

这段代码使用Axios库来发送一个GET请求到指定的接口，并携带了从输入框和下拉选择器中获取的数据作为请求头。当用户点击按钮时，fetchData函数会被触发，并发送请求。请求成功后，响应数据会被打印到控制台，失败时会打印错误信息。

- 阅读更多 -
HTML页面中引入CSS和JS的方法及使用建议（以例子说明）
System
2024-08-24
所有,javascript



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS和JS引入示例</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 内联CSS样式 -->
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <!-- 引入外部JS文件 -->
    <script src="script.js"></script>
    <!-- 内联JavaScript代码 -->
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            console.log('页面已加载完成！');
        });
    </script>
</body>
</html>

在这个示例中，我们展示了如何在HTML页面中引入外部CSS文件和JS文件，以及如何使用内联的CSS和JavaScript代码。通过这样的方式，我们可以更好地组织我们的代码，使得HTML标记语言和样式、行为分离，便于维护和优化。

- 阅读更多 -
CSS 核心知识点总结
System
2024-08-23
所有,css

CSS (Cascading Style Sheets) 是用于描述网页样式的语言，主要用于控制网页布局和样式，以便让网页更加美观。以下是一些CSS的核心概念和应用实例：

  1. 选择器：选择器用于选择需要应用样式的元素。例如，要选择所有的段落元素，可以使用p选择器。



p {
  color: blue;
}
  1. 属性和值：属性是要改变的样式属性，值是应用于该属性的具体数值。例如，color属性和blue值用于将段落文本颜色设置为蓝色。
  2. 类选择器：类选择器可以被用于任何元素，通过为元素添加一个特定的类名来选择它。



.center {
  text-align: center;
}
  1. ID选择器：ID选择器用于选择具有特定ID的元素。ID值在整个文档中应该是唯一的。



#header {
  background-color: yellow;
}
  1. 层叠：当多个样式表作用于同一元素时，具有更具体选择器的样式将覆盖其他样式。
  2. 继承：某些CSS属性（如字体和颜色）会从父元素继承到子元素。
  3. 盒模型：CSS盒模型由四个部分组成：content, padding, border 和 margin。
  4. 布局：CSS提供了多种布局方式，如浮动（float）、定位（position）、flexbox和grid等。



.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 伪类和伪元素：伪类和伪元素可以用于选择特殊状态或位置的元素。



a:hover {
  text-decoration: underline;
}
 
p::first-letter {
  font-size: 200%;
}
  1. 媒体查询：可以使用媒体查询来根据设备屏幕大小或分辨率应用不同的样式。



@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这些是CSS的核心概念，理解这些概念有助于你更好地应用CSS进行网页设计和开发。

- 阅读更多 -
react+antdpro+ts实现企业级项目四：注册页面实现及useEmotionCss的介绍
System
2024-08-23
所有,react native



import React from 'react';
import { Form, Input, Button, Select } from 'antd';
import { useEmotionCss } from 'create-emotion-styled';
 
const { Option } = Select;
 
const RegistrationForm: React.FC = () => {
  const css = useEmotionCss`
    .form-title {
      color: #262626;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 50px;
    }
  `;
 
  return (
    <div className={css}>
      <h2 className="form-title">注册</h2>
      <Form layout="vertical">
        {/* 省略其他表单项的定义 */}
        <Form.Item name="department" label="部门">
          <Select placeholder="请选择部门">
            <Option value="技术部">技术部</Option>
            <Option value="销售部">销售部</Option>
            <Option value="市场部">市场部</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary">注册</Button>
        </Form.Item>
      </Form>
    </div>
  );
};
 
export default RegistrationForm;

这段代码展示了如何在React组件中使用useEmotionCss来定义和使用CSS。它定义了一个简单的注册表单，并为其设置了基本的样式。这个例子使用了create-emotion-styled库来提供CSS样式，这是一个实用的库，可以帮助开发者在React项目中更好地管理样式。

- 阅读更多 -
react使用scss报错解决
System
2024-08-23
所有,react native

为了提供一个精简的解决方案，我们需要先了解具体的错误信息。React 使用 SCSS 报错可能有多种原因，例如配置问题、缺少依赖、语法错误等。以下是一些常见的错误及其解决方法：

  1. 缺少加载器：

    • 错误信息： 通常是 Module parse failed: Unexpected token 或 You may need an appropriate loader to handle this file type。
    • 解决方法： 确保已安装 sass-loader 和 node-sass（或 sass），并在 webpack 配置中添加相应的规则。

  2. 配置问题：

    • 错误信息： 可能是配置文件中的某些设置不正确。
    • 解决方法： 检查 webpack.config.js 或其他配置文件，确保 SCSS 加载器配置正确。

  3. 语法错误：

    • 错误信息： 通常是 SCSS 文件中的语法错误，比如括号不匹配、变量未定义等。
    • 解决方法： 仔细检查 SCSS 文件的语法，修正任何错误。

  4. 未安装依赖：

    • 错误信息： 可能是 Package ... does not satisfy dependencies 或者模块找不到。
    • 解决方法： 确保已经运行 npm install 或 yarn install 安装了所有依赖。

具体解决方案取决于错误的具体信息。如果您能提供具体的错误信息，我可以提供更精确的帮助。

- 阅读更多 -
让交互更加生动！巧用CSS实现鼠标跟随 3D 旋转效果
System
2024-08-23
所有,css3



/* 定义基本的div样式 */
.box {
  width: 100px;
  height: 100px;
  background: #7F589F;
  margin: 50px;
  perspective: 1500px; /* 设置3D效果的视角 */
}
 
/* 鼠标悬停时触发动画 */
.box:hover .card {
  transform: rotateY(360deg); /* 鼠标悬停时旋转360度 */
  transition: transform 1s ease-in-out; /* 动画过渡效果 */
}
 
/* 定义包裹div的样式 */
.card {
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
  transition: transform 1s ease-in-out; /* 初始过渡效果 */
}
 
/* 定义包裹div内部元素的样式 */
.card > div {
  width: 100%;
  height: 100%;
  line-height: 100px;
  text-align: center;
  backface-visibility: hidden; /* 隐藏背面 */
  position: absolute;
}
 
/* 定义正面样式 */
.card .face.front {
  background: #7F589F;
  z-index: 2;
}
 
/* 定义背面样式 */
.card .face.back {
  background: #95D48A;
  transform: rotateY(180deg); /* 将背面旋转180度 */
}

这段代码展示了如何使用CSS创建一个鼠标悬停时的3D旋转效果。.box是最外层的容器，它有一个3D视角，.card是实际旋转的元素，.face定义了两个面，分别是正面和背面，通过悬停.box触发.card的旋转动画。

- 阅读更多 -
7. CSS 网格布局
System
2024-08-23
所有,css

CSS 网格布局是一种强大的布局系统，可以简化并且高效地创建复杂的布局。以下是一个简单的网格布局示例：

HTML:




<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

CSS:




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个相等宽度的列 */
  grid-gap: 10px; /* 设置网格之间的间隙 */
  grid-auto-rows: minmax(100px, auto); /* 设置网格的最小高度为100px，允许自动增长 */
  padding: 10px;
}
 
.item1 { 
  grid-column: 1 / 3; /* item1占据第一列的前两个网格 */
  grid-row: 1;
}
 
.item2 { 
  grid-column: 3; /* item2占据第三列的全部网格 */
  grid-row: 1 / 3;
}
 
.item3 { 
  grid-column: 1;
  grid-row: 2;
}
 
.item4 { 
  grid-column: 2;
  grid-row: 2;
}
 
.item5 { 
  grid-column: 3;
  grid-row: 2;
}

这个示例创建了一个具有三列和两行的网格布局。.item1 占据第一行的前两个网格，.item2 跨越第一列的全部高度并占据第三列，.item3 和 .item4 各自占据第二行的两个网格。这个布局使用了网格线的概念，可以非常灵活地定义网格中项目的位置和大小。

- 阅读更多 -
css水波浪动画效果
System
2024-08-23
所有,flutter

CSS 实现水波浪动画效果可以通过使用关键帧动画和伪元素来完成。以下是一个简单的水波浪动画示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Wave Animation</title>
<style>
  @keyframes wave-animation {
    0% {
      transform: scale(0.3) rotate(0deg);
      opacity: 0.5;
    }
    100% {
      transform: scale(1) rotate(360deg);
      opacity: 0;
    }
  }
 
  .wave {
    width: 200px;
    height: 200px;
    background: #3399FF;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    margin: 100px auto;
  }
 
  .wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: #3399FF;
    border-radius: 50%;
    opacity: 0.5;
    animation: wave-animation 5s linear infinite;
  }
</style>
</head>
<body>
<div class="wave"></div>
</body>
</html>

这段代码中定义了一个 .wave 类，它创建了一个圆形的容器，并使用 ::before 伪元素来创建水波浪的效果。@keyframes wave-animation 定义了水波浪动态改变大小和透明度的动画效果。通过将伪元素的动画设置为无限循环，你可以得到一个持续不断的水波浪动画。

- 阅读更多 -
纯css实现信封效果
System
2024-08-23
所有,css3

要使用纯CSS实现信封效果，可以通过使用CSS的变换和阴影等特性来创造出类似信封的视觉效果。以下是一个简单的例子：

HTML:




<div class="envelope">
  <div class="envelope-content">
    <p>这里是信封内容</p>
  </div>
</div>

CSS:




.envelope {
  width: 300px;
  height: 200px;
  background-color: #f3f3f3;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transform: rotate(-3deg);
}
 
.envelope::before,
.envelope::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #dcdcdc;
  top: 20px;
  left: 30px;
  border-radius: 5px;
  z-index: 1;
}
 
.envelope::before {
  transform: rotate(-2deg);
}
 
.envelope::after {
  top: 60px;
  left: 60px;
  transform: rotate(2deg);
}
 
.envelope-content {
  position: absolute;
  top: 50px;
  left: 40px;
  width: 220px;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  z-index: 2;
}

这段代码创建了一个具有倾斜视角的信封效果，其中.envelope类代表整个信封，其中包含两个伪元素::before和::after来模拟信封的弯曲部分。.envelope-content类用于信封内的内容，确保内容在信封内部显示。

- 阅读更多 -
编程笔记 html5&css&js 054 CSS默认值
System
2024-08-23
所有,html5

在HTML5和CSS中，有许多默认的样式值，这些值由浏览器定义，以确保所有元素在没有额外样式时仍然可见。以下是一些常见的CSS默认值：

  1. 字体大小：16px
  2. 行高：1.1-1.2，这取决于浏览器
  3. 字体：通常是Times New Roman, Georgia, Serif
  4. 边距和填充：0
  5. 元素宽度：auto
  6. 元素高度：auto
  7. 元素边框：none
  8. 元素背景：transparent

以下是一个简单的HTML和CSS示例，演示了这些默认值：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Default Values</title>
<style>
  body {
    font-size: 16px;
    line-height: 1.2;
    font-family: 'Times New Roman', Georgia, Serif;
  }
  p {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
  }
</style>
</head>
<body>
<p>This is a paragraph with default styles.</p>
</body>
</html>

在这个例子中，body 选择器设置了页面的默认字体大小、行高和字体族。p 标签的样式重置了边距、填充、宽度、高度、边框以及背景色，使得p元素在没有其他样式影响时，会显示出浏览器的默认样式。

- 阅读更多 -
Copyright © 2024 Tech Blog
All Right Reserved | 京ICP备19053165号