HTML CSS와 자바스크립트를 사용하는 계산기 UI의 미래.-JS 튜토리얼-php.cn

HTML CSS와 자바스크립트를 사용하는 계산기 UI의 미래.

Mary-Kate Olsen

풀어 주다： 2024-12-14 16:56:15

원래의

753명이 탐색했습니다.

Future of Calculator ui using html css and javascript.

<!DOCTYPE html>
<html lang="ko">
<머리>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>네온 유리 계산기</title>
  <스타일>
   *{
    상자 크기 조정: 테두리 상자;
    마진: 0;
    패딩: 0;
   }
   몸{
    글꼴 계열: "Poppins",sans-serif;
    배경: 선형 그라데이션(135deg, #000428, #004e92);
    높이: 100vh;
    디스플레이: 플렉스;
    내용 정당화: 센터;
    항목 정렬: 중앙;
   }
   .계산자{
    배경: rgba(255, 255, 255, 0.1);
      상자 그림자: 0 8px 32px rgba(0, 0, 0, 0.37);
      배경 필터: 흐림(10px);
      테두리 반경: 20px;
      패딩: 20px;
      너비: 350px;
      최대 너비: 90%;

   }

   .표시하다 {
      배경: rgba(255, 255, 255, 0.2);
      상자 그림자: 삽입 0 4px 12px rgba(255, 255, 255, 0.5);
      색상: #fff;
      글꼴 크기: 2.5rem;
      텍스트 정렬: 오른쪽;
      패딩: 20px 10px;
      테두리 반경: 10px;
      여백 하단: 20px;
    }
    .버튼 {
      디스플레이: 그리드;
      그리드 템플릿 열: 반복(4, 1fr);
      간격: 15px;
    }
    버튼 {
      배경: rgba(255, 255, 255, 0.1);
      테두리: 없음;
      상자 그림자: 0 4px 15px rgba(0, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.7) 삽입;
      색상: #fff;
      글꼴 크기: 1.5rem;
      패딩: 20px;
      테두리 반경: 12px;
      전환: 변환 0.3초, 상자 그림자 0.3초;
      커서: 포인터;
    }

    버튼:활성 {
      변환: 스케일(0.95);
      상자 그림자: 0 4px 25px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 1) 삽입;
    }
    버튼.연산자 {
      배경: rgba(255, 255, 255, 0.2);
      색상: #00ffff;
      상자 그림자: 0 4px 15px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 165, 0, 0.7) 삽입;
    }

    버튼.연산자:활성 {
      상자 그림자: 0 4px 25px rgba(255, 165, 0, 0.7), 0 0 15px rgba(255, 165, 0, 1) 삽입;
    }


















  </스타일>
</머리>
<본문>
  <div>

로그인 후 복사

위 내용은 HTML CSS와 자바스크립트를 사용하는 계산기 UI의 미래.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!