分类前端技术下的文章

2024-08-09

以下是一个简单的HTML实现水平导航栏的例子：




<!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.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  ul.navbar li {
    float: left;
  }
 
  ul.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  ul.navbar li a:hover {
    background-color: #111;
  }
</style>
</head>
<body>
 
<ul class="navbar">
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码定义了一个简单的水平导航栏，使用了无序列表<ul>来创建导航项，并通过CSS进行样式化。每个导航项都浮动到左边，使得它们水平排列。悬停时会改变背景颜色以提供视觉反馈。

- 阅读更多 -

fastadmin后台登录页修改

System

2024-08-09

所有,css3

要修改FastAdmin后台登录页面，你可以按照以下步骤进行：

找到后台登录视图文件。通常这个文件位于application/admin/view/login/index.html。
直接编辑这个文件，使用HTML/CSS/JavaScript来修改登录页面的布局或者行为。
如果需要修改逻辑，可以在对应的控制器中找到登录方法，例如application/admin/controller/Login.php，修改PHP代码来实现新的登录逻辑。
清除FastAdmin的模板缓存，确保更改生效。可以在后台清理模板缓存，或者直接删除runtime/cache目录下的相关缓存文件。

以下是一个简单的示例，展示如何修改登录页面的标题：

编辑application/admin/view/login/index.html文件，找到<title>标签，并修改其中的文本。




<!-- 原始标题 -->
<title>FastAdmin后台登录</title>
 
<!-- 修改后的标题 -->
<title>你的后台登录页面</title>

清除缓存，可以通过后台功能或直接删除缓存文件。

请确保在修改后台登录页面时不要破坏现有的功能和安全性。如果你不熟悉前端和后端的技术，建议在修改后进行充分的测试。

- 阅读更多 -

vue分辨率自适应不同版本的分辨率排雷和出错

System

2024-08-09

所有,css3

在Vue中实现分辨率自适应，通常涉及到样式和组件布局的调整。以下是一个简单的例子，展示如何使用CSS媒体查询来适配不同分辨率的屏幕。




<template>
  <div id="app">
    <header>头部</header>
    <main>
      <sidebar v-if="isSidebarVisible">侧边栏</sidebar>
      <content>内容</content>
    </main>
    <footer>底部</footer>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isSidebarVisible: true
    };
  },
  created() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
    this.handleResize(); // 初始化时检查
  },
  destroyed() {
    // 清理监听器
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 根据窗口宽度判断侧边栏是否显示
      this.isSidebarVisible = window.innerWidth > 1024;
    }
  }
};
</script>
 
<style lang="scss">
@media screen and (max-width: 1024px) {
  #app main {
    flex-direction: column;
 
    sidebar {
      display: none; // 小于1024px时隐藏侧边栏
    }
  }
}
 
@media screen and (min-width: 1025px) {
  #app main {
    display: flex;
 
    sidebar {
      width: 200px; // 大于1024px时显示侧边栏，并设置宽度
    }
    content {
      flex-grow: 1;
    }
  }
}
 
// 其他样式规则...
</style>

在这个例子中，我们使用了Vue的生命周期钩子来监听窗口大小的变化，并据此设置isSidebarVisible的值。在样式部分，我们使用了CSS媒体查询来根据屏幕宽度决定是否显示侧边栏以及它们的布局。这样，应用就可以在不同分辨率的设备上提供良好的自适应体验。

- 阅读更多 -

CSS 实现input自定义样式--文本框

System

2024-08-09

所有,css3

要使用CSS为文本框实现自定义样式，你可以通过为input元素设置CSS规则来实现。以下是一个简单的例子，演示如何为文本框设置自定义的背景颜色、边框和圆角。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Input Style</title>
<style>
  input[type="text"] {
    background-color: #f0f0f0; /* 背景色 */
    border: 1px solid #ccc; /* 边框颜色 */
    border-radius: 4px; /* 圆角 */
    padding: 8px 15px; /* 内边距 */
    font-size: 16px; /* 字号 */
    transition: border-color 0.3s; /* 边框颜色变化过渡 */
  }
 
  input[type="text"]:focus {
    border-color: #4A90E2; /* 聚焦时的边框颜色 */
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); /* 聚焦时的阴影效果 */
  }
</style>
</head>
<body>
 
<input type="text" placeholder="请输入内容">
 
</body>
</html>

这段代码定义了一个普通状态下的文本框样式和一个聚焦状态下的样式。当文本框获得焦点时，边框颜色会变化，并且会有一个轻微的阴影效果。这些样式都可以根据你的设计需求进行自定义调整。

- 阅读更多 -

CSS3Buttons: 使用纯CSS创建美观的按钮样式

System

2024-08-09

所有,css3




/* 定义基础按钮样式 */
.button {
  display: inline-block;
  text-decoration: none;
  color: #FFF;
  background-color: #4285F4;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
 
/* 鼠标悬停时改变背景颜色 */
.button:hover {
  background-color: #357AE8;
}
 
/* 定义一个小按钮，并覆盖基础按钮的样式 */
.button-small {
  padding: 5px 10px;
  background-color: #5cb85c;
  transition: background-color 0.2s;
}
 
/* 鼠标悬停时改变小按钮的背景颜色 */
.button-small:hover {
  background-color: #449D43;
}
 
/* 定义一个具有错误提示色彩的按钮 */
.button-danger {
  background-color: #F44336;
}
 
/* 鼠标悬停时改变错误按钮的背景颜色 */
.button-danger:hover {
  background-color: #D32F2F;
}
 
/* 应用到HTML元素 */
<a href="#" class="button">默认按钮</a>
<a href="#" class="button button-small">小按钮</a>
<a href="#" class="button button-danger">危险按钮</a>

这个代码实例展示了如何使用CSS创建不同样式的按钮。.button 类定义了基本的按钮样式，.button-small 类定义了一个较小的按钮，并覆盖了基本样式，.button-danger 类用于创建一个具有警告色彩的按钮。通过CSS的类继承和组合特性，可以轻松创建不同的按钮风格。

- 阅读更多 -

css 父元素高度自适应，子元素高度跟随父元素自适应，怎么写

System

2024-08-09

所有,css3

要使得父元素的高度自适应，同时子元素的高度跟随父元素自适应，可以使用CSS的height: 100%;属性。确保父元素有足够的高度，子元素才能继承这个高度。

以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Height Example</title>
<style>
  .parent {
    background-color: lightblue;
    width: 200px;
    /* 确保父元素有足够的高度 */
  }
  .child {
    background-color: lightcoral;
    width: 100%;
    height: 100%; /* 子元素高度跟随父元素自适应 */
  }
</style>
</head>
<body>
 
<div class="parent">
  <div class="child">
    <!-- Content -->
  </div>
</div>
 
</body>
</html>

在这个例子中，.parent 类定义了一个蓝色背景的父元素，.child 类定义了一个与父元素同样高度的红色背景的子元素。父元素没有设置具体的高度，而子元素通过height: 100%;自适应父元素的高度。如果父元素有内容推动它的高度，子元素也会相应地被推动至同样的高度。

- 阅读更多 -

深入理解CSS3的REM单位：为何它是现代前端布局的首选？

System

2024-08-09

所有,css3

REM是CSS3中引入的一种长度单位，它是相对于根元素（即html元素）的字体大小。使用REM单位可以实现响应式布局，使得页面元素的大小随着根元素字体大小的变化而变化，从而提供一种灵活的方式来进行布局设计。

以下是一个简单的CSS示例，演示如何使用REM单位来设置元素的大小：




html {
    font-size: 16px; /* 假设浏览器默认字体大小是16px */
}
 
/* 使用REM单位设置元素宽度和高度 */
.element {
    width: 4rem;   /* 计算为 4 * 16px = 64px */
    height: 3rem;  /* 计算为 3 * 16px = 48px */
}
 
/* 使用媒体查询来调整根元素字体大小，实现响应式设计 */
@media (min-width: 768px) {
    html {
        font-size: 20px; /* 当屏幕宽度大于768px时，字体大小增加到20px */
    }
}

通过以上代码，.element类的宽度和高度会随着屏幕宽度的变化而变化，因为根元素的字体大小也会随之变化。当屏幕宽度超过768像素时，根元素的字体大小会增加到20px，.element的REM单位尺寸也会相应增大，从而保持相对宽度不变。这种方式使得页面布局能够适应不同屏幕大小和设备。

- 阅读更多 -

position:absolute实现水平居中

System

2024-08-09

所有,css3

要使用position: absolute实现元素的水平居中，你需要设置元素的左右margin为auto，并给定一个固定的宽度。此外，其父元素需要是相对定位(position: relative)，以确保绝对定位的参照是父元素而不是整个页面。

以下是实现水平居中的CSS代码：




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  width: 200px; /* 你需要给定一个宽度 */
  left: 50%;
  margin-left: -100px; /* 宽度的一半 */
}

HTML结构：




<div class="parent">
  <div class="child">
    水平居中的内容
  </div>
</div>

这样.child元素就会在.parent元素内水平居中显示。

- 阅读更多 -

【CSS】CSS选择器全解指南【CSS基础知识详解】

System

2024-08-09

所有,css3

CSS 选择器是用来指定样式规则应用于哪些元素的模式。CSS选择器有多种类型，包括基础的元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器等。

元素选择器：选择特定的HTML标签元素。




p { color: blue; }

类选择器：选择具有特定类的HTML元素。




.my-class { color: red; }

ID选择器：选择具有特定ID的HTML元素。




#my-id { color: green; }

属性选择器：选择包含特定属性的HTML元素。




input[type="text"] { background-color: yellow; }

伪类选择器：选择特定状态的HTML元素。




a:hover { color: purple; }

伪元素选择器：选择HTML元素的特定部分。




p::first-letter { font-size: 200%; }

组合选择器：结合多个选择器以选择更具体的元素。




div.container > p { border: 1px solid black; }

通配选择器：选择所有元素。




* { margin: 0; padding: 0; }

子选择器：选择直接子元素。




div > p { color: orange; }

相邻选择器：选择紧跟在另一个元素后的元素。




h1 + p { margin-top: 0; }

后代选择器：选择特定元素内的后代元素。




div p { text-indent: 2em; }

分组选择器：同时选择多个元素。




h1, h2, h3 { font-family: 'Arial Black'; }

伪元素选择器：选择元素的特定部分。




p::first-letter { font-size: 200%; }

否定选择器：选择不满足条件的元素。




:not(p) { color: grey; }

伪类选择器（伪类选择器与之前的伪类选择器略有不同，主要用于链接）：




a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

CSS选择器是CSS的核心部分，它决定了样式规则应用于哪些元素。了解和使用这些选择器是每个前端开发者必备的技能。

- 阅读更多 -

用css画一个三角形

System

2024-08-09

所有,css3

使用border属性：




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

该方法通过设置元素的宽度和高度，并通过border属性画出三角形，其中border-left和border-right用于确定横向的底边长，border-bottom用于确定纵向的高。

使用transform属性：




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
}

该方法与第一种方法类似，通过设置元素的宽度和高度，并通过border属性画出三角形，但是通过transform的rotate属性对元素进行旋转，使得实际显示为一个三角形。

使用伪元素：




.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}
 
.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 100px 100px 0;
  border-style: solid;
  border-color: transparent red;
}

该方法通过添加一个伪元素(::before)来画出三角形，通过设置伪元素的边框宽度和样式，以及边框颜色来构造三角形。

以上是三种常见的使用CSS画三角形的方法，它们都可以很好地实现画出三角形的效果。

- 阅读更多 -