<!DOCTYPE html>
<html>
<head>
<title>Aligning Images</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman", serif;
color: #665544;}
img.align-left {
float: left;
margin-right: 10px;}
img.align-right {
float: right;
margin-left: 10px;}
img.medium {
width: 250px;
height: 250px;}
</style>
</head>
<body>
<p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-left medium" /><b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p>
<p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-right medium" />Some magnolias, such as <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open. Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p>
</body>
</html>
3.使用CSS将图像居中
图像是内联元素，将其转换为块元素再使用auto属性居中
<!DOCTYPE html>
<html>
<head>
<title>Centering Images</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman", serif;
color: #665544;}
img.align-center {
display: block;
margin: 0px auto;}
img.medium {
width: 250px;
height: 250px;}
</style>
</head>
<body>
<p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-center medium" /><b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p>
</body>
</html>
4.背景图像background-image
背景图像是页面中最后加载的事物。
<!DOCTYPE html>
<html>
<head>
<title>Background Image (Body)</title>
<style type="text/css">
body {
background-image: url("images/pattern.gif");
color: white;
padding: 20px;}
</style>
</head>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p>
<h2>Ranunculus</h2>
<p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem.</p>
<h2>Tulip</h2>
<p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Background Repeat</title>
<style type="text/css">
body {
background-image: url("images/header.gif");
background-repeat: repeat-x;
color: #665544;
padding: 20px;}
h1 {
color: white;}
</style>
</head>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p>
<h2>Ranunculus</h2>
<p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem.</p>
<h2>Tulip</h2>
<p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p>
</body>
</html>
<head>
<title>Background Attachment</title>
<style type="text/css">
body {
background-image: url("images/tulip.gif");
background-repeat: no-repeat;
background-attachment: fixed;
color: #665544;
padding: 20px;}
</style>
</head>
6.背景图像定位
background-position:
关键字left center top bottom right组合
使用百分数：0% 0%左上角 50% 50%居中
<!DOCTYPE html>
<html>
<head>
<title>Background Position</title>
<style type="text/css">
body {
background-image: url("images/tulip.gif");
background-repeat: no-repeat;
background-position: center top;
color: #665544;
padding: 20px;}
</style>
</head>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p>
<h2>Ranunculus</h2>
<p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem.</p>
<h2>Tulip</h2>
<p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p>
</body>
</html>
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the "clearfix hack" to fix this (see example below).
When to use the Picture Element
There are two main purposes for the element:
Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first element with matching attribute values, and ignore any of the following elements.
Format Support
Some browsers or devices may not support all image formats. By using the element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.
浙公网安备 33010602011771号