HTML CSS 및 JS https://www.instagram.com/webstreet_code/를 사용하여 Chatgpt 가입 페이지 복제
- DDD원래의
- 2024-11-10 18:21:02634검색
인스타그램 팔로우: https://www.instagram.com/webstreet_code/
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ChatGPT 가입</title>
<스타일>
/* 일반 재설정 */
* {
여백: 0;
패딩: 0;
상자 크기 조정: 테두리 상자;
글꼴 모음: Arial, sans-serif;
}
/* 중앙 컨테이너 */
.컨테이너 {
최대 너비: 350px;
여백: 50px 자동;
텍스트 정렬: 중앙;
색상: #333;
}
/* 로고 및 헤더 */
.컨테이너 img {
너비: 80px;
여백 하단: 80px;
}
h1 {
글꼴 크기: 30px;
글꼴 두께: 굵게;
여백 하단: 20px;
/* 색상: hsl(152, 97%, 30%); */
}
/* 입력 및 버튼 */
.input-컨테이너 {
항목 정렬: 중앙;
내용 정당화: 센터;
여백 하단: 20px;
}
.input-container 입력[type="text"] {
패딩: 16px;
너비: 100%;
테두리: 1px 실선 #ccc;
테두리 반경: 5px;
개요: 없음;
글꼴 크기: 14px;
}
.input-container 버튼 {
배경색: #10a37f;
색상: 흰색;
테두리: 없음;
패딩: 15px;
여백 상단: 40px;
테두리 반경: 5px;
커서: 포인터;
글꼴 두께: 굵게;
너비: 100%;
}
.input-container 버튼:hover {
배경색: #064d22;
}
/* 기존 계정 로그인 */
.login-링크 {
글꼴 크기: 14px;
여백: 10px 0;
색상: #555;
}
.login-링크 범위 {
색상: #10a37f;
커서: 포인터;
텍스트 장식: 밑줄;
}
/* "OR"을 사용한 구분선 */
.divider {
디스플레이: 플렉스;
항목 정렬: 중앙;
내용 정당화: 센터;
색상: #aaa;
여백: 20px 0;
}
.divider 시간 {
너비: 30%;
높이: 1px;
배경색: #ccc;
테두리: 없음;
}
/* 소셜 로그인 옵션 */
.로고컨테이너 {
디스플레이: 플렉스;
플렉스 방향: 열;
간격: 10px;
여백 하단: 20px;
항목 정렬: 중앙;
}
.로고 {
디스플레이: 플렉스;
항목 정렬: 중앙; /* 항목을 한 줄에 세로로 가운데에 배치 */
내용 정당화: flex-start; /* 항목을 가로 방향으로 정렬 */
테두리: 1px 실선 #ccc;
패딩: 10px 15px; /* 더 나은 간격을 위해 패딩을 추가합니다 */
테두리 반경: 5px;
커서: 포인터;
너비: 350px;
전환: 배경색 0.3초;
}.logo img {
너비: 40px;
높이: 40px;
여백:자동 0px;
오른쪽 여백: 10px; /* 이미지와 텍스트 사이의 공백 */
}
.로고 h4 {
글꼴 크기: 14px;
색상: #555;
여백: 0; /* 여분의 여백 제거 */
텍스트 정렬: 왼쪽; /* 텍스트가 왼쪽으로 정렬되는지 확인 */
}
.로고:호버 {
배경색: #f1f1f1;
}
/* 바닥글 링크 */
.마지막 줄 {
디스플레이: 플렉스;
내용 정당화: 센터;
간격: 10px;
글꼴 크기: 12px;
색상: #10a37f;
}
.lastline 시간 {
너비: 1px;
높이: 12px;
배경색: #ccc;
테두리: 없음;
}
</스타일>
</머리>
<본문>
<div>
위 내용은 HTML CSS 및 JS https://www.instagram.com/webstreet_code/를 사용하여 Chatgpt 가입 페이지 복제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
css html for auto using pointer JS display margin padding border viewport background transition column flex input chatgpt https
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.