分类前端技术下的文章

2024-08-17

要实现原生img图片标签的图片自适应缩放且不变形，可以通过设置img的width和height属性为百分比值，并且确保图片容器的宽高比与图片本身的宽高比一致。此外，可以使用CSS样式来限制图片的最大宽度和高度，以保证图片不会超出容器。

以下是一个简单的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>
    .img-container {
        width: 100%; /* 容器宽度为100% */
        height: auto; /* 高度自适应 */
        overflow: hidden; /* 超出容器的图片部分隐藏 */
        text-align: center; /* 图片居中 */
    }
    img {
        max-width: 100%; /* 图片最大宽度为100% */
        height: auto; /* 高度自适应 */
        display: inline-block; /* 使img可以设置居中对齐 */
    }
</style>
</head>
<body>
<div class="img-container">
    <img src="path_to_your_image.jpg" alt="描述文字">
</div>
</body>
</html>

在这个例子中，.img-container 是图片的容器，它的宽度被设置为100%，高度自适应。img 标签的max-width 和 width 都被设置为100%，这确保图片会根据容器的宽度进行自适应缩放，而height 被设置为auto，保证图片的高度不会超过原始宽高比。通过这种方式，图片在不同设备上查看时始终保持原始的宽高比，不会变形。

- 阅读更多 -

ul li div 自动换行

System

2024-08-17

所有,css3

要使ul li div自动换行，可以通过CSS样式来实现。以下是一个简单的例子：

HTML:




<ul class="list-container">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <!-- 更多的li元素 -->
</ul>

CSS:




.list-container li {
  display: block; /* 使li块级元素 */
  float: left; /* 让li元素横向排列 */
  clear: left; /* 防止li内部div的影响 */
  width: 100%; /* 让li占满整行宽度 */
}
 
.list-container li div {
  border: 1px solid #000; /* 为了清晰地显示换行效果 */
  margin-bottom: 5px; /* 为了在div之间有间隔 */
}

在这个例子中，ul的直接子元素li被设置为块级元素并且浮动到左边。每个li占据一整行，li内的div会根据可用宽度自动换行。如果需要更多的控制，可以使用Flexbox或Grid布局系统来代替浮动。

- 阅读更多 -

用html制作一个元旦跨年的代码

System

2024-08-17

所有,css3

元旦跨年的网页可以使用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 {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
  .greeting {
    text-align: center;
    color: #333;
  }
  .year {
    font-size: 24px;
  }
</style>
</head>
<body>
 
<div class="greeting">
  <p>新年快乐！</p>
  <h1 class="year">2023/2024</h1>
</div>
 
</body>
</html>

这段代码创建了一个简单的网页，在页面中央居中显示了“新年快乐！”和跨年的年份“2023/2024”。背景颜色为浅灰色，字体为Arial。通过CSS样式，可以自定义文本的颜色、字体大小和页面的布局。

- 阅读更多 -

Vue3.0实现图片预览组件（媒体查看器）

System

2024-08-17

所有,css3




<template>
  <div class="image-viewer" v-if="isShow">
    <div class="image-wrapper" :style="{ backgroundImage: `url(${currentImage})` }"></div>
    <div class="image-index" v-if="imageList.length > 1">{{ currentIndex + 1 }} / {{ imageList.length }}</div>
    <div class="image-toolbar">
      <button @click="prevImage">上一张</button>
      <button @click="nextImage">下一张</button>
      <button @click="closeViewer">关闭</button>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    imageList: Array,
    default: () => []
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  computed: {
    isShow() {
      return this.imageList.length > 0;
    },
    currentImage() {
      return this.imageList[this.currentIndex];
    }
  },
  methods: {
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.imageList.length;
    },
    prevImage() {
      this.currentIndex = (this.currentIndex - 1 + this.imageList.length) % this.imageList.length;
    },
    closeViewer() {
      this.$emit('close');
    }
  }
};
</script>
 
<style scoped>
.image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
}
.image-wrapper {
  width: 80%;
  height: 80%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.image-index {
  text-align: center;
  color: #fff;
  margin-top: 20px;
}
.image-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.image-toolbar button {
  margin: 0 10px;
}
</style>

这个代码实例提供了一个简单的Vue 3.0图片预览组件，它可以显示一个图片列表中的当前图片，并允许用户查看前一张和下一张图片，同时提供了关闭预览功能。这个组件使用了计算属性和方法来处理图片索引和预览逻辑，并通过CSS样式为图片预览提供了一个简洁的用户界面。

- 阅读更多 -

css3 transition的各种ease效果

System

2024-08-17

所有,css3

CSS3的transition-timing-function属性用来指定过渡效果的速度曲线，也就是动画变化的速度。最常用的值包括ease, ease-in, ease-out, ease-in-out, linear以及cubic-bezier。

ease：默认值，动画以较慢的速度开始和结束。
ease-in：动画以较慢的速度开始。
ease-out：动画以较慢的速度结束。
ease-in-out：动画以较慢的速度开始和结束。
linear：动画速度以常数速度进行。
cubic-bezier：允许您定义自己的速度曲线。

例如，如果你想要一个元素的宽度在hover时发生变化，并且希望这个变化过程是“缓进缓出”的，你可以这样写CSS：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}
 
div:hover {
  width: 200px;
}

这段代码定义了一个div元素，在hover时，它的宽度会在1秒内从100px变到200px，并且变化的速度会先加快后减慢。

- 阅读更多 -

flex弹性布局子元素内容超出盒子容器宽度问题

System

2024-08-17

所有,css3

在Flex布局中，如果子元素的内容超出了其父容器的宽度，可以通过设置overflow属性来处理。如果你希望内容可以滚动查看，可以设置overflow: auto或者overflow: scroll。

以下是一个简单的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">
    这里是内容超出父容器宽度的示例文本内容这里是内容超出父容器宽度的示例文本内容
  </div>
</div>

CSS:




.flex-container {
  display: flex;
  width: 200px; /* 设置父容器宽度 */
  height: 100px; /* 设置父容器高度 */
  background-color: lightblue;
}
 
.flex-item {
  flex: 1;
  overflow: auto; /* 添加滚动条 */
  /* 或者使用 'overflow: scroll;' 始终显示滚动条 */
}

在这个例子中，.flex-item 是一个子元素，其内容超出了 .flex-container 的宽度。通过设置 overflow: auto;，当内容超出 .flex-item 的宽度时，会在需要的时候显示滚动条。

- 阅读更多 -

CSS设置字体

System

2024-08-17

所有,css3

在CSS中设置字体可以使用font-family属性。你可以指定一系列的字体作为备选，以防第一个字体无法使用。当浏览器无法找到指定的字体时，它会尝试使用列表中的下一个字体。

以下是设置字体的CSS代码示例：




p {
  font-family: "Helvetica", "Arial", sans-serif;
}

在这个例子中，如果系统中没有安装Helvetica字体，浏览器会尝试使用Arial字体。如果Arial也不可用，则会使用sans-serif默认字体。

你也可以使用@font-face规则来指定Web字体，这样用户的计算机上就可以显示这些字体，即使它们没有在本地安装。




@font-face {
  font-family: "MyCustomFont";
  src: url("https://www.example.com/fonts/my-custom-font.woff2") format("woff2"),
       url("https://www.example.com/fonts/my-custom-font.woff") format("woff");
}
 
p {
  font-family: "MyCustomFont", "Helvetica", "Arial", sans-serif;
}

在这个例子中，我们首先定义了一个自定义的字体"MyCustomFont"，然后在需要使用这个字体的元素上应用它。如果自定义字体无法加载，浏览器会按照指定的顺序尝试使用后续的字体。

- 阅读更多 -

antd modal对话框拖拽进行放大缩小

System

2024-08-17

所有,css3

Ant Design（以下简称AntD）的Modal组件本身不支持拖拽进行放大缩小，但你可以使用第三方库如rc-drag来实现拖拽功能，并结合AntD的Modal组件。

首先，安装rc-drag：




npm install rc-drag

然后，使用rc-drag实现Modal对话框的拖拽功能：




import React from 'react';
import { Modal } from 'antd';
import Draggable from 'rc-draggable';
 
const DraggableModal = (props) => {
  const { title, visible, onOk, onCancel, ...restProps } = props;
 
  return (
    <Draggable>
      <Modal
        title={title}
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
        {...restProps}
      />
    </Draggable>
  );
};
 
export default DraggableModal;

使用DraggableModal组件时，只需将其作为一个普通的AntD Modal使用即可，rc-drag会为其添加拖拽功能。




import React from 'react';
import { Button } from 'antd';
import DraggableModal from './DraggableModal';
 
class App extends React.Component {
  state = {
    modalVisible: false,
  };
 
  showModal = () => {
    this.setState({ modalVisible: true });
  };
 
  hideModal = () => {
    this.setState({ modalVisible: false });
  };
 
  render() {
    return (
      <>
        <Button type="primary" onClick={this.showModal}>
          打开可拖拽的Modal
        </Button>
        <DraggableModal
          title="可拖拽的Modal"
          visible={this.state.modalVisible}
          onOk={this.hideModal}
          onCancel={this.hideModal}
        >
          <p>Modal的内容...</p>
        </DraggableModal>
      </>
    );
  }
}
 
export default App;

以上代码实现了一个可拖拽的Modal对话框。用户可以通过点击按钮打开Modal，并且可以通过拖拽对话框的标题栏来移动对话框位置。这个例子只是一个简单的实现，你可以根据自己的需求进一步扩展和优化拖拽功能。

- 阅读更多 -

CSS3：深度解析与实战应用

System

2024-08-17

所有,css3

CSS3是CSS（层叠样式表）的最新版本，添加了许多新特性，如阴影、渐变、变换等。以下是一些CSS3的关键特性和实例代码：

阴影（Box Shadow & Text Shadow）




div {
  box-shadow: 10px 10px 5px #888888;
}
 
span {
  text-shadow: 2px 2px 2px #888888;
}

渐变（Gradients）




div {
  background: linear-gradient(to right, red , yellow);
}

2D/3D变换（Transformations）




div {
  transform: rotate(45deg); /* 2D 旋转45度 */
}
 
div {
  transform: translate3d(20px, 20px, 20px); /* 3D 位置移动 */
}

动画（Animations）




@keyframes myAnimation {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: myAnimation;
  animation-duration: 5s;
}

圆角（Border Radius）




div {
  border-radius: 25px;
}

多列布局（Multi-column Layout）




div {
  column-count: 3;
}

这些是CSS3的基本特性，实际应用中可以根据项目需求和浏览器支持情况选择和组合使用。

- 阅读更多 -

纯html+css实现思维导图

System

2024-08-17

所有,css3

使用纯HTML和CSS实现简单的思维导图，可以通过使用无序列表 <ul> 和列表项 <li> 来构建树形结构。以下是一个基本的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>思维导图</title>
<style>
  ul {
    list-style-type: none;
  }
  ul {
    position: relative;
    padding-left: 20px;
  }
  ul li {
    position: relative;
    margin-bottom: 10px;
  }
  ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
  }
  ul li:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    bottom: 0;
    width: 1px;
    background-color: black;
  }
  ul li:last-child:after {
    background-color: transparent;
  }
</style>
</head>
<body>
<ul>
  <li>思维导图1</li>
  <li>思维导图2
    <ul>
      <li>子节点1</li>
      <li>子节点2
        <ul>
          <li>叶子节点1</li>
          <li>叶子节点2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>思维导图3</li>
</ul>
</body>
</html>

这个示例提供了一个简单的思维导图结构，你可以根据需要添加更多的层级和内容。CSS样式使用了伪元素 :before 和 :after 来创建节点和连接线的样式，实现了基本的思维导图布局。

- 阅读更多 -