适配一下网页

jiejieyuy
162 阅读6分钟

前几天我看了看bootstrap,发觉里面的布局的css里有对各种不同情况下的屏幕分辨率有着规定，所以我就用这些css弄了一下适配的问题，因为以前看网页和自己写一点网页，对于适配总是很迷惑，所以我现在做一下，进行尝试一下。一下是我写的代码。我的代码写的不怎么漂亮，所以请见谅。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>bootstrap</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
  10. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  11. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  13. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  14. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  16. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  17. <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
  19. <!-- <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-grid.css"> -->
  20. </head>
  21. <style type="text/css">
  22. #nav_l{padding: 3px;font-size: 20px;}
  23. #nav{border-bottom: solid 1px grey;}
  24. #ban{padding-top: 10px;}
  25. .overlay {
  26. height: 0%;
  27. width: 100%;
  28. position: fixed;
  29. z-index: 1;
  30. top: 0;
  31. left: 0;
  32. background-color: rgb(0,0,0);
  33. background-color: rgba(0,0,0, 0.9);
  34. overflow-y: hidden;
  35. transition: 0.5s;
  36. }
  38. .overlay-content {
  39. position: relative;
  40. top: 25%;
  41. width: 100%;
  42. text-align: center;
  43. margin-top: 30px;
  44. }
  46. .overlay a {
  47. padding: 8px;
  48. text-decoration: none;
  49. font-size: 36px;
  50. color: #818181;
  51. display: block;
  52. transition: 0.3s;
  53. }
  55. .overlay a:hover, .overlay a:focus {
  56. color: #f1f1f1;
  57. }
  59. .overlay .closebtn {
  60. position: absolute;
  61. top: 20px;
  62. right: 45px;
  63. font-size: 60px;
  64. }
  67. </style>
  68. <body>
  69. <div class="container">
  70. <div class="row">
  71. <div class="col-sm-2 d-none d-sm-block">
  72. <img src="http://placehold.it/200x120"/>
  73. </div>
  74. <div class="col-sm-8 d-none d-sm-block">
  75. <h3 align="center">This is a Test</h3>
  76. <h5 align="center"> this is for bootstrap</h5>
  77. </div>
  78. <div class="col-sm-2 d-none d-sm-block">
  79. <img src="http://placehold.it/200x120"/>
  80. </div>
  82. <div class="col-sm-12 d-block d-sm-none">
  83. <h3 align="center">This is a Test</h3>
  84. <h5 align="center"> this is for bootstrap</h5>
  85. </div>
  86. </div>
  88. <div class="row" style="height:50px;" id="nav">
  89. <!--div class="col-sm-1" id="nav_l"><a href="#">home</a></div>
  90. <div class="col-sm-1" id="nav_l"><a href="#">page</a></div>
  91. <div class="col-sm-1" id="nav_l"><a href="#">article</a></div>
  92. <div class="col-sm-1" id="nav_l"><a href="#">conection</a></div-->
  93. <div class="col-sm-12 d-none d-md-block">
  94. <ul class="nav nav-tabs " style="font-size: 18px;">
  95. <li class="nav-item"><a href="#" class="nav-link active" >home</a></li>
  96. <li class="nav-item"><a href="#" class="nav-link">page</a></li>
  97. <li class="nav-item"><a href="#" class="nav-link">article</a></li>
  98. <li class="nav-item"><a href="#" class="nav-link">conection</a></li>
  99. </ul>
  100. </div>
  102. <div class="col-sm-12 d-block d-md-none">
  103. <div id="myNav" class="overlay">
  104. <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  105. <div class="overlay-content">
  106. <a href="#">home</a>
  107. <a href="#">page</a>
  108. <a href="#">article</a>
  109. <a href="#">connection</a>
  110. </div>
  111. </div>
  112. <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
  113. </div>
  114. <script type="text/javascript">
  115. function openNav() {
  116. document.getElementById("myNav").style.height = "100%";
  117. }
  119. function closeNav() {
  120. document.getElementById("myNav").style.height = "0%";
  121. }
  122. </script>
  123. </div>
  124. <div class="row" id="ban" >
  125. <div class="carousel slide" data-ride="carousel" id="demo">
  126. <!-- <img src="http://placehold.it/1100x440"/> -->
  127. <ul class="carousel-indicators">
  128. <li data-target="#demo" class="active" data-slide-to="0"></li>
  129. <li data-target="#demo" data-slide-to="1"></li>
  130. <li data-target="#demo" data-slide-to="2"></li>
  131. </ul>
  132. <div class=" carousel-inner d-none d-md-block">
  133. <div class="carousel-item active"><img src="http://placehold.it/1100x440"/></div>
  134. <div class="carousel-item "><img src="http://placehold.it/1100x440"/></div>
  135. <div class="carousel-item "><img src="http://placehold.it/1100x440"/></div>
  136. </div>
  137. <div class=" carousel-inner ">
  138. <div class="carousel-item active"><img class="mw-100" src="http://placehold.it/1100x440"/></div>
  139. <div class="carousel-item "><img class="mw-100" src="http://placehold.it/1100x440"/></div>
  140. <div class="carousel-item "><img class="mw-100" src="http://placehold.it/1100x440"/></div>
  141. </div>
  143. <a href="#demo" class="carousel-control-prev" data-slide="prev">
  144. <span class="carousel-control-prev-icon" ></span>
  145. </a>
  146. <a href="#demo" class="carousel-control-next" data-slide="next">
  147. <span class="carousel-control-next-icon"></span>
  148. </a>
  149. </div>
  150. </div>
  152. <div class="row" style="margin-top: 10px;">
  153. <div class="col-sm-8">
  154. <img src="http://placehold.it/700x440"/ class="d-none d-md-block">
  155. <img src="http://placehold.it/700x440" class="mw-100 d-block d-md-none" />
  156. <h3><a href="#">Llamas: Great Pets or the Best Pets?</a></h3>
  157. <p>Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or he best pets? Read the full article to find out!</p> <p><a href="#" class="small radius nice blue button">Read More →</a></p>
  158. </div>
  159. <div class="col-sm-4" >
  160. <div class="row">
  161. <div class="col-sm-6">
  162. <img src="http://placehold.it/160x150"/>
  163. </div>
  164. <div class="col-sm-6">
  165. <h5><a href="">Alpaca Farm Closed</a></h5>
  166. <p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →</a></p>
  167. </div>
  168. </div>
  170. <div class="row">
  171. <div class="col-sm-6">
  172. <img src="http://placehold.it/160x150"/>
  173. </div>
  174. <div class="col-sm-6">
  175. <h5><a href="">Alpaca Farm Closed</a></h5>
  176. <p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →</a></p>
  177. </div>
  178. </div>
  180. <div class="row">
  181. <div class="col-sm-6">
  182. <img src="http://placehold.it/160x150"/>
  183. </div>
  184. <div class="col-sm-6">
  185. <h5><a href="">Alpaca Farm Closed</a></h5>
  186. <p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →</a></p>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  193. <div class="container" style="border-top: solid 1px grey; padding-top: 10px;">
  194. <div class="row">
  195. <div class="col-sm-3">
  196. <img src="http://placehold.it/260x190" />
  197. <h5><a href="#">Feature 1</a></h5>
  198. <p>Description<br /><a href="#">Read More →</a></p>
  199. </div>
  200. <div class="col-sm-3">
  201. <img src="http://placehold.it/260x190" />
  202. <h5><a href="#">Feature 1</a></h5>
  203. <p>Description<br /><a href="#">Read More →</a></p>
  204. </div>
  205. <div class="col-sm-3">
  206. <img src="http://placehold.it/260x190" />
  207. <h5><a href="#">Feature 1</a></h5>
  208. <p>Description<br /><a href="#">Read More →</a></p>
  209. </div>
  210. <div class="col-sm-3">
  211. <img src="http://placehold.it/260x190" />
  212. <h5><a href="#">Feature 1</a></h5>
  213. <p>Description<br /><a href="#">Read More →</a></p>
  214. </div>
  215. </div>
  216. <div class="row"><p><strong>The Foundation Times</strong><br />&copy; 2025 no rights reserved.</p></div>
  217. </div>
  218. </body>
  219. </html>  


avatar
文章
阅读
粉丝