1.布局
① 使用 <div> 元素的 HTML 布局,<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。
<!DOCTYPE html><html><head><style>#header { background-color:black; color:white; text-align:center; padding:5px;}把div理解成一个盒子,设置了盒子的高和宽,后面的盒子就自动跑到前面盒子没占的地方#nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }#section { width:350px; float:left; padding:10px; }#footer { background-color:black; color:white; clear:both; 清除前面float(浮动)的影响 text-align:center; padding:5px; }</style></head><body><div id="header"><h1>City Gallery</h1></div><div id="nav">London<br>Paris<br>Tokyo<br></div><div id="section"><h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div><div id="footer">Copyright ? W3Schools.com</div></body></html>
② 使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分:
HTML5 语义元素:
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(比如侧栏) |
footer | 定义文档或节的页脚 |
details | 定义额外的细节 |
summary | 定义 details 元素的标题 |
<!DOCTYPE html><html><head><style>header { background-color:black; color:white; text-align:center; padding:5px; }nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }section { width:350px; float:left; padding:10px; }footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }</style></head><body><header><h1>City Gallery</h1></header><nav>London<br>Paris<br>Tokyo<br></nav><section><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></section><footer>Copyright W3Schools.com</footer></body></html>
③ 使用表格的 HTML 布局 。<table> 元素不是作为布局工具而设计的,<table> 元素的作用是显示表格化的数据,使用 <table> 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式
复习表格:下面代码所定义的是一个一行一列的表格,<th>是这一行的表头,<td>是这一行的内容,<tr>定义了这一行。
<!DOCTYPE html><html><head><style>table.lamp { width:100%; border:1px solid #d4d4d4;}table.lamp th, td { padding:10px;}table.lamp th { width:40px;}</style></head><body> <table class="lamp"><tr> <th> <img src='/images/loading.gif' data-original="http://www.cnblogs.com//images/lamp1.jpg" style="height:32px;width:32px"> </th> <td> The table element was not designed to be a layout tool. </td></tr></table></body></html>
2.HTML 响应式 Web 设计
- RWD 指的是响应式 Web 设计(Responsive Web Design)
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
① 创建响应式设计的一个方法,是自己来创建它:
<!DOCTYPE html><html lang="en-US"><head><style>.city {float: left;margin: 5px;padding: 15px;width: 300px;height: 300px;border: 1px solid black;} </style></head><body><h1>W3School Demo</h1><h2>Resize this responsive page!</h2><br><div class="city"><h2>London</h2><p>London is the capital city of England.</p><p>It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p></div><div class="city"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p></div><div class="city"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></div></body></html>
② 使用 Bootstrap,另一个创建响应式设计的方法,是使用现成的 CSS 框架。Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><div class="container"><div class="jumbotron"> <h1>W3School Demo</h1> <p>Resize this responsive page!</p> </div></div><div class="container"><div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div></div></div></body></html>
★ 后续继续学习bootstrap。
原标题:从零开始HTML(二 2016/9/20)
关键词:HTML