Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

HTML+CSS 轻松入门之块级元素

什么是块级元素？

在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}


块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

 下面我们来看一段代码，这样就把a标签设置为块状元素了：

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


Weiter lernen
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>!important</title> <style type="text/css"> a{ display:block; width:100px; height:18px; background-color:green; /*设置背景色*/ color:#fff; /*设置字体颜色*/ } </style> </head> <body> <a href="#">PHP中文网</a> </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)  492779 spielt ab