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

Complete steps to achieve high availability with nginx combined with keepalived

Preface In order to meet the high availability of...

Vue/react single page application back without refresh solution

Table of contents introduction Why bother? Commun...

How to use the dig/nslookup command to view DNS resolution steps

dig - DNS lookup utility When a domain name acces...

HTML+CSS to create a top navigation bar menu

Navigation bar creation: Technical requirements: ...

Similar to HTML tags: strong and em, q, cite, blockquote

There are some tags in XHTML that have similar fu...

Setting up VMware vSphere in VMware Workstation (Graphic Tutorial)

VMware vSphere is the industry's leading and ...

How to expand the capacity of VirtualBox's virtual disk vdi file (graphic tutorial)

Find the installation directory of VirtualBox. Th...

Two ways to write stored procedures in Mysql with and without return values

Process 1: with return value: drop procedure if e...

Detailed explanation of the solution to the Baidu https authentication prompt "Please redirect your http site 301 to the https site"

I recently wanted to convert a website to https a...

Summary of changes in the use of axios in vue3 study notes

Table of contents 1. Basic use of axio 2. How to ...

How to add a disk in Vmware: Expand the disk

This article describes how to add or expand a dis...

React implements multi-component value transfer function through conetxt

The effect of this function is similar to vue的pro...

Vue implements an example of pulling down and scrolling to load data

Table of contents Step 1: Installation Step 2: Ci...

Tutorial on installing mysql5.7.23 on Ubuntu 18.04

This article shares with you the specific method ...

How to use docker-compsoe to deploy a project with front-end and back-end separation

Say it in advance We all know that Docker can ach...