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/20241114.css">
</head>
<body>
    <div class="main">
        <img src="image/20241114/fan-blade.png" alt="" srcset="">
        <button onclick="fanOn()">ON  </button>
        <button onclick="fanOff()">OFF</button>
        <button onclick="fanBtn1()">1</button>
        <button onclick="fanBtn2()">2</button>
        <button onclick="fanBtn3()">3</button>
    </div>
<script src="../js/20241114.js"></script>
</body>
</html>

2024年12月17日

CSS grid对齐网格项目和轨道 css grid flex

首先我们先将模块1关闭，模块2使用CSS网格

display: none;

      .container--2 {
        /* STARTER */
        font-family: sans-serif;
        background-color: black;
        font-size: 40px;
        margin: 100px;
        width: 1000px;
        height: 600px;
        /* CSS GRID */
        display: grid;
      }

2024年12月17日

从零开始的Flex布局掌握 flex布局实战

前言

在现代网页设计中，布局是一个至关重要的环节，在过去的一段时间里，页面的布局还都是通过table

2024年12月17日

了解CSS Flex:解析实例、用法和案例研究

更多web开发知识欢迎访问我的专栏>>>

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 />}
    </>
  );
}

四时宝库

程序员的知识宝库

Html5第十二天练习 html5题

CSS grid对齐网格项目和轨道 css grid flex

从零开始的Flex布局掌握 flex布局实战

前言

了解CSS Flex:解析实例、用法和案例研究

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

12 个救命的 CSS 技巧 css操作

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

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

使用变量 currentColor 减少重复代码

需求描述

尝试方案

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

1、什么是弹性布局

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

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