Blogger Information
Blog 2
fans 0
comment 0
visits 1545
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML语言与CSS构成的HTML文档-案例演示-图文混排-8.13作业
放飞的博客
Original
630 people have browsed it

以下为示例,利用新学的元素标签如h1或p可写标题,span或p可写文本行或块。其中span默认display:inline,即不换行。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文本控制</title>
	<style type="text/css">
		p{font-weight: bold;/*定义文字为粗体*/
			font-size: 30px; /* 定义字体大小*/
			font-family:楷体;   
			}
		h1{text-align: center;/*文本居中,还可选left或right*/
			height: 100px;
			background: #ccc;
			line-height: 100px;
			}
		span{font-size: 40px;
			font-weight: bold;
			font-family: georgia;
			}
		img{width: 400px;
			height: 400px;
			margin: 0 auto;
			}
		b{display: block;
			width: 400px;
			height: 40px;
			background: pink;
			overflow: hidden;/*该块已定义大小,此为溢出隐藏*/
			margin-bottom: 100px;
			}
		b:hover{overflow:visible;/*默认值,内容不会被修剪,元素会被呈现在元素框之外;*/
			}	
		body{margin: 0 auto;/*body整体居中*/
			width:400px;
			}
		.clear{line-height: 50px;
			display: block;
			}/*清除浮动影响*/
		.aligin{margin: 0 auto;/*内容块居中*/
			text-align: center;
			}		
	</style>
</head>
<body>
	<h1>php中文网</h1>
	<p class="aligin">php中文网</p>
	<br>
	<!-- google logo -->
	<div class="aligin">
	<span style="color: #0388F1">G</span>
	<span style="color:rgb(245,28,39);">o</span>
	<span style="color: #ffe80e">o</span>
	<span style="color: #0388f1">g</span>
	<span style="color: #39ff1b">l</span>
	<span style="color: #ffe80e">e</span>
	</div>
	<div class="clear">
		
	</div>
	<br>
	<!-- 图文内容编排 -->
	<p style="display: inline-block;width: 400px;height: 400px;">
		据Engadget消息,谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire,它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空。	
	</p>
	<div class="clear">
		
	</div>
	<img class="aligin" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534788958126&di=7355aa9043e03ede76458735f61c600e&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F201510_28_11%2Fa1v6m03772626548451.jpeg" alt="示例图片" width="400px">
	<br>
	<div class="clear">
		
	</div>
	<img class="aligin" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534788958126&di=7355aa9043e03ede76458735f61c600e&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F201510_28_11%2Fa1v6m03772626548451.jpeg" alt="示例图片" width="400px">
	<div class="clear">
		
	</div>
	<b>据Engadget消息,谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire,它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空。	
	</b>
	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post