search

Home >Web Front-end >HTML Tutorial >Implementation method of HTML nine-square grid layout_HTML/Xhtml_Web page production

Implementation method of HTML nine-square grid layout_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:36:013142browse

Diversified website layouts are our front-end specialty! Recently I saw that the default tab page of UC Browser uses a nine-square grid layout. I did some research, and here, I will share the code and learn together! The effect is as follows:

XML/HTML CodeCopy content to clipboard
  1. >
  2. <html>
  3. <head>
  4. <meta charset="utf- 8"> 
  5. <title>Fully compatible HTML nine-square grid layouttitle>
  6. <meta http-equiv=" " > head>
  7. <body>
  8. <html>
  9. <head>
  10. <style type
    11. =
  11. "text/ css"> /**Reset browser default tab style*/ body,ul,li{margin:0;padding:0;} .xttblog{
  12. width: 1200px;
  13. height: 170px;
  14. margin-top:50px;
  15. margin-left: auto;
  16. margin-right: auto;
  17. }
  18. .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
  19. .box:after{
  20. content: ".";
  21. display: block;
  22. line-height: 0;
  23. width:0;
  24. height: 0;
  25. clear: both;
  26. visibility: hidden;
  27. overflow: hidden;
  28. }
  29. .box li{float:left;line-height: 230px;}
  30. .box li a,.box li a:visited{
  31. display:block;
  32. border: 5px solid #ccc;
  33. width: 380px;
  34. height: 230px;
  35. text-align: center;
  36. margin-left: -5px;
  37. margin-top: -5px;
  38. position: relative;
  39. z-index: 1;
  40. }
  41. .box li a:hover{border-color: #f00;z-index: 2;}  
  42. style>  
  43. head>  
  44. <body>  
  45. <div class="xttblog">  
  46.  <ul class="box">  
  47.   <li><a href="#" title="1"><img src="sh.jpg"/>a>li>  
  48.   <li><a href="#" title="2"><img src="bd.jpg"/>a>li>  
  49.   <li><a href="#" title="3"><img src="tb.jpg"/>a>li>  
  50.   <li><a href="#" title="4"><img src="fh.jpg"/>a>li>  
  51.   <li><a href="#" title="5"><img src="tb.jpg"/>a>li>  
  52.   <li><a href="#" title="6"><img src="tb.jpg"/>a>li>  
  53.   <li><a href="#" title="7"><img src="tb.jpg"/>a>li>  
  54.   <li><a href="#" title="8"><img src="tb.jpg"/>a>li>  
  55.   <li><a href="#" title="9"><img src="tb.jpg"/>a>li>  
  56.  ul>  
  57. div>  
  58. body>
  59. html>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：NoneNext article：用HTML和CSS打造属于自己的暖男“大白”_HTML/Xhtml_网页制作

Related articles

See more