分类 css3 下的文章

[HTML]Web前端开发技术13（HTMLCSSJavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页

2024-08-13

以下是一个简单的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>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  li {
    float: left;
  }
 
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
 
  .dropdown-content a:hover {background-color: #f1f1f1;}
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
 
<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接1</a>
      <a href="#">链接2</a>
      <a href="#">链接3</a>
    </div>
  </li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码提供了一个简单的横向二级导航菜单的实现，使用了HTML结构和CSS样式。当鼠标悬停在带有下拉内容的菜单项上时，会显示下拉菜单。这个示例可以作为学习如何创建导航菜单的起点，并可以根据具体需求进行扩展和修改。

- 阅读更多 -

css设置遮罩层(半透明）

System

2024-08-12

所有,css3

在CSS中，可以使用rgba颜色格式来设置半透明的遮罩层。rgba代表红绿蓝三色加上alpha通道（透明度）。

以下是一个简单的例子，创建一个全屏的半透明遮罩层：

HTML:




<div class="mask"></div>

CSS:




.mask {
  position: fixed; /* 定位方式 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明遮罩层 */
  z-index: 1000; /* 确保遮罩层在其他内容之上 */
}

在这个例子中，.mask 类创建了一个全屏的遮罩层，背景颜色设置为黑色半透明（rgba(0, 0, 0, 0.5)），其中最后一个值（0.5）是透明度，可以根据需要调整为其他介于0（完全透明）和1（完全不透明）的值。

- 阅读更多 -

css伪元素实现选中效果【打勾效果】

System

2024-08-12

所有,css3

CSS伪元素可以用来创建打勾效果，以下是一个简单的例子：

HTML:




<label class="checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
  Check me out
</label>

CSS:




/* 复选框样式 */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
 
/* 打勾标记样式 */
.checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}
 
/* 当复选框被选中时，显示打勾 */
.checkbox input:checked + .checkmark:before {
  position: absolute;
  content: "";
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
 
/* 隐藏原生的复选框样式 */
.checkbox input:checked + .checkmark {
  background-color: #bada55;
}
 
.checkbox span.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ddd;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
}

这段代码中，.checkbox input 隐藏了原生的复选框，.checkbox .checkmark 创建了一个空白的打勾区域，.checkbox input:checked + .checkmark:before 在复选框被选中时，通过伪元素 :before 创建了打勾效果。通过CSS的 transform: rotate(45deg); 属性，将打勾样式旋转成标准的对勾形状。

- 阅读更多 -

js原生实现步骤条

System

2024-08-12

所有,css3

要使用原生JavaScript实现步骤条，你可以创建一个HTML结构，然后用JavaScript来处理步骤的显示和交互。以下是一个简单的实现示例：

HTML:




<div id="step-bar">
  <div class="step" data-step="1">步骤1</div>
  <div class="step" data-step="2">步骤2</div>
  <div class="step" data-step="3">步骤3</div>
  <div class="step" data-step="4">步骤4</div>
</div>

CSS:




#step-bar {
  display: flex;
}
 
.step {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
}
 
.step.active {
  color: #fff;
  background-color: #007bff;
}

JavaScript:




document.querySelectorAll('.step').forEach(function(step) {
  step.addEventListener('click', function() {
    // 移除所有步骤的active类
    document.querySelectorAll('.step').forEach(function(s) {
      s.classList.remove('active');
    });
    
    // 添加当前点击的步骤的active类
    this.classList.add('active');
    
    // 这里可以添加更多的逻辑，比如显示或隐藏内容区域等
  });
});

这个实现允许用户点击步骤条上的任何一个步骤，然后该步骤会被高亮显示，同时其他步骤保持不变。你可以根据需要添加更多的功能，比如显示对应步骤的内容等。

- 阅读更多 -

CSS3如何实现元素的固定不滚动

System

2024-08-12

所有,css3

在CSS3中，可以使用position: sticky;属性来实现元素的固定效果，即使元素在滚动时仍然保持在某个位置。position: sticky;的工作需要基于一些条件：

必须指定top, right, bottom或left四个方向之一来指定sticky元素所需要达到的位置，才能使粘性定位生效。
其父元素不能有任何overflow属性设置为visible的情况，否则sticky定位不会生效。

下面是一个简单的例子，演示如何使用position: sticky;来实现元素的固定效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body, html {
    height: 200%;
    margin: 0;
    padding: 0;
  }
  .sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* 距离顶部的距离 */
    background-color: yellow;
    padding: 50px;
    font-size: 20px;
  }
</style>
</head>
<body>
 
<p>向下滚动页面。</p>
 
<div class="sticky">我在滚动时保持固定。</div>
 
<p>继续向下滚动页面...</p>
 
</body>
</html>

在这个例子中，.sticky类使得包含文本的<div>在滚动时保持在顶部。当用户向下滚动页面时，sticky元素会固定在顶部，并不会随着页面的其余部分滚动。

System

2024-08-12

所有,css3




/* 设置图片初始大小 */
img {
  width: 200px;
  height: auto;
}
 
/* 鼠标悬停时，缩小图片 */
img:hover {
  transform: scale(0.8);
}

这段代码示例中，我们首先为所有img元素设置了一个初始宽度，并让其高度自动调整。然后，我们使用CSS的:hover伪类选择器来定义当鼠标悬停在图片上时的变换效果，使用transform属性中的scale函数将图片缩小到原始大小的80%。这种效果在用户希望在用户交互时增加页面视觉效果时非常有用。

- 阅读更多 -

【CSS应用篇】——CSS如何实现圆角边框

System

2024-08-12

所有,css3

CSS提供了border-radius属性，可以用来创建圆角边框。




/* 创建一个圆角矩形 */
.rounded-rectangle {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  border: 2px solid black;
  border-radius: 15px; /* 设置圆角的半径为15px */
}
 
/* 创建一个圆角圆形 */
.rounded-circle {
  width: 100px;
  height: 100px;
  background-color: pink;
  border: 2px solid black;
  border-radius: 50%; /* 设置border-radius为50%，形成圆形 */
}

HTML部分：




<div class="rounded-rectangle"></div>
<div class="rounded-circle"></div>

border-radius属性可以接受不同的值：

单一值：如15px，将创建四个相等的圆角。
两个值：第一个值是水平半径，第二个值是垂直半径（例如15px 5px）。
三个值：第一个和第二个值是水平半径，第三个值是垂直半径（例如15px 5px 10px）。
四个值：分别指定左上角、右上角、右下角、左下角的圆角（例如15px 5px 10px 20px）。
百分比值：可以用百分比指定圆角的大小，相对于元素的宽度或高度（例如20% 40% 60% 80%）。

- 阅读更多 -

antd选择器下拉菜单样式修改

System

2024-08-12

所有,css3

在Ant Design中，如果你想要修改选择器（Select）组件的下拉菜单样式，你可以使用dropdownRender属性来自定义下拉菜单的渲染。以下是一个简单的例子，演示如何使用dropdownRender来修改样式：




import React from 'react';
import { Select } from 'antd';
import './style.css'; // 假设你有一个CSS文件用于定义样式
 
const { Option } = Select;
 
const customDropdown = (menu) => (
  <div className="custom-dropdown">
    {menu}
    // 在这里添加更多的样式或组件
  </div>
);
 
const App = () => (
  <Select
    dropdownRender={customDropdown}
    placeholder="请选择"
    style={{ width: 200 }}
  >
    <Option value="option1">Option 1</Option>
    <Option value="option2">Option 2</Option>
  </Select>
);
 
export default App;

在style.css文件中，你可以定义.custom-dropdown的样式：




.custom-dropdown {
  background-color: #fafafa;
  /* 添加其他需要的样式 */
}

请注意，dropdownRender属性接受一个React元素或一个函数，该函数接受下拉菜单的内容作为参数，并返回一个React元素。你可以在返回的元素中加入任何你想要的自定义样式。

- 阅读更多 -

如何将img标签水平居中

System

2024-08-12

所有,css3

要将img标签在其父元素中水平居中，可以使用CSS的display: block属性和margin属性。以下是具体实现方法：

给img标签添加display: block属性。
设置margin-left和margin-right属性为auto。

HTML代码：




<div class="image-container">
    <img src="path/to/your/image.jpg" alt="Sample Image">
</div>

CSS代码：




.image-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

这段CSS代码会使得img标签在其父元素div中水平居中显示。如果你想要使用其他方法，比如Flexbox或Grid布局，也可以实现相同的效果。

- 阅读更多 -

Vue 实现全屏滚动效果

System

2024-08-12

所有,css3




<template>
  <div class="fullpage">
    <div class="section" v-for="section in 3" :key="section">
      <h1>第 {{ section }} 页</h1>
    </div>
  </div>
</template>
 
<script>
import Vue from 'vue'
import VueFullpage from 'vue-fullpage.js'
 
Vue.use(VueFullpage)
 
export default {
  data() {
    return {
      // 定义全屏滚动的配置
      fullpageOptions: {
        navigation: true, // 是否显示导航
        navigationTooltips: ['第一页', '第二页', '第三页'], // 导航按钮的 Tooltip
      }
    }
  },
  // 使用 computed 属性返回配置
  computed: {
    fpOptions() {
      return this.fullpageOptions
    }
  }
}
</script>
 
<style>
.section {
  text-align: center;
  font-size: 30px;
  color: #fff;
  background-color: #35495e;
}
</style>

这个代码实例展示了如何在 Vue 应用中使用 vue-fullpage.js 插件来创建一个具有全屏滚动效果的页面。它定义了三个滚动区域，每个区域都包含一个标题。通过Vue.use(VueFullpage)全局引入插件，并通过计算属性fpOptions提供全屏滚动的配置。

- 阅读更多 -