| 标题 | HTML九宫格布局实现方法 |
| 内容 | 网站布局多样化是我们前端的拿手菜！最近看到UC浏览器的默认标签页使用的就是九宫格布局。就研究了下，在这里，我就分享一下代码，共同学习下！效果如下： 代码如下: XML/HTML Code 1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="utf-8"> 5.<title>全兼容的HTML九宫格布局</title> 6.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7.</head> 8.<body> 9.<html> 10.<head> 11.<style type="text/css"> 12./** 重置浏览器默认标签样式 */ 13.body,ul,li{margin:0;padding:0;} 14..xttblog{ 15. width: 1200px; 16. height: 170px; 17. margin-top:50px; 18. margin-left: auto; 19. margin-right: auto; 20.} 21..box{margin-left: 5px;margin-top: 5px;list-style-type:none;} 22..box:after{ 23. content: "."; 24. display: block; 25. line-height: 0; 26. width:0; 27. height: 0; 28. clear: both; 29. visibility: hidden; 30. overflow: hidden; 31.} 32..box li{float:left;line-height: 230px;} 33..box li a,.box li a:visited{ 34. display:block; 35. border: 5px solid #ccc; 36. width: 380px; 37. height: 230px; 38. text-align: center; 39. margin-left: -5px; 40. margin-top: -5px; 41. position: relative; 42. z-index: 1; 43.} 44..box li a:hover{border-color: #f00;z-index: 2;} 45.</style> 46.</head> 47.<body> 48.<div> 49. <ul> 50. <li><a href="#"><img src="sh.jpg"/></a></li> 51. <li><a href="#"><img src="bd.jpg"/></a></li> 52. <li><a href="#"><img src="tb.jpg"/></a></li> 53. <li><a href="#"><img src="fh.jpg"/></a></li> 54. <li><a href="#"><img src="tb.jpg"/></a></li> 55. <li><a href="#"><img src="tb.jpg"/></a></li> 56. <li><a href="#"><img src="tb.jpg"/></a></li> 57. <li><a href="#"><img src="tb.jpg"/></a></li> 58. <li><a href="#"><img src="tb.jpg"/></a></li> 59. </ul> 60.</div> 61.</body> 62.</html> 63. 以上就是本文的全部内容，希望对大家的学习有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。