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

Use of Linux network configuration tools

This article introduces RHEL8 network services an...

Use label tag to select the radio button by clicking the text

The <label> tag defines a label (tag) for an...

MySQL permissions and database design case study

Permissions and database design User Management U...

How to install Oracle on Windows Server 2016

1. Install Oracle There are too many Oracle insta...

Detailed explanation of Vue-Jest automated testing basic configuration

Table of contents Install Configuration Common Mi...

Solution to the Chinese garbled code problem in the decompressed version of MYSQL

The decompressed version of MYSQL is installed 1:...

Detailed explanation of the relationship between the primary key being 0 and the primary key self-selection constraint in MySQL (details)

Preface This article mainly introduces the relati...

Introduction to possible problems after installing Tomcat

1. Tomcat service is not open Enter localhost:808...

24 Practical JavaScript Development Tips

Table of contents 1. Initialize the array 2. Arra...

Example analysis of the page splitting principle of MySQL clustered index

This article uses an example to illustrate the pa...

Learn how to use JavaScript's new Element Traversal property to traverse child elements

Table of contents 1. ChildNodes attribute travers...

JS uses the reduce() method to process tree structure data

Table of contents definition grammar Examples 1. ...

How to run Spring Boot application in Docker

In the past few days, I have studied how to run s...

js implements a simple shopping cart module

This article example shares the specific code of ...

MySQL inspection script (must read)

As shown below: #!/usr/bin/env python3.5 import p...