ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML9マスグリッドレイアウトの実装方法

HTML9マスグリッドレイアウトの実装方法

高洛峰
リリース: 2017-02-21 13:34:39
オリジナル
3095 人が閲覧しました

多様なウェブサイトのレイアウトは私たちのフロントエンドの専門分野です!最近、UC ブラウザのデフォルトのタブ ページが 9 マスのグリッド レイアウトを使用していることに気づきました。いくつか調べてみたので、ここでコードを共有して一緒に学びましょう!効果は以下の通りです:

HTML9マスグリッドレイアウトの実装方法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"

<title>全兼容的HTML九宫格布局</title> 

<meta http-equiv="X-UA-Compatible" content="IE=edge"

</head> 

<body> 

<html> 

<head> 

<style type="text/css"

/** 重置浏览器默认标签样式 */  

body,ul,li{margin:0;padding:0;}  

.xttblog{  

 width: 1200px;  

 height: 170px;  

 margin-top:50px;  

 margin-left: auto;  

 margin-right: auto;  

}  

.box{margin-left: 5px;margin-top: 5px;list-style-type:none;}  

.box:after{  

 content: ".";  

 display: block;  

 line-height: 0;  

 width:0;  

 height: 0;  

 clear: both;  

 visibility: hidden;  

 overflow: hidden;  

}  

.box li{float:left;line-height: 230px;}  

.box li a,.box li a:visited{  

 display:block;  

 border: 5px solid #ccc;  

 width: 380px;  

 height: 230px;  

 text-align: center;  

 margin-left: -5px;  

 margin-top: -5px;  

 position: relative;  

 z-index: 1;  

}  

.box li a:hover{border-color: #f00;z-index: 2;}  

</style> 

</head> 

<body> 

<p class="xttblog"

 <ul class="box"

  <li><a href="#" title="1"><img  src="/static/imghw/default1.png"  data-src="sh.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

  <li><a href="#" title="2"><img  src="/static/imghw/default1.png"  data-src="bd.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

  <li><a href="#" title="3"><img  src="/static/imghw/default1.png"  data-src="tb.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

  <li><a href="#" title="4"><img  src="/static/imghw/default1.png"  data-src="fh.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

  <li><a href="#" title="5"><img  src="/static/imghw/default1.png"  data-src="tb.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

  <li><a href="#" title="6"><img  src="/static/imghw/default1.png"  data-src="tb.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

  <li><a href="#" title="7"><img  src="/static/imghw/default1.png"  data-src="tb.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

  <li><a href="#" title="8"><img  src="/static/imghw/default1.png"  data-src="tb.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

  <li><a href="#" title="9"><img  src="/static/imghw/default1.png"  data-src="tb.jpg"  class="lazy"  / alt="HTML9マスグリッドレイアウトの実装方法" ></a></li> 

 </ul> 

</p> 

</body> 

</html>

ログイン後にコピー


以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。

HTML 9 マスグリッドレイアウトの実装方法に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート