您现在的位置是：网站首页> 编程资料编程资料

响应式布局的简单案例响应式设计你需要了解的知识点响应式布局总结(推荐)css3media响应式布局实例浅谈响应式设计

2023-10-21 325人已围观

简介 下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦

响应式布局

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

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

XML/HTML Code复制内容到剪贴板
  1. >    
  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 fi

    上一篇：全面了解行内元素与块级元素的区别对行内元素和块级元素的一些认识浅谈CSS块级元素与行内元素(内联元素)的区别和联系 进一步理解CSS编程中的块级元素和行内元素CSS行内元素和块级元素的居中实例分析

    下一篇：CSS3实现iPhone滑动解锁功能代码CSS3实现苹果手机解锁的字体闪亮效果示例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网