Web开发——HTML基础(HTML响应式Web设计 Bootstrap)
参考:
目录:
1、什么是响应式 Web 设计?
- RWD 指的是响应式 Web 设计(Responsive Web Design)
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
2、创建自己的响应设计
举例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>My test page</title> 6 7 <!--float:整体向左浮动/向右浮动--> 8 <!--margin:边缘,到边缘的距离--> 9 <!--padding:填充物--> 10 <!--width:宽度--> 11 <!--height:高度--> 12 <!--border:边框--> 13 <style> 14 .city { 15 float: left; 16 margin: 50px; 17 padding: 15px; 18 width: 300px; 19 height: 300px; 20 border: 1px solid black; 21 } 22 </style> 23 </head> 24 25 <body> 26 <h1>W3School Demo</h1> 27 <h2>Resize this responsive page!</h2> 28 29 <div class="city"> 30 <h2>London</h2> 31 <p>London is the capital city of England.</p> 32 <p>It is the most populous city in the United Kingdom, 33 with a metropolitan area of over 13 million inhabitants.</p> 34 </div> 35 36 <div class="city"> 37 <h2>Paris</h2> 38 <p>Paris is the capital and most populous city of France.</p> 39 </div> 40 41 <div class="city"> 42 <h2>Tokyo</h2> 43 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, 44 and the most populous metropolitan area in the world.</p> 45 </div> 46 47 </body> 48 </html>
输出结果:略。
3、使用 Bootstrap
另一个创建响应式设计的方法,是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML、CSS和JS框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>My test page</title> 6 7 <link rel="stylesheet" 8 href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 9 </head> 10 11 <body> 12 <div class="container"> 13 <div class="jumbotron"> 14 <h1>W3School Demo</h1> 15 <h2>Resize this responsive page!</h2> 16 </div> 17 </div> 18 19 <div class="container"> 20 <div class="row"> 21 22 <div class="col-md-4"> 23 <h2>London</h2> 24 <p>London is the capital city of England.</p> 25 <p>It is the most populous city in the United Kingdom, 26 with a metropolitan area of over 13 million inhabitants.</p> 27 </div> 28 29 <div class="col-md-4"> 30 <h2>Paris</h2> 31 <p>Paris is the capital and most populous city of France.</p> 32 </div> 33 34 <div class="col-md-4"> 35 <h2>Tokyo</h2> 36 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, 37 and the most populous metropolitan area in the world.</p> 38 </div> 39 </div> 40 </div> 41 42 </body> 43 </html>
输出结果:略。
posted on 2018-10-13 18:57 zyjhandsome 阅读(605) 评论(0) 编辑 收藏 举报