ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3でレスポンシブレイアウトを作る方法

CSS3でレスポンシブレイアウトを作る方法

php中世界最好的语言
リリース: 2017-11-24 11:23:08
オリジナル
2852 人が閲覧しました

今日は、CSS3 で作成したレスポンシブ レイアウト の事例を紹介します。レスポンシブ性は、CSS3 の機能に習熟すれば、携帯電話と PC の両方に習熟できるようになります。の使用法。

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

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

<!DOCTYPE html>

<html>

      <head>

           <meta charset="UTF-8">

           <title></title>

           <style type="text/css">

                 *{padding: 0;margin: 0;}

                 html,body{width: 100%;height: 100%;background:url(img/bj.jpg) ;background-size: 100% 100%;}

                 #nav{width: 560px;height:40px ;margin: 10px auto;}

                 ul,li{list-style: none;}

                 .list{width: 560px;height: 40px;background: #fff;}

                 .list li{width: 50px;height: 40px;margin: 0 10px;float: left;

                            transition: all 1s;

                 }

                 .list li:nth-child(1){

                      background: url(img/1.png) top;

                 }

                 .list li:nth-child(2){

                      background: url(img/2.png) top;

                 }

                 .list li:nth-child(3){

                      background: url(img/3.png) top;

                 }

                 .list li:nth-child(4){

                      background: url(img/4.png) top;

                 }

                 .list li:nth-child(5){

                      background: url(img/5.png) top;

                 }

                 .list li:nth-child(6){

                      background: url(img/6.png) top;

                 }

                 .list li:nth-child(7){

                      background: url(img/7.png) top;

                 }

                 .list li:nth-child(8){

                      background: url(img/8.png) top;

                 }

                 .list li:hover{

                      background-position: bottom;

                 }

                 @media only screen and (min-width: 640px) and (max-width: 980px) {

                      #nav{position: fixed;top:100px;left:10px;width: 50px;height:400px ;margin: 10px auto;}

                       ul,li{list-style: none;}

                      .list{width: 67px;height: 400px;background: #fff;}

                      .list li{width: 50px;height: 40px;margin: 0 10px;float: left;

                                  transition: all 1s;

                      }

                 }

                 @media only screen and (min-width: 100px) and (max-width: 640px) {

                      #nav{position: fixed;top:100px;left:10px;width: 50px;height:400px ;margin: 10px auto;}

                      ul,li{list-style: none;}

                      .list{width: 67px;height: 400px;background: red;}

                      /*.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

                                  transition: all 1s;

                                  background: #fff;

                                  

                      }*/

                      

                 .list li:nth-child(1){

                      background: url(img/1.png) top;

                 }

                 .list li:nth-child(2){

                      background: url(img/2.png) top;

                 }

                 .list li:nth-child(3){

                      background: url(img/3.png) top;

                 }

                 .list li:nth-child(4){

                      background: url(img/4.png) top;

                 }

                 .list li:nth-child(5){

                      background: url(img/5.png) top;

                 }

                 .list li:nth-child(6){

                      background: url(img/6.png) top;

                 }

                 .list li:nth-child(7){

                      background: url(img/7.png) top;

                 }

                 .list li:nth-child(8){

                      background: url(img/8.png) top;

                 }

                 .list li:hover{

                      background-position: bottom;

                 }

                 .list li{width: 50px;height: 40px;margin: 0 10px;float: left;

                            transition: all 1s;

                            border-radius: 50%;

                 }

                 

                 }

                 

           </style>

      </head>

      <body>

           <div id="nav">

                 <ul>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      <li></li>

                      

                 </ul>

           </div>

      </body>

</html>

ログイン後にコピー

上記はレスポンシブ レイアウトの例です。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

関連書籍:

属性セレクターと疑似クラスセレクターの使用方法

CSS3 box-shadow の使用方法

適切な HTML タグの選択方法

以上がCSS3でレスポンシブレイアウトを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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