004 | HTML

“类”

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式,或者为不同的类设置不同的样式。


<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}   
style>
head>

<body>

<div class="cities">
<h2>Londonh2>

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

body>
html>

分类块级元素

HTML

元素是块级元素。它能够用作其他 HTML 元素的容器。
设置
元素的类,使我们能够为相同的
元素设置相同的类。


<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
style>
head>

<body>

<div class="cities">
<h2>Londonh2>
<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>Parish2>
<p>Paris is the capital and most populous city of France.p>
div>

<div class="cities">
<h2>Tokyoh2>
<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>

分类行内元素

HTML 元素是行内元素,能够用作文本的容器。
设置 元素的类,能够为相同的 元素设置相同的样式。


<html>
<head>
<style>
  span.red {color:red;}
style>
head>
<body>

<h1>My <span class="red">Importantspan> Headingh1>

body>
html>

“布局”

使用

元素的 HTML 布局
注释:
元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个
元素来创建多列布局:


<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 Galleryh1>
div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
div>

<div id="section">
<h2>Londonh2>
<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>

你可能感兴趣的:(前端)