菜鸟学堂在线工具

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟学堂(edu.jb51.net)</title>
<style>
div
{
	float:right;
	width:120px;
	margin:0 0 15px 20px;
	padding:15px;
	border:1px solid black;
	text-align:center;
}
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95" height="84" /><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中,div元素是120像素宽,它包含了图像。
div元素会向右浮动。
Margins 被添加到div使得文本远离div。
Borders和padding被添加到div框架的图片和标题中
</p>
</body>
</html>

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟学堂(edu.jb51.net)</title>
<style>
div
{
    float:right;
    width:120px;
    margin:0 0 15px 20px;
    padding:15px;
    border:1px solid black;
    text-align:center;
}
</style>
</head>
<body>
<div>
<img src="logocss.gif" width="95" height="84" /><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

运行结果 在线运行