다양한 웹사이트 레이아웃은 우리의 프론트엔드 전문 분야입니다! 최근에 UC 브라우저의 기본 탭 페이지가 9개의 정사각형 그리드 레이아웃을 사용하는 것을 보았습니다. 좀 조사해봤는데 여기서 코드를 공유하고 함께 배워보겠습니다! 효과는 다음과 같습니다.
XML/HTML 코드클립보드에 콘텐츠 복사
- >
-
<html>
-
<머리>
-
<메타 문자 집합="utf- 8">
-
<제목>완전히 호환되는 HTML 9각형 그리드 레이아웃< ;/ 제목>
-
<메타 http-equiv=" " >
머리>
-
<몸>
-
<html>
-
<머리>
-
<스타일 유형
=- "text/ css">
/**브라우저 기본 탭 스타일 재설정*/
body,ul,li{margin:0;padding:0;}
.xttblog{
- 너비: 1200px
- 높이: 170px
- 여백:50px
- 여백-왼쪽: 자동
- 여백-오른쪽: 자동
- }
- .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
- .box:after{
- 내용: "."
- 디스플레이: 블록
- 줄 높이: 0
- 너비:0
- 높이: 0
- 지우기: 둘 다
- 공개 여부: 숨김
- 오버플로: 숨김
- }
- .box li{float:left;line-height: 230px;}
- .box li a,.box li a:방문{
- 디스플레이:블록
- 테두리: 5픽셀 #ccc
- 너비: 380px
- 높이: 230px
- 텍스트 정렬: 가운데
- 여백-왼쪽: -5px
- 여백 상단: -5px
- 위치: 친척
- Z-색인: 1
- }
- .box li a:hover{border-color: #f00;z-index: 2;}
-
스타일>
-
머리>
-
<몸>
-
<div class="xttblog" >
-
<ul class="상자" >
-
<리><아 href="#" 제목=" 1"><img src="sh.jpg"/>아>리>
-
<리><아 href="#" 제목=" 2"><img src="bd.jpg"/>아>리>
-
<리><아 href="#" 제목=" 3"><img src="tb.jpg"/>아>리>
-
<리><아 href="#" 제목=" 4"><img src="fh.jpg"/>아>리>
-
<리><아 href="#" 제목=" 5"><img src="tb.jpg"/>아>리>
-
<리><아 href="#" 제목=" 6"><img src="tb.jpg"/>아>리>
-
<리><아 href="#" 제목=" 7"><img src="tb.jpg"/>아>리>
-
<리><아 href="#" 제목=" 8"><img src="tb.jpg"/>아>리>
-
<리><아 href="#" 제목=" 9"><img src="tb.jpg"/>아>리>
-
ul>
-
div>
-
몸>
-
html>
-
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
