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

After docker run, the status is always Exited

add -it docker run -it -name test -d nginx:latest...

Installation of mysql-community-server. 5.7.18-1.el6 under centos 6.5

Use the following command to check whether MySQL ...

MySQL Optimization Summary - Total Number of Query Entries

1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...

Implementation code for using mongodb database in Docker

Get the mongo image sudo docker pull mongo Run th...

How to use border-image to implement text bubble border sample code

During the development activity, I encountered a ...

Tutorial on using the frameset tag in HTML

Frameset pages are somewhat different from ordina...

How to use vs2019 for Linux remote development

Usually, there are two options when we develop Li...

MySQL 8.0 New Features: Hash Join

The MySQL development team officially released th...

Enable remote access rights for MySQL under Linux and open port 3306 in the firewall

Enable remote access rights for mysql By default,...

Floating menu, can achieve up and down scrolling effect

The code can be further streamlined, but due to t...

How to quickly modify the host attribute of a MySQL user

When you log in to MySQL remotely, the account yo...

Implementation of built-in modules and custom modules in Node.js

1. Commonjs Commonjs is a custom module in nodejs...

Implementation of rewrite jump in nginx

1. New and old domain name jump Application scena...

How to create a table in mysql and add field comments

Directly post code and examples #Write comments w...

Four practical tips for JavaScript string operations

Table of contents Preface 1. Split a string 2. JS...