你的位置:首页 > 网页设计

[网页设计]从零开始HTML(二 2016/9/20)


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="http://www.cnblogs.com//images/lamp1.jpg" alt="Note" 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。