2024年12月17日

React-导航栏组件简单示例 react 顶部导航

import React, {useState} from 'react';
import './NavBar.css';

const NavBar = () => {
    const [isOpen, setIsOpen]  = useState(false);
    const toggleNavbar = () => {
        setIsOpen(!isOpen);
    };


  return (
    <nav className={`navbar ${isOpen ? 'open' : ''}`}>
        <div className='nav-container'>
            <h1>LOGO</h1>
            <div className='menu-icon' onClick={toggleNavbar}>
                <div className={`bar ${isOpen ? 'open' : ''}`}></div>
                <div className={`bar ${isOpen ? 'open' : ''}`}></div>
                <div className={`bar ${isOpen ? 'open' : ''}`}></div>
            </div>

            <ul className={`nav-links ${isOpen ? 'open' : ''}`}>
                <li>Home</li>
                <li>About</li>
                <li>Services</li>
                <li>Contact Us</li>
            </ul>
        </div>
    </nav>
  )
}

export default NavBar;

2024年12月17日

12 个救命的 CSS 技巧 css操作

1. 使用 Shape-outside 在浮动图像周围弯曲文本

它是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域。css代码：

2024年12月17日

总结7个工作中常用的css3案例，带你了解冷门却实用的特性

使用变量 currentColor 减少重复代码

需求描述

移到按钮上时，改变该元素的 border-color 、 color ，还有一个具有透明度的同色背景。
点击按钮之后，颜色更改为移入按钮时的同种颜色。

尝试方案

我相信任何一个前端开发者都能很快实现这个需求，不知道大家怎么样的，我在之前一直都是以下代码快速实现：

2024年12月17日

一文搞懂flex(弹性盒布局) 弹性盒子布局flex占比

1、什么是弹性布局

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

2024年12月17日

皕杰填报报表中单选框的格式问题表单中的单选按钮

默认情况下，用皕杰报表工具设计器设计出来的填报版本中单选框格式是横排的，且间距固定。那么如何改变单选框的显示格式呢？比如把选项间距加大，把选项竖排。

实际上单选框的格式也是通过css控制的，想改变格式，只需写一段css代码，通过web资源引用引进来就可以了。

2024年12月17日

React-按钮组件简单示例 reactui组件

import React from "react";
import './style.css';
import AddDataForm from "./AddDataForm";
import ViewDataForm from "./ViewDataForm";

export default function Home() {

  const [viewDataVisible, setViewDataVisible] = React.useState(false);
  const [addDataVisible, setAddDataVisible] = React.useState(true);

  const handleAddDataClick = () => {
    setViewDataVisible(false);
    setAddDataVisible(true);
  };

  const handleViewDataClick = () => {
    setViewDataVisible(true);
    setAddDataVisible(false);
  };

  return (
    <>
    <div className="container">
      <button onClick={handleAddDataClick}>新增数据</button>
      <button onClick={handleViewDataClick}>查看数据</button>
    </div>
    {viewDataVisible && <ViewDataForm />}
    {addDataVisible && <AddDataForm />}
    </>
  );
}

2024年12月17日

CSS3页面布局方式详细介绍 css3布局的几种方式

布局是网页设计的核心之一，在CSS3中引入了一些新的技术手段，与传统的浮动（float）和定位（positioning）布局方式不同，CSS3提供了更为强大和灵活的布局方案，主要包括Flexbox、Grid、以及多列布局。这些新方式不仅能有效提高页面布局的效率，还能帮助开发者创建响应式和动态的页面。接下来，我们将详细介绍这几种常见的页面布局方式。

2024年12月17日

CSS Flex 布局全攻略:从小白到精通

一、Flex 布局简介

咱来说说 Flex 布局哈，这就是弹性盒子布局，是 CSS3 里一种特厉害的布局办法。它能轻轻松松弄出各种复杂的布局效果，让元素变得有弹性，能适应不同的页面大小还有设备。IE10 以及更高的版本支持它，在移动端和那些现代浏览器里可流行啦。

Flex 布局意思就是 “弹性布局”，能给盒状模型提供最大的灵活性。随便哪个容器都能指定成 Flex 布局，行内元素也行。得注意哈，设成 Flex 布局以后，子元素的 float、clear 还有 vertical-align 属性就没用啦。

2024年12月17日

Html5第十三天练习 html5基础题库

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字时钟</title>
    <link rel="stylesheet" href="../css/20241121.css">
</head>
<body>
    <body>
        <div class="clock-container">
            <div id="clock" class="clock"></div>
        </div>
        <script src="../js/20241121.js"></script>
    </body>
</body>
</html>

2024年12月17日

非常强大的 CSS 选择器 :has() css的选择器及其用法

大家好，我是 Echa。

前一段时间，小编我陆陆续续分享了关于CSS相关的干货文章，有兴趣的粉丝们一起来回顾一下相关知识，每一篇都有对应的知识点：

四时宝库

程序员的知识宝库

React-导航栏组件简单示例 react 顶部导航

12 个救命的 CSS 技巧 css操作

1. 使用 Shape-outside 在浮动图像周围弯曲文本

总结7个工作中常用的css3案例，带你了解冷门却实用的特性

使用变量 currentColor 减少重复代码

需求描述

尝试方案

一文搞懂flex(弹性盒布局) 弹性盒子布局flex占比

1、什么是弹性布局

皕杰填报报表中单选框的格式问题表单中的单选按钮

React-按钮组件简单示例 reactui组件

CSS3页面布局方式详细介绍 css3布局的几种方式

CSS Flex 布局全攻略:从小白到精通

一、Flex 布局简介

Html5第十三天练习 html5基础题库

非常强大的 CSS 选择器 :has() css的选择器及其用法