창조|무한한 창의적 가능성을 발견하세요
창의적인 목적
이것은 모든 사람의 창의성을 하나로 모으는 사이트입니다. 여기에서 웹프론트엔드 개발과정에 참여한 학생들의 노고와 성장, 사랑, 무한한 창의력을 볼 수 있습니다! 이 디스플레이 사이트는 매우 간단하지만 학생들의 사이트는 매우 풍부하고 창의적입니다.
구조적 기능
- 작품 제출
- 전시상세페이지를 포함한 모든 작품을 전시합니다.
- 작품의 순위 목록을 표시하고 작품에 좋아요를 표시합니다.
- 좋아하는 작품을 모아보세요
기술적인 세부사항
- 브라우저 창 크기를 모니터링하여 홈 페이지 배너 이미지가 항상 전체 화면으로 표시됩니다.
- 스크롤 위치를 모니터링하여 탐색 모음 변경
- 레이아웃: 디스플레이: 인라인 블록 및 클리어 플로트와 같은 몇 가지 트릭을 포함하는 위치+부동의 전통적인 레이아웃 방법입니다.
- 아이콘은 아이콘 글꼴을 사용합니다.
- -webkit-scrollbar 스타일은 스크롤 막대를 변경하여 웹 페이지를 더욱 아름답게 만듭니다.
- 의사 클래스를 사용하여 순위 목록에 일부 효과 얻기
- 카드 가장자리에 슬라이딩 색상 효과를 적용했습니다.
- 전체 사이트 페이지의 템플릿을 구현하고, ajax를 통해 템플릿 콘텐츠를 얻어서 페이지에 렌더링했습니다.
- 위치를 사용하여 현재 URL 매개변수를 가져오면 서로 다른 페이지에서 서로 다른 템플릿과 일부 특정 효과를 사용할 수 있습니다. 이 효과는 단 하나의 기능으로 얻을 수 있으며 매개변수는 템플릿 이름입니다.
- 즐겨찾기 열에서 특정 효과를 달성하기 위해 js를 사용하여 일부 효과의 표시 속성을 제어합니다.
- submit.php에 몰래 들어가서(부트스트랩을 사용하여 양식의 스타일 효과를 얻음) 데이터베이스에 제출한 다음 getdata.php에서 가져와 json 문자열을 생성하여 페이지를 제출합니다.
- 웹사이트가 데이터를 얻을 때 ajax 동기화 방법은 getdata.php의 json 문자열을 얻는 데 사용됩니다. 동시에 ajax 사용으로 인해 발생하는 일부 비동기 문제를 해결하기 위해 json 문자열을 루프할 때 재귀 호출이 사용됩니다.
- 세션 저장소를 사용하여 검색된 데이터 저장
- 순위 페이지 별표 정렬 기능 구현
- 검색된 데이터를 올바른 위치에 배치하기 위해 템플릿에 자리 표시자를 포함합니다.
- 세부정보 페이지의 경우 서로 다른 계정이 서로 다른 세부정보 페이지를 표시할 수 있도록 url 매개변수를 가져오는 함수가 사용됩니다.
