南强小屋

响应式布局的简单案例
站长资源 2025/11/4 佚名
39 1538
南强小屋 Design By 杰米

响应式布局

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

响应式布局的简单案例

响应式布局的简单案例

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf-8" />    
  5. <title></title>    
  6. <style>    
  7. 　　p{    
  8. 　　　　font-size: 12px;    
  9. 　　}    
  10. 　　header{    
  11. 　　　　width: 100%;    
  12. 　　}    
  13. 　　header img{    
  14. 　　　　width: 100%;    
  15. 　　}    
  16. 　　@media (min-width: 1300px) and (max-width:1400px) {    
  17. 　　　　#left{    
  18. 　　　　　　float: left;    
  19. 　　　　　　width: 30%;    
  20. 　　　　　　margin: 0px 50px;    
  21. 　　　　}    
  22. 　　　　#left #logo-bg{    
  23. 　　　　　　margin: 10% 10%;    
  24. 　　　　　　width: 80%;    
  25. 　　　　　　position: relative;    
  26. 　　　　}    
  27. 　　　　#left #logo{    
  28. 　　　　　　float: left;    
  29. 　　　　　　width: 12%;    
  30. 　　　　　　position: absolute;    
  31. 　　　　　　left: 13%;    
  32. 　　　　　　top: 230px;    
  33. 　　　　}    
  34. 　　　　#left p{    
  35. 　　　　　　margin-bottom: -20px;    
  36. 　　　　}    
  37. 　　　　#left p,h4{    
  38. 　　　　　　text-align: center;    
  39. 　　　　　　color: red;    
  40. 　　　　}    
  41. 　　　　#right{    
  42. 　　　　　　float: left;    
  43. 　　　　　　width: 60%;    
  44. 　　　　　　margin: 15% 0px;    
  45. 　　　　}    
  46. 　　　　#right h2{    
  47. 　　　　　　text-align: center;    
  48. 　　　　}    
  49. 　　　　#right fieldset{    
  50. 　　　　　　text-align: center;    
  51. 　　　　　　border-left: none;    
  52. 　　　　　　border-right: none;    
  53. 　　　　　　border-bottom: none;    
  54. 　　　　}    
  55. 　　　　#right fieldset legend{    
  56. 　　　　　　padding: 0px 20px;    
  57. 　　　　}    
  58. 　　　　#fen{    
  59. 　　　　　　width: 100%;    
  60. 　　　　　　-webkit-column-count: 6;    
  61. 　　　　　　-moz-column-count: 6;    
  62. 　　　　　　-o-column-count: 6;    
  63. 　　　　　　-ms-column-count: 6;    
  64. 　　　　　　column-count: 6;    
  65. 　　　　　　-webkit-column-gap: 1em;    
  66. 　　　　　　-moz-column-gap: 1em;    
  67. 　　　　　　-o-column-gap: 1em;    
  68. 　　　　　　-ms-column-gap: 1em;    
  69. 　　　　　　column-gap: 1em;    
  70. 　　　　}    
  71. 　　　　#fen img{    
  72. 　　　　　　width: 100%;    
  73. 　　　　　　border-radius: 10px 10px 10px 10px;    
  74. 　　　　}    
  75. 　　　　#fen p,h4{    
  76. 　　　　　　text-align: center;    
  77. 　　　　　　color: red;    
  78. 　　　　}    
  79. 　　　　#fen p{    
  80. 　　　　　　margin-bottom: -20px;    
  81. 　　　　}    
  82. 　　　　#di p{    
  83. 　　　　　　text-align: center;    
  84. 　　　　}    
  85. 　　　　#di p span{    
  86. 　　　　　　　color: red;    
  87. 　　　　}    
  88. 　　}    
  89. 　　@media (min-width: 1000px) and (max-width:1300px){    
  90. 　　　　#left{    
  91. 　　　　　　float: left;    
  92. 　　　　　　width: 30%;    
  93. 　　　　　　margin: 0px 50px;    
  94. 　　　　}    
  95. 　　　　#left #logo-bg{    
  96. 　　　　　　margin: 10% 10%;    
  97. 　　　　　　width: 80%;    
  98. 　　　　　　position: relative;    
  99. 　　　　}    
  100. 　　　　#left #logo{    
  101. 　　　　　　width: 12%;    
  102. 　　　　　　position: absolute;    
  103. 　　　　　　left: 14%;    
  104. 　　　　　　top: 190px;    
  105. 　　　　}    
  106. 　　　　#left p{    
  107. 　　　　　　margin-bottom: -20px;    
  108. 　　　　}    
  109. 　　　　#left p,h4{    
  110. 　　　　　　text-align: center;    
  111. 　　　　　　color: red;    
  112. 　　　　}    
  113. 　　　　#right{    
  114. 　　　　　　float: left;    
  115. 　　　　　　width: 60%;    
  116. 　　　　　　margin: 15% 0px;    
  117. 　　　　}    
  118. 　　　　#right h2{    
  119. 　　　　　　text-align: center;    
  120. 　　　　}    
  121. 　　　　#right fieldset{    
  122. 　　　　　　text-align: center;    
  123. 　　　　　　border-left: none;    
  124. 　　　　　　border-right: none;    
  125. 　　　　　　border-bottom: none;    
  126. 　　　　}    
  127. 　　　　#right fieldset legend{    
  128. 　　　　　　padding: 0px 20px;    
  129. 　　　　}    
  130. 　　　　#fen{    
  131. 　　　　　　width: 100%;    
  132. 　　　　　　-webkit-column-count: 3;    
  133. 　　　　　　-moz-column-count: 3;    
  134. 　　　　　　-o-column-count: 3;    
  135. 　　　　　　-ms-column-count: 3;    
  136. 　　　　　　column-count: 3;    
  137. 　　　　　　-webkit-column-gap: 1em;    
  138. 　　　　　　-moz-column-gap: 1em;    
  139. 　　　　　　-o-column-gap: 1em;    
  140. 　　　　　　-ms-column-gap: 1em;    
  141. 　　　　　　column-gap: 1em;    
  142. 　　　　}    
  143. 　　　　#fen img{    
  144. 　　　　　　　　width: 100%;    
  145. 　　　　　　　　border-radius: 10px 10px 10px 10px;    
  146. 　　　　}    
  147. 　　　　#fen p,h4{    
  148. 　　　　　　　　text-align: center;    
  149. 　　　　　　　　color: red;    
  150. 　　　　　　}    
  151. 　　　　#fen p{    
  152. 　　　　　　　　margin-bottom: -20px;    
  153. 　　　　}    
  154. 　　　　#di p{    
  155. 　　　　　　text-align: center;    
  156. 　　　　}    
  157. 　　　　#di p span{    
  158. 　　　　　　color: red;    
  159. 　　　　}    
  160. 　　}    
  161. </style>    
  162. </head>    
  163. <body>    
  164. 　　<header>    
  165. 　　　　<img src="img/rag.png" />    
  166. 　　</header>    
  167. 　　<aside id="left">    
  168. 　　　　<img src="img/logo-bg.png" id="logo-bg"/>    
  169. 　　　　<img src="img/logo.png" id="logo" />    
  170. 　　　　<hr />    
  171. 　　　　<p>THE</p>    
  172. 　　　　<h4>WEBLOCUE</h4>    
  173. 　　　　<hr />    
  174. 　　　　<p>THE</p>    
  175. 　　　　<h4>WEBLOCUE</h4>    
  176. 　　　　<hr />    
  177. 　　　　<p>THE</p>    
  178. 　　　　<h4>WEBLOCUE</h4>    
  179. 　　　　<hr />    
  180. 　　</aside>    
  181. 　　<article id="right">    
  182. 　　　　<h2>“Give me problems, give me work.”</h2>    
  183. 　　　　<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>    
  184. 　　　　<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>    
  185. 　　　　<fieldset><legend>victors</legend></fieldset>    
  186. 　　　　<div id="fen">    
  187. 　　　　　　<img src="img/1.jpg" />    
  188. 　　　　　　<p>SETCOME</p>    
  189. 　　　　　　<h4>HOLEMES</h4>    
  190. 　　　　　　<img src="img/2.jpg" />    
  191. 　　　　　　<p>SETCOME</p>    
  192. 　　　　　　<h4>HOLEMES</h4>    
  193. 　　　　　　<img src="img/3.jpg" />    
  194. 　　　　　　<p>SETCOME</p>    
  195. 　　　　　　<h4>HOLEMES</h4>    
  196. 　　　　　　<img src="img/4.jpg" />    
  197. 　　　　　　<p>SETCOME</p>    
  198. 　　　　　　<h4>HOLEMES</h4>    
  199. 　　　　　　<img src="img/5.jpg" />    
  200. 　　　　　　<p>SETCOME</p>    
  201. 　　　　　　<h4>HOLEMES</h4>    
  202. 　　　　　　<img src="img/6.jpg" />    
  203. 　　　　　　<p>SETCOME</p>    
  204. 　　　　　　<h4>HOLEMES</h4>    
  205. 　　　　</div>    
  206. 　　　　<fieldset><legend>*</legend></fieldset>    
  207. 　　　　<div id="di">    
  208. 　　　　　　<p>In the year 1878 I took <span>Suing table</span> dogree of Doctor</p>    
  209. 　　　　　　<p>What the year 2016 I took dogree <span>Ruing roid</span> of Doctor</p>    
  210. 　　　　</div>    
  211. 　　</article>    
  212. </body>    
  213. </html>  

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

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

原文地址：http://www.cnblogs.com/duzheqiang/p/5666465.html

标签：
响应式,布局
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米

评论“响应式布局的简单案例”

暂无响应式布局的简单案例的评论...
www.nqxw.com 南强小屋
8,675无损音乐
1,324高清电影
213破解软件
70,141收录教程

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网