찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >HTML 9각형 그리드 레이아웃 구현 방법_HTML/Xhtml_웹페이지 제작

HTML 9각형 그리드 레이아웃 구현 방법_HTML/Xhtml_웹페이지 제작

WBOY
WBOY원래의
2016-05-16 16:36:013121검색

다양한 웹사이트 레이아웃은 우리의 프론트엔드 전문 분야입니다! 최근에 UC 브라우저의 기본 탭 페이지가 9개의 정사각형 그리드 레이아웃을 사용하는 것을 보았습니다. 좀 조사해봤는데 여기서 코드를 공유하고 함께 배워보겠습니다! 효과는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html>
  3. <머리>
  4. <메타 문자 집합="utf- 8"> 
  5. <제목>완전히 호환되는 HTML 9각형 그리드 레이아웃< ;/ 제목>
  6. <메타 http-equiv=" " > 머리>
  7. <몸>
  8. <html>
  9. <머리>
  10. <스타일 유형
    11. =
  11. "text/ css"> /**브라우저 기본 탭 스타일 재설정*/ body,ul,li{margin:0;padding:0;} .xttblog{
  12. 너비: 1200px
  13. 높이: 170px
  14. 여백:50px
  15. 여백-왼쪽: 자동
  16. 여백-오른쪽: 자동
  17. }
  18. .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
  19. .box:after{
  20. 내용: "."
  21. 디스플레이: 블록
  22. 줄 높이: 0
  23. 너비:0
  24. 높이: 0
  25. 지우기: 둘 다
  26. 공개 여부: 숨김
  27. 오버플로: 숨김
  28. }
  29. .box li{float:left;line-height: 230px;}
  30. .box li a,.box li a:방문{
  31. 디스플레이:블록
  32. 테두리: 5픽셀 #ccc
  33. 너비: 380px
  34. 높이: 230px
  35. 텍스트 정렬: 가운데
  36. 여백-왼쪽: -5px
  37. 여백 상단: -5px
  38. 위치: 친척
  39. Z-색인: 1
  40. }
  41. .box li a:hover{border-color: #f00;z-index: 2;}  
  42. 스타일>  
  43. 머리>  
  44. <몸>  
  45. <div class="xttblog" >  
  46.  <ul class="상자" >  
  47.   <리><아 href="#" 제목=" 1"><img src="sh.jpg"/>아>리>  
  48.   <리><아 href="#" 제목=" 2"><img src="bd.jpg"/>아>리>  
  49.   <리><아 href="#" 제목=" 3"><img src="tb.jpg"/>아>리>  
  50.   <리><아 href="#" 제목=" 4"><img src="fh.jpg"/>아>리>  
  51.   <리><아 href="#" 제목=" 5"><img src="tb.jpg"/>아>리>  
  52.   <리><아 href="#" 제목=" 6"><img src="tb.jpg"/>아>리>  
  53.   <리><아 href="#" 제목=" 7"><img src="tb.jpg"/>아>리>  
  54.   <리><아 href="#" 제목=" 8"><img src="tb.jpg"/>아>리>  
  55.   <리><아 href="#" 제목=" 9"><img src="tb.jpg"/>아>리>  
  56.  ul>  
  57. div>  
  58. 몸>
  59. html>

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：없음다음 기사：用HTML和CSS打造属于自己的暖男“大白”_HTML/Xhtml_网页制作

관련 기사

더보기