杰晶网络

响应式布局的简单案例
网页制作 2024/11/24 佚名
3 2

响应式布局

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

响应式布局的简单案例

响应式布局的简单案例

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

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

标签：
响应式,布局
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“响应式布局的简单案例”
暂无“响应式布局的简单案例”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

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