Blogger Information
Blog 36
fans 1
comment 0
visits 32437
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
块级元素|行内元素|行内块级元素学习-2018年8月13日
宋超的博客
Original
987 people have browsed it

实例1

<!DOCTYPE html>
<html>
<head>
	<title>文本控制</title>
	<mate charset="utf-8">
</head>
<body>
	<h1>这是一个h1标签</h1>
	<h2>这是一个h2标签</h2>	
	<h3>这是一个h3标签</h3>
	<h4>这是一个h4标签</h4>
	<h5>这是一个h5标签</h5>
	<h6>这是一个h6标签</h6>
	<b>这是粗体标签b</b>
	<p>php中文网,好好学习天天向上。<br>php中文网,好好学习天天向上。php中文网,好好学习天天向上。php中文网,好好学习天天向上。php中文网,好好学习天天向上。<br>php中文网,好好学习天天向上。php中文网,好好学习天天向上。php中文网,好好学习天天向上。<br>php中文网,好好学习天天向上。php中文网,好好学习天天向上。php中文网,好好学习天天向上。</p>
<strong>php中文网,定义着重字</strong>
<i>这是一个斜体i</i>
<em>定义着重字</em>
<del>定义删除标签</del>
<del>388</del><span>288元</span>
<pre>预 格式化 文本</pre>
<p></p>
<span>688</span>
块级元素:div h1~h6 p    特点:独占一行 对宽高属性值生效
行内元素:i b strong...  特点:可共存于一行对宽高属性值不生效
行内块元素:结合了块级以及行内的特点
<img src="http://www.php.cn/static/images/logo.png" style="whidth:100px;height:200px;" />
行内块级相互转换:
display:inline 将块级元素转换为行内
display:inline-block;将块级元素转换为行内块元素
display:block;将行内元素转换为块级元素
<div style="width:100px;height:100px;background:green;display:inline;">123</div>
<div style="width:100px;height:100px;background:red;display:inline-block">123</div>
<div style="width:100px;height:100px;background:#055;display:block">123</div>
<div style="width:100px;height:100px;background:#ccc;display:inline-block;">123</div>
<div style="width:100px;height:100px;background:pink;display:inline-block;">123</div>
</body>	
</head>
</html>

运行实例 »

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

实例2

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文本控制2</title>
	<style type="text/css">
		p{font-weight:bold;/*字体加粗*/
			font-size:14px;/*字体大小*/
			font-family:微软雅黑;/*字义字体*/
			text-indent:2em;/*文本缩进*/			
			}
		h1{text-align:center;/*文本对齐; left right*/
			height:100px;
			line-height:100px; 
			background:#ccc;
			}
		span{font-size:80px;font-weight:bold;font-family:georgia; }
		img{width:200px;height:200px;}
		i{display:block;widht:250px;height:40px;font-size:14px;background:pink;overflow:hidden; margin-bottom:20px;}/*溢出隐藏*/
		i:hover{overflow:visible;height:auto;}/*在英文状态下编写代码;默认值,内容不会被隐藏,元素会被呈现在元素框外;*/
		</style>
</head>
<body>
	<h1>php</h1>
	<p>php中文网</p>
<br>
<!-- GOOGLE_logo -->
<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>
<!-- 图文混排 -->
<hr>
<p style="display:inline-block;width:200px;height:200px;">市面上常见的提升人际关系与执行力的畅销书,比如卡耐基《人性的弱点》,比如柯维《高效能人士的七个习惯》,有人说前者是“提升人际关系的圣经”,也有人说它“讲的是谁都懂的道理,但是犯错的人根本意识不到,所以根本没用”;有人说后者“改变了自己的人生轨迹”,也有人说它“老生常谈,名不副实”。</p>
<img src="images/22.jpg">
<br><br>
<img class="m1" src="images/22.jpg">
<i style="display:block;width:200px;height:34px;">市面上常见的提升人际关系与执行力的畅销书,比如卡耐基《人性的弱点》,比如柯维《高效能人士的七个习惯》,有人说前者是“提升人际关系的圣经”,也有人说它“讲的是谁都懂的道理,但是犯错的人根本意识不到,所以根本没用”;有人说后者“改变了自己的人生轨迹”,也有人说它“老生常谈,名不副实”。</i>

</body>
</html>

运行实例 »

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

以上是demo和demo2的课堂手打文档

作业实例代码

<!DOCTYPE html>
<html>
	<head>
		<title>2018.08.13作业</title>
		<meta charset="utf-8">
		<style type="text/css">
		body{background:#ccc;padding:0px;margin:0px;font-family:Microsoft YaHei,宋体;}
		h1{text-align:center;padding:10px;margin:0px;}
		div{background:#fff;}
		span{padding-left:30px;background:#EDEDED;display:block;font-size:13px;height:25px;line-height:25px;}
		small{margin:0px 20px;}
		a{color:#539ff3;}
		a:link{text-decoration:none;}
		strong{text-align:right;display:block;font-size:13px;}
		</style>
	</head>
	<body>
		<div style="margin:0px auto;width:600px;height:800px;">
			<h1>微笑的人生最美</h1>
		<span>
			<small>2018-08-13</small>
			<small>来源:PHP中文网</small>
			<span style="background:url(images/1.png) no-repeat center left;display:inline-block;float:right; margin-right:20px;"><a href="http://www.php.cn">PHP中文网</a></span>
		</span>
		<div style="padding:8px;">
			<div style="text-align:center; display:block; overflow:hidden;width:400px;height:200px;margin:5px auto;">
		<img src="https://img.jj59.com/c/5b297afc3765.jpg"></div>
						<p>喜欢这样一种生活,一人,一心窗,一份淡雅的情怀,一个只属于自己的世界。以清水涤心,用文字取暖,简单着,明媚着,便快乐着。</p>
<p>欣然于这样一种日子,独坐于岁月一隅,指尖流淌着阳光的美好,捧着一缕岁月的暖香,夕阳下,轻拥落日余晖的绚丽,窗外是红尘喧嚣,心中却是风轻云淡。</p>
<p>清简如水日子,婉约了似水流年的情怀。</p>
<p>独处的时光,可以思考;可以遗忘,可以清扫心灵的尘垢,是灵魂修复的过程,生命的感悟就在这份静好中得到领悟,灵魂就在这份静谧中得以升华。</p>
<p>岁月如一条河,纵使是风平浪静的湖面,不关悲喜,只在浅释岁月静美,一个人的世界亦能婉转成歌。</p></p></p><strong>责任编辑:风花雪月</strong>
<span style="background:#fff;color:#999;">声明:该文观点仅代表作者本人</span>
</div>
		</div>

	</body>
</html>

运行实例 »

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

作业实现效果图
zy1.jpg

学习总结:

  1. 学习了解什么是行内素材,块级元素,行内块级元素,并对这些元素之间的转换。

  2. 学习对文本的控制:字体大小、加粗、斜体、字体控制。


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