首页 > web前端 > css教程 > 响应式布局的简单案例介绍

响应式布局的简单案例介绍

高洛峰
发布: 2017-03-07 14:14:37
原创
1110 人浏览过

响应式布局

响应式布局在面对不同分辨率设备灵活性强,在平时的网页设计中基本上都要用到响应式布局设计,它给我们提供了良好的用户浏览页面,能带给我们更好的客户体验,下面给大家分享下我做的一个简单的响应式的布局:

响应式布局的简单案例介绍

响应式布局的简单案例介绍

不同的页面会适用不同大小浏览器页面,它会随着分辨率的变化而变化。代码展示如下:

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

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

  p{   

    font-size: 12px;   

  }   

  header{   

    width: 100%;   

  }   

  header img{   

    width: 100%;   

  }   

  @media (min-width: 1300px) and (max-width:1400px) {   

    #left{   

      float: left;   

      width: 30%;   

      margin: 0px 50px;   

    }   

    #left #logo-bg{   

      margin: 10% 10%;   

      width: 80%;   

      position: relative;   

    }   

    #left #logo{   

      float: left;   

      width: 12%;   

      position: absolute;   

      left: 13%;   

      top: 230px;   

    }   

    #left p{   

      margin-bottom: -20px;   

    }   

    #left p,h4{   

      text-align: center;   

      color: red;   

    }   

    #right{   

      float: left;   

      width: 60%;   

      margin: 15% 0px;   

    }   

    #right h2{   

      text-align: center;   

    }   

    #right fieldset{   

      text-align: center;   

      border-left: none;   

      border-right: none;   

      border-bottom: none;   

    }   

    #right fieldset legend{   

      padding: 0px 20px;   

    }   

    #fen{   

      width: 100%;   

      -webkit-column-count: 6;   

      -moz-column-count: 6;   

      -o-column-count: 6;   

      -ms-column-count: 6;   

      column-count: 6;   

      -webkit-column-gap: 1em;   

      -moz-column-gap: 1em;   

      -o-column-gap: 1em;   

      -ms-column-gap: 1em;   

      column-gap: 1em;   

    }   

    #fen img{   

      width: 100%;   

      border-radius: 10px 10px 10px 10px;   

    }   

    #fen p,h4{   

      text-align: center;   

      color: red;   

    }   

    #fen p{   

      margin-bottom: -20px;   

    }   

    #di p{   

      text-align: center;   

    }   

    #di p span{   

       color: red;   

    }   

  }   

  @media (min-width: 1000px) and (max-width:1300px){   

    #left{   

      float: left;   

      width: 30%;   

      margin: 0px 50px;   

    }   

    #left #logo-bg{   

      margin: 10% 10%;   

      width: 80%;   

      position: relative;   

    }   

    #left #logo{   

      width: 12%;   

      position: absolute;   

      left: 14%;   

      top: 190px;   

    }   

    #left p{   

      margin-bottom: -20px;   

    }   

    #left p,h4{   

      text-align: center;   

      color: red;   

    }   

    #right{   

      float: left;   

      width: 60%;   

      margin: 15% 0px;   

    }   

    #right h2{   

      text-align: center;   

    }   

    #right fieldset{   

      text-align: center;   

      border-left: none;   

      border-right: none;   

      border-bottom: none;   

    }   

    #right fieldset legend{   

      padding: 0px 20px;   

    }   

    #fen{   

      width: 100%;   

      -webkit-column-count: 3;   

      -moz-column-count: 3;   

      -o-column-count: 3;   

      -ms-column-count: 3;   

      column-count: 3;   

      -webkit-column-gap: 1em;   

      -moz-column-gap: 1em;   

      -o-column-gap: 1em;   

      -ms-column-gap: 1em;   

      column-gap: 1em;   

    }   

    #fen img{   

        width: 100%;   

        border-radius: 10px 10px 10px 10px;   

    }   

    #fen p,h4{   

        text-align: center;   

        color: red;   

      }   

    #fen p{   

        margin-bottom: -20px;   

    }   

    #di p{   

      text-align: center;   

    }   

    #di p span{   

      color: red;   

    }   

  }   

</style>

</head>

<body>

  <header>

    <img src="img/rag.png" />

  </header>

  <aside id="left">

    <img src="img/logo-bg.png" id="logo-bg"/>

    <img src="img/logo.png" id="logo" />

    <hr />

    <p>THE</p>

    <h4>WEBLOCUE</h4>

    <hr />

    <p>THE</p>

    <h4>WEBLOCUE</h4>

    <hr />

    <p>THE</p>

    <h4>WEBLOCUE</h4>

    <hr />

  </aside>

  <article id="right">

    <h2>“Give me problems, give me work.”</h2>

    <p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>

    <p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>

    <fieldset><legend>victors</legend></fieldset>

    <p id="fen">

      <img src="img/1.jpg" />

      <p>SETCOME</p>

      <h4>HOLEMES</h4>

      <img src="img/2.jpg" />

      <p>SETCOME</p>

      <h4>HOLEMES</h4>

      <img src="img/3.jpg" />

      <p>SETCOME</p>

      <h4>HOLEMES</h4>

      <img src="img/4.jpg" />

      <p>SETCOME</p>

      <h4>HOLEMES</h4>

      <img src="img/5.jpg" />

      <p>SETCOME</p>

      <h4>HOLEMES</h4>

      <img src="img/6.jpg" />

      <p>SETCOME</p>

      <h4>HOLEMES</h4>

    </p>

    <fieldset><legend>*</legend></fieldset>

    <p id="di">

      <p>In the year 1878 I took <span>Suing table</span> dogree of Doctor</p>

      <p>What the year 2016 I took dogree <span>Ruing roid</span> of Doctor</p>

    </p>

  </article>

</body>

</html>

登录后复制

做的不够严谨,因为时间问题,请见谅。

以上这篇响应式布局的简单案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多响应式布局的简单案例介绍相关文章请关注PHP中文网!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板