HTML学习笔记(Day4)

来源：互联网发布：淘宝怎么优化宝贝排名靠前编辑：程序博客网时间：2024/05/22 16:52

一、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

阅读全文

0 0