响应式布局

最新推荐文章于 2025-05-12 13:02:55 发布

wwf1225

最新推荐文章于 2025-05-12 13:02:55 发布

阅读量109

点赞数

响应式布局在网页设计中常用，灵活性强，能提供良好用户浏览体验。不同页面适用于不同大小浏览器页面，会随分辨率变化而变化。本文分享一个简单的响应式布局，并展示了相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

响应式布局

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

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

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>

　　　　<fieldset><legend>victors&villains</legend></fieldset>

　　　　<div 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" />