공지사항 HTML CSS와 자바스크립트를 활용한 현실적인 환상 https://www.instagram.com/webstreet_code/
- Mary-Kate Olsen원래의
- 2024-11-21 02:53:10353검색
인스타그램 팔로우: 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>게시판</title>
<스타일>
@import url('https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap');
몸 {
디스플레이: 플렉스;
내용 정당화: 센터;
항목 정렬: 중앙;
높이: 100vh;
글꼴 계열: 'Arial', 산세리프;
여백: 0;
배경색: #f0f0f0;
}
.게시판 {
디스플레이: 플렉스;
플렉스 랩: 랩;
justify-content: 공백 주변;
항목 정렬: 중앙;
너비: 80%;
높이: 80vh;
간격: 20px;
패딩: 20px;
배경색: #54290a; /* 갈색 배경 */
테두리: 10px 단색 #6b3e1b; /* 더 어두운 갈색 테두리 */
테두리 반경: 12px;
상자 그림자: 0 20px 35px rgba(0, 0, 0, 0.4);
}
.알아채다 {
너비: 200px;
높이: 170px;
배경색: #f5f5dc;
패딩: 15px;
위치: 상대;
상자 그림자: 0 4px 10px rgba(0, 0, 0, 0.2);
테두리 반경: 10px;
전환: 변환 0.3초 용이성, 상자 그림자 0.3초 용이성;
글꼴 모음: '빛 속으로의 그림자', 필기체;
글꼴 크기: 1.1rem;
색상: #333;
디스플레이: 플렉스;
항목 정렬: 중앙;
내용 정당화: 센터;
텍스트 정렬: 중앙;
변환: 회전(-5deg); /* 초기 왜곡 효과 */
}
.notice:hover {
변환: 번역Y(-8px) 회전(-3deg);
상자 그림자: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.핀 {
위치: 절대;
상단: -8px;
왼쪽: 50%;
변환: 번역X(-50%);
너비: 18px;
높이: 18px;
배경색: 빨간색;
테두리 반경: 50%;
상자 그림자: 0 4px 8px rgba(0, 0, 0, 0.3);
Z-색인: 1;
}
/* 각 알림에 고유한 기울어짐 및 배경색 추가 */
.notice:nth-child(1) {
배경색: #FFECB3; /* 밝은 노란색 */
변환: 회전(-2deg);
}
.notice:nth-child(2) {
배경색: #C8E6C9; /* 밝은 녹색 */
변환: 회전(2deg);
}
.notice:nth-child(3) {
배경색: #FFCDD2; /* 밝은 분홍색 */
변환: 회전(-4deg);
}
.notice:nth-child(4) {
배경색: #D1C4E9; /* 라벤더 */
변환: 회전(3deg);
}
</스타일>
</머리>
<본문>
<div>
위 내용은 공지사항 HTML CSS와 자바스크립트를 활용한 현실적인 환상 https://www.instagram.com/webstreet_code/의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
JavaScript css html for using display position margin padding border viewport background transform transition flex https
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.