Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

HTML+CSS 轻松入门之内联元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码将元素设置为内联元素

display:inline


内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

下面我们来写一段代码，块状元素是可以设置宽高的  内联元素是设置不了宽高的

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	a{
		width:100px;
		height:50px;
		background-color:green;  /*设置背景色*/
		color:#fff;  /*设置字体颜色*/
	}
</style>
</head>
<body>
   <a href="#">PHP中文网</a>
</body>
</html>

看上面这段代码，a 是内联元素，当我们设置宽高，是没有效果的，转换成块状元素就会有明显效果

下面我们来写一个实例  把块状元素转换成内联元素

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	div{
		display:inline;  /*转换成内联元素*/

		/*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/
		width:300px;
		height:200px;
		background-color:green;
		color:red;
	}
</style>
</head>
<body>
  	<div>欢迎大家来到php中文网</div>
</body>
</html>

以上代码中，块状元素转换成内联元素之后 是不可以设置宽高的

Weiter lernen
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ display:inline; /*转换成内联元素*/ /*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <div>欢迎大家来到php中文网</div> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492782 spielt ab