HTML Nine-grid Layout Implementation Method

HTML Nine-grid Layout Implementation Method

Diversifying website layouts is our front-end specialty! Recently I saw that the default tab page of UC Browser uses a nine-grid layout. I studied it, and here I will share the code so that we can learn together! The effect is as follows:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html >   
  3. < head >   
  4. < meta   charset = "utf-8" >   
  5. < title > Fully compatible HTML nine-grid layout </ 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. /** Reset browser default tab style */
  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   class = "xttblog" >   
  49.   < ul   class = "box" >   
  50.    < li > < a   href = "#"   title = "1" > < img   src = "sh.jpg" /> </ a > </ li >   
  51.    < li > < a   href = "#"   title = "2" > < img   src = "bd.jpg" /> </ a > </ li >   
  52.    < li > < a   href = "#"   title = "3" > < img   src = "tb.jpg" /> </ a > </ li >   
  53.    < li > < a   href = "#"   title = "4" > < img   src = "fh.jpg" /> </ a > </ li >   
  54.    < li > < a   href = "#"   title = "5" > < img   src = "tb.jpg" /> </ a > </ li >   
  55.    < li > < a   href = "#"   title = "6" > < img   src = "tb.jpg" /> </ a > </ li >   
  56.    < li > < a   href = "#"   title = "7" > < img   src = "tb.jpg" /> </ a > </ li >   
  57.    < li > < a   href = "#"   title = "8" > < img   src = "tb.jpg" /> </ a > </ li >   
  58.    < li > < a   href = "#"   title = "9" > < img   src = "tb.jpg" /> </ a > </ li >   
  59.   </ ul >   
  60. </ div >   
  61. </ body >   
  62. </ html >   
  63.   

The above is the full content of this article. I hope it will be helpful for everyone’s study.

<<:  Two ways to make IE6 display PNG-24 format images normally

>>:  Detailed explanation of overflow-scrolling to solve scrolling lag problem

Recommend

Implementation of webpack code fragmentation

Table of contents background CommonsChunkPlugin s...

40+ Beautiful Web Form Design Examples

Web forms are the primary communication channel b...

Docker container operation instructions summary and detailed explanation

1. Create and run a container docker run -it --rm...

Detailed explanation of Linux server status and performance related commands

Server Status Analysis View Linux server CPU deta...

Vue uses the video tag to implement video playback

This article shares the specific code of Vue usin...

Detailed explanation of the idea of ​​MySQL trigger detecting a statement in real time for backup and deletion

Problem description: The user has a requirement t...

Summary of the Differences between SQL and NoSQL

Main differences: 1. Type SQL databases are prima...

Analysis of the event loop mechanism of js

Preface As we all know, JavaScript is single-thre...

Usage scenarios and source code analysis of Vue advanced components functional components

Table of contents introduce Usage scenarios Sourc...

Implementation of the list-style-type attribute in front of CSS ordered or unordered lists

example: <html> <head> <style type...

A brief understanding of MySQL SELECT execution order

The complete syntax of the SELECT statement is: (...

Solution to click event failure when using better-scroll on vue mobile development

Recently I used vue to learn to develop mobile pr...

Application of anchor points in HTML

Set Anchor Point <a name="top"><...

WeChat applet realizes the effect of shaking the sieve

This article shares the specific code of the WeCh...

Summary of JS tips for creating or filling arrays of arbitrary length

Table of contents Preface Direct filling method f...