分类前端技术下的文章

2024-08-22

要使用span标签并将其display属性设置为inline-block，并使文字均匀排开，可以通过设置text-align: justify属性来实现。这会让inline-block元素中的文本两端对齐，看起来就像均匀排开的一样。

下面是一个简单的例子：

HTML:




<div class="container">
  <span>第一个文本</span>
  <span>第二个文本</span>
  <span>第三个文本</span>
</div>

CSS:




.container span {
  display: inline-block;
  text-align: justify;
  margin-right: 10px; /* 可选，为了在span之间添加间隔 */
}
 
/* 最后一个span不需要间隔，所以排除 */
.container span:last-child {
  margin-right: 0;
}
 
/* 使用伪元素为最后一个span后面填充空间，以确保对齐 */
.container span:last-child:before {
  content: '';
  display: inline-block;
  width: 100%;
}

在这个例子中，每个span元素都是inline-block，并且使用了text-align: justify，这使得每个span看起来的宽度是均匀分布的。通过在最后一个span添加一个伪元素，并给它设置width: 100%，可以确保最后一个span后面有额外的空间，这样前面的文本也能够两端对齐。

- 阅读更多 -

小程序封装加载动画

System

2024-08-22

所有,css3

在微信小程序中，我们可以通过自定义组件的方式来封装加载动画。以下是一个简单的加载动画组件的实现：

首先，在小程序的目录中创建一个新的文件夹 components，然后在这个文件夹中创建一个新的文件 loading.wxml：




<view class="weui-loading">
  <view class="weui-loading__dot"></view>
  <view class="weui-loading__dot"></view>
  <view class="weui-loading__dot"></view>
  <view class="weui-loading__dot"></view>
  <view class="weui-loading__dot"></view>
</view>

接下来，在 loading.wxss 文件中定义样式：




.weui-loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.weui-loading__dot {
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 50%;
  margin: 5px;
  opacity: 0.8;
  animation: weui-loading-dot 1.2s infinite step-end;
}
 
@keyframes weui-loading-dot {
  0%, 20%, 60%, 100% { opacity: 0.8; }
  40% { opacity: 1; }
  80% { opacity: 0.8; }
}

最后，在需要使用加载动画的页面的 JSON 配置文件中引入自定义组件：




{
  "usingComponents": {
    "loading": "/components/loading/loading"
  }
}

在页面的 WXML 文件中使用：




<loading></loading>

这样就可以在页面中显示加载动画了。如果需要在代码中控制加载动画的显示或隐藏，可以在 WXML 中为加载动画添加 hidden 属性，并在页面的 JS 文件中控制 hidden 属性的值。

- 阅读更多 -

用HTML+CSS+JS搭建一个超简单的静态实用网站页面

System

2024-08-22

所有,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>Simple Static Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        header, footer {
            background-color: #f2f2f2;
            padding: 20px 0;
            text-align: center;
        }
        nav {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }
        nav a {
            color: white;
            text-decoration: none;
            padding: 0 10px;
        }
        main {
            flex: 1;
            padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Simple Website</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    <main>
        <h2>Main Content Goes Here</h2>
        <p>This is where the main content of the page goes.</p>
    </main>
    <footer>
        <p>Copyright &copy; 2023 Simple Website</p>
    </footer>
    <script>
        // JavaScript code goes here
    </script>
</body>
</html>

这个示例提供了一个简单的网站页面骨架，可以根据实际需求添加更多的内容和样式。

- 阅读更多 -

若依框架---如何实现翻页保留选择？如何调整首页左侧菜单栏宽度？

System

2024-08-22

所有,css3

在若依框架中，实现翻页时保持选择通常涉及到前端的状态管理。若依框架内置了Vue.js作为前端框架，你可以使用Vue.js的状态管理工具Vuex或者使用组件内的data和computed属性来实现。

以下是一个简单的例子，使用Vuex来实现保持选择：

定义Vuex store，并在store中维护状态。




// store.js
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    selectedItem: null
  },
  mutations: {
    setSelectedItem(state, item) {
      state.selectedItem = item;
    }
  },
  actions: {
    selectItem({ commit }, item) {
      commit('setSelectedItem', item);
    }
  }
});

在组件中使用Vuex的状态和动作。




// MyComponent.vue
<template>
  <div>
    <select v-model="selected">
      <option v-for="item in items" :key="item.id" :value="item">{{ item.name }}</option>
    </select>
  </div>
</template>
 
<script>
import { mapState, mapActions } from 'vuex';
 
export default {
  computed: {
    ...mapState({
      selected: state => state.selectedItem
    }),
    items: () => [/* 你的数据数组 */]
  },
  watch: {
    selected: {
      handler(newValue) {
        this.selectItem(newValue);
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions({
      selectItem: 'selectItem'
    })
  }
};
</script>

调整左侧菜单栏宽度：

找到左侧菜单栏对应的组件。
修改该组件的CSS样式，调整宽度。

例如：




/* LeftMenu.vue 或相关样式文件 */
<style scoped>
.menu-container {
  width: 200px; /* 调整为你想要的宽度 */
}
</style>

请注意，上述代码示例是基于假设的若依框架和Vuex版本。具体实现可能因版本差异而有所不同。如果你使用的是不同的前端框架或状态管理库，请根据实际情况调整代码。

- 阅读更多 -

css实现元素吸顶效果

System

2024-08-22

所有,css

要使用CSS实现吸顶效果，可以使用position: sticky;属性。sticky 定位是一种混合模式，它基于用户的滚动位置相对于容器。一开始被当作relative定位处理，但当元素到达某个阈值时（如顶部窗口边缘），它将固定在设定的位置，就像fixed定位一样。

以下是一个实现吸顶效果的简单示例：

HTML:




<div class="header">Header</div>
<div class="content">
  <!-- 吸顶后要显示的内容 -->
  <div class="sticky">Sticky Content</div>
  <!-- 其他内容 -->
</div>

CSS:




.header {
  background: #ccc;
  padding: 10px;
}
 
.content {
  height: 200px; /* 或者更高的值，以确保有滚动条 */
  overflow: auto; /* 使内容可滚动 */
}
 
.sticky {
  position: -webkit-sticky; /* 针对Safari浏览器的兼容性 */
  position: sticky;
  top: 0; /* 设置吸顶的位置 */
  background: #fff;
  padding: 10px;
  margin-top: 20px; /* 避免紧贴在页面顶部 */
}

在这个例子中，.sticky 元素在 .content 容器滚动到一定程度后会固定在顶部，不再随着滚动条滚动。

- 阅读更多 -

css实现背景渐变叠加

System

2024-08-22

所有,css

CSS中实现背景渐变叠加可以使用linear-gradient函数，并通过background属性的叠加来实现。以下是一个简单的例子，演示如何实现两个渐变背景的叠加：




.gradient-overlay {
  /* 第一个渐变背景 */
  background: linear-gradient(to right, red, orange);
  
  /* 第二个渐变背景，叠加在第一个渐变背景之上 */
  background: linear-gradient(to right, green, blue), 
              linear-gradient(to right, red, orange);
  
  /* 设置两个渐变背景的位置，使其相互重叠 */
  background-position: left, right;
  
  /* 设置渐变背景的大小，使其分别填充整个元素 */
  background-size: 100% 100%, 100% 100%;
  
  /* 设置元素的宽高 */
  width: 300px;
  height: 200px;
}

HTML部分：




<div class="gradient-overlay"></div>

在这个例子中，.gradient-overlay类定义了一个div，它的背景是两个渐变背景叠加的结果。第一个渐变背景是从左到右的红色到橙色，第二个渐变背景是从左到右的绿色到蓝色。通过调整background-position属性，可以控制两个渐变背景的相对位置。

- 阅读更多 -

CSS：弹性布局（display:flex）

System

2024-08-22

所有,css

CSS的弹性布局（Flexible Layout）是一种现代化的布局方式，可以简便高效地处理容器内部元素的排列、对齐和分配空间。

以下是一个简单的弹性布局的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex; /* 设定为弹性布局 */
  flex-direction: row; /* 设定主轴方向为水平方向 */
  justify-content: space-around; /* 设定项目沿主轴分布的方式 */
  align-items: center; /* 设定项目沿交叉轴分布的方式 */
  height: 100px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 项目间距 */
  padding: 10px; /* 项目内填充 */
  background-color: coral; /* 项目背景颜色 */
  color: white; /* 项目文字颜色 */
  font-size: 16px; /* 项目文字大小 */
}

这段代码会创建一个高度为100px的容器，其中包含三个水平排列的项目，每个项目都有自己的背景色和文字，并且这三个项目会平均分布在容器中，两边有些距离。

- 阅读更多 -

第05章 CSS 定位布局

System

2024-08-22

所有,css

CSS 定位布局主要是通过 position 属性来实现的，它有以下几个值：

static：默认值，没有定位。
relative：相对定位，相对于其正常位置进行定位。
absolute：绝对定位，相对于最近的非 static 定位的祖先元素进行定位。
fixed：固定定位，相对于浏览器窗口进行定位。
sticky：粘性定位，根据用户的滚动位置在相对和固定定位之间切换。

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  .relative {
    position: relative;
    left: 30px;
    top: 20px;
  }
  
  .absolute {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }
  
  .fixed {
    position: fixed;
    left: 50px;
    top: 50px;
  }
  
  .sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* 粘性定位的位置 */
    background-color: yellow; /* 粘性定位的背景颜色 */
    border: 2px solid black; /* 边框 */
    padding: 50px; /* 内边距 */
    font-size: 20px; /* 字体大小 */
  }
</style>
</head>
<body>
 
<p>相对定位:</p>
<div class="relative">我是相对定位的元素。</div>
 
<p>绝对定位:</p>
<div class="absolute">我是绝对定位的元素。</div>
 
<p>固定定位:</p>
<div class="fixed">我是固定定位的元素。</div>
 
<p>粘性定位:</p>
<div class="sticky">我是粘性定位的元素。</div>
 
</body>
</html>

在这个例子中，我们创建了四个 div 元素，每个元素都应用了不同的定位方式。其中，sticky 类用于演示粘性定位，当用户滚动页面时，该元素会根据用户的滚动位置在相对和固定定位之间切换。其余三个类展示了常规的定位用法。

- 阅读更多 -

[CSS]了解REM移动端适配方案，给后辈的一点建议

System

2024-08-22

所有,css

REM是一种CSS单位，相对于根元素(即html元素)的字体大小。这使得REM适配方案在移动端适配上有很大的优势。

以下是一个基本的REM适配方案：

设置HTML的根字体大小。
使用媒体查询来根据屏幕宽度调整根字体大小。
使用REM单位来设置元素的宽度、高度、字体大小等。

示例代码：




html {
    font-size: 16px; /* 默认根字体大小 */
}
 
@media (min-width: 400px) {
    html {
        font-size: 20px; /* 当屏幕宽度至少为400px时，根字体大小调整为20px */
    }
}
 
/* 使用REM设置元素大小 */
.element {
    width: 10rem;   /* 相当于10*根字体大小 */
    height: 5rem;   /* 相当于5*根字体大小 */
    font-size: 1.5rem; /* 相当于1.5*根字体大小 */
}

这样，不同屏幕大小的设备都可以通过调整根字体大小来实现适配，保证了元素的尺寸和字体大小都能正常显示。

- 阅读更多 -

css实现鼠标悬停时元素的显示与隐藏

System

2024-08-22

所有,css

在CSS中，可以使用:hover伪类选择器来实现鼠标悬停时元素的显示与隐藏。这通常结合使用display属性或visibility属性来完成。

使用display属性，可以设置none来隐藏元素，设置block、inline或inline-block等来显示元素。

使用visibility属性，可以设置hidden来隐藏元素，但保留其在页面上的空间，设置visible来显示元素。

以下是一个使用display属性实现的示例：

HTML:




<div class="container">
  鼠标悬停我试试
  <div class="hover-content">
    我是要显示的内容
  </div>
</div>

CSS:




/* 初始状态下内容是隐藏的 */
.hover-content {
  display: none;
}
 
/* 当鼠标悬停在父容器上时，显示内容 */
.container:hover .hover-content {
  display: block;
}

以下是使用visibility属性实现的示例：

HTML:




<div class="container">
  鼠标悬停我试试
  <div class="hover-content">
    我是要显示的内容
  </div>
</div>

CSS:




/* 初始状态下内容是隐藏的 */
.hover-content {
  visibility: hidden;
}
 
/* 当鼠标悬停在父容器上时，显示内容 */
.container:hover .hover-content {
  visibility: visible;
}

在这两个示例中，.hover-content元素默认是隐藏的。当鼠标悬停在.container元素上时，.hover-content元素的显示状态会根据选择的属性进行切换。

- 阅读更多 -