分类前端技术下的文章

CSS如何设置textarea中的文字被选中时字体变大，没有被选中时字体变小

2024-08-18

在CSS中，可以使用:selection伪类来设置被选中文本的样式。但是，CSS并没有提供基于选中状态变化字体大小的直接方式。你可以通过JavaScript监听select和blur事件来动态改变字体大小。

以下是实现该功能的示例代码：

HTML:




<textarea id="myTextarea">请选择这里的文本</textarea>

CSS:




#myTextarea {
  font-size: 16px; /* 默认字体大小 */
}
 
/* 当文本被选中时的自定义样式 */
#myTextarea:selection {
  color: #fff;
  background: #ff0000; /* 被选中文本的背景色 */
}

JavaScript:




const textarea = document.getElementById('myTextarea');
 
textarea.addEventListener('select', function() {
  this.style.fontSize = '20px'; // 选中时字体变大
});
 
textarea.addEventListener('blur', function() {
  this.style.fontSize = '16px'; // 失去焦点时字体变小
});

这段代码会在用户选择textarea中的文本时将字体大小变为20px，并在文本区域失去焦点时恢复为16px。

css画间距可控制的虚线

2024-08-18

在CSS中，你可以使用border-style: dashed;和border-width以及border-color属性来创建虚线边框。但是，CSS本身不支持直接控制虚线的间距。不过，你可以使用一些技巧来模拟这种效果。

一种方法是使用伪元素来创建自定义的虚线模式。这里是一个例子：




.divider {
  position: relative;
  height: 1px;
  overflow: hidden;
}
 
.divider:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 50%, #000 50%);
  background-size: 10px 1px;
}

HTML:




<div class="divider"></div>

在这个例子中，.divider 类创建了一个容器，其中的伪元素 :before 用来显示虚线。background-size 属性控制虚线的间距和线条粗细。你可以调整background-size的第一个值来改变间距，第二个值改变线的粗细。

uniapp简单实现一个不定高展开收缩组件

2024-08-18

在uniapp中实现一个不定高的展开收缩组件，可以通过改变元素的显示状态来控制其高度。以下是一个简单的示例：




<template>
  <view>
    <view class="collapse" @click="toggle">
      <text>{{ isExpanded ? '收缩' : '展开' }}</text>
    </view>
    <view v-show="isExpanded" class="content">
      这里是可以展开和收缩的内容区域。
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isExpanded: false, // 控制内容区域的显示与隐藏
    };
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>
 
<style>
.collapse {
  padding: 10px;
  background-color: #f0f0f0;
  text-align: center;
  cursor: pointer;
}
.content {
  padding: 10px;
  border: 1px solid #ddd;
  border-top: none;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
</style>

在这个例子中，.collapse 是触发展开和收缩的按钮，.content 是可以展开和收缩的内容区域。通过点击 .collapse 切换 isExpanded 的值，v-show 指令负责根据 isExpanded 的值显示或隐藏 .content 区域。

注意，这里没有设置 .content 区域的固定高度，而是通过 v-show 控制显示与隐藏。不定高的部分会根据内容自动调整。

用HTML + Css3 实现炫酷的输入框效果

2024-08-18

以下是一个使用HTML和CSS3实现炫酷输入框效果的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Input Effect</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f7f7f7;
  }
  .container {
    width: 100%;
    margin: 100px auto;
    text-align: center;
  }
  .input-container {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 50px;
    margin: 20px;
  }
  .input-field {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: transparent;
    border: 1px solid #ccc;
    padding: 0 15px;
    color: #333;
    font-size: 16px;
    caret-color: #333;
  }
  .input-field::-webkit-input-placeholder {
    color: transparent;
  }
  .input-field:-moz-placeholder { /* Firefox 18- */
    color: transparent;
  }
  .input-field::-moz-placeholder { /* Firefox 19+ */
    color: transparent;
  }
  .input-field:-ms-input-placeholder {
    color: transparent;
  }
  .placeholder-text {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    color: #999;
    padding: 0 15px;
    font-size: 16px;
    transition: all 0.2s;
    transform: translateY(-25px);
  }
  .input-container:hover .placeholder-text {
    transform: translateY(0);
    cursor: text;
  }
  .underline {
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #333;
    transition: all 0.2s;
    transform: scaleX(0);
  }
  .input-container:hover .underline {
    transform: scaleX(1);
  }
</style>
</head>
<body>
 
<div class="container">
  <div class="input-container">
    <input class="input-field" type="text" placeholder="Enter your text">
    <div class="placeholder-text">Username</div>
    <div class="underline"></div>
  </div>
</div>
 
</body>
</html>

这段代码展示了如何创建一个带有动画效果的输入框。当鼠标悬停在输入框上时，占位符会滑动并显示，同时底部的下划线会出现。这是一个简单的示例，可以根据需要进行样式调整和功能添加。

css3 animation 实现点绕圈转圈效果

2024-08-18

要使用CSS3动画实现点围绕圆形轨迹移动的效果，可以使用@keyframes规则来定义动画，并使用animation属性应用到点上。以下是实现这种效果的示例代码：

HTML:




<div class="container">
  <div class="point"></div>
</div>

CSS:




.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #000;
  border-radius: 50%;
  margin: 50px;
}
 
.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  animation: rotate 5s linear infinite;
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}

在这个例子中，.point是要绕着.container的边缘移动的点，@keyframes rotate定义了点如何移动。translateX(100px)将点移到圆的中心，然后通过rotate应用额外的旋转，使得点看起来像是在圆内旋转。动画设置为无限循环，每5秒完成一次完整旋转。

css设置滚动条样式

2024-08-18

CSS设置滚动条样式的方法有多种。下面是两种常见的实现方式：

方法一：使用属性选择器和伪元素实现自定义样式




/* 滚动条轨道样式 */
::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度 */
}
 
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #888; /* 设置滑块背景颜色 */
  border-radius: 4px; /* 设置滑块圆角 */
}
 
/* 滚动条轨道hover状态样式 */
::-webkit-scrollbar-track:hover {
  background-color: #f1f1f1; /* 设置轨道hover状态时的背景颜色 */
}
 
/* 滚动条滑块hover状态样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 设置滑块hover状态时的背景颜色 */
}

方法二：使用JavaScript通过操作DOM实现自定义样式（需要注意的是，此方法可能会影响性能，所以建议使用CSS样式自定义）




<style>
  /* 滚动条轨道样式 */
  .scrollbar-container::-webkit-scrollbar {
    width: 8px; /* 设置滚动条宽度 */
  }
 
  /* 滚动条滑块样式 */
  .scrollbar-container::-webkit-scrollbar-thumb {
    background-color: #888; /* 设置滑块背景颜色 */
    border-radius: 4px; /* 设置滑块圆角 */
  }
 
  /* 滚动条轨道hover状态样式 */
  .scrollbar-container::-webkit-scrollbar-track:hover {
    background-color: #f1f1f1; /* 设置轨道hover状态时的背景颜色 */
  }
 
  /* 滚动条滑块hover状态样式 */
  .scrollbar-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 设置滑块hover状态时的背景颜色 */
  }
</style>
 
<div class="scrollbar-container">
  <!-- 添加需要滚动的内容 -->
</div>

这些代码片段展示了两种常见的CSS设置滚动条样式的方法。第一种方法只需使用CSS样式就能实现，而第二种方法则需要JavaScript操作DOM，但性能可能受到影响，所以建议优先考虑使用第一种方法。

css的font字体样式引入

2024-08-18

在CSS中，可以通过多种方式引入字体样式。以下是几种常见的方法：

使用Google Fonts：
Google提供了一个免费的字体库，你可以从中选择字体并获取相应的CSS链接。将提供的CSS链接添加到你的HTML文件中，就可以在你的网站上使用这些字体了。




<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

然后在CSS文件中使用这个字体：




body {
  font-family: 'Roboto', sans-serif;
}

使用@font-face规则：
如果你想使用自己的字体文件，你可以使用@font-face规则。首先，将字体文件放在你的服务器上，然后在CSS文件中使用@font-face规则引入它。




@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff') format('woff');
}
 
body {
  font-family: 'MyCustomFont', sans-serif;
}

使用CDN服务：
如果你不想使用Google Fonts，也可以使用其他字体服务的CDN。例如，使用Adobe Fonts CDN：




<link rel="stylesheet" href="https://use.typekit.net/your-kit-id.css">

你需要替换your-kit-id为你的个人ID。

直接在HTML中使用<style>标签：
如果你的网页很小，只有几个特定的样式需要设置，你可以在HTML文件中使用<style>标签直接设置字体样式。




<style>
  body {
    font-family: 'Roboto', sans-serif;
  }
</style>

以上就是在CSS中引入字体样式的几种方法。

WEB前端网页设计 CSS 网页布局

2024-08-18

在CSS中实现一个简单的网页布局，可以使用CSS Flexbox或Grid布局系统。以下是一个使用Flexbox布局的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Layout</title>
<style>
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
 
  header, footer {
    background: #f2f2f2;
    padding: 1em;
    text-align: center;
  }
 
  main {
    flex: 1;
    padding: 2em;
  }
 
  .content {
    display: flex;
    justify-content: space-around;
  }
 
  .sidebar {
    width: 20%;
    background: #e0e0e0;
    padding: 1em;
  }
 
  .main-content {
    width: 60%;
    padding: 1em;
  }
</style>
</head>
<body>
<div class="container">
  <header>Header</header>
  <main>
    <div class="content">
      <div class="sidebar">Sidebar</div>
      <div class="main-content">Main Content</div>
    </div>
  </main>
  <footer>Footer</footer>
</div>
</body>
</html>

这个示例创建了一个带有头部、尾部、侧边栏和主要内容区的简单网页布局。头部和尾部占据固定的空间，主要内容区左右被侧边栏包围。通过Flexbox的flex-direction: column属性，容器内的子元素以列的形式排列，flex: 1使得main区域可以根据可用空间自动伸缩。

让css只在当前组件内生效与如何做样式穿透

2024-08-18

要让CSS只在当前组件内生效，可以使用CSS模块或者Shadow DOM。

CSS模块：

在CSS文件中使用.css扩展名，并在<style>标签中添加module属性。




<!-- MyComponent.vue -->
<template>
  <div :class="$style.red">红色文本</div>
</template>
 
<style module>
.red {
  color: red;
}
</style>

Shadow DOM：

在Web组件中使用Shadow DOM可以创建一个隔离的DOM树，其样式只应用于这个树内部。




// MyComponent.js
export default {
  mounted() {
    const shadow = this.$el.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<style>
      .red { color: red; }
    </style><div class="red">红色文本</div>`;
  }
}

如何做样式穿透：

有些时候，我们需要影响子组件内部的DOM元素，这就需要进行样式穿透。

使用>>>、/deep/或::v-deep选择器可以穿透单层级的Shadow DOM。




/* 使用/deep/ */
.deep-red /deep/ .red {
  color: red;
}
 
/* 使用>>> */
.deep-red >>> .red {
  color: red;
}
 
/* 使用::v-deep (Vue-specific) */
.deep-red ::v-deep .red {
  color: red;
}

请注意，::v-deep是一个Vue特定的语法糖，在其他框架中可能有不同的实现方式。