一、HTML类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。 为相同的类设置相同的样式，或者为不同的类设置不同的样式。
1.HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。 设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类。
<!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <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> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> </body> </html>2.HTML <span> 元素是行内元素，能够用作文本的容器。 设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。 <!DOCTYPE html> <html> <head> <style> span.red {color:red;} </style> </head> <body> <h1>My <span class="red">Important</span> Heading</h1> </body> </html> 二、HTML布局1.使用<div>的布局
<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位，例如
<!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> <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> 2.使用HTML的网站布局略，样例见http://www.w3school.com.cn/html/html_layout.asp
二、响应式web设计
这里只摘录两个简单例子，详细学习准备放在Bootstrap部分
1.自主实现响应式设计
<!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>2.利用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>参照例子简单了解，详细学习放在后面。
Ref:www.w3school.com.cn
