Blogger Information
Blog 38
fans 1
comment 0
visits 26003
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS样式以及块与行内元素之间的转换--2018年08月14日0时14分
一根火柴棒的博客
Original
891 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本控制</title>
	<style type="text/css">
		p{ font-weight: bold; /*定义粗体*/
		   font-size: 20px; /*定义字体大小*/
		   font-family: 楷体;
		   text-align: center;
		 }
		h1{ text-align: center;
			background:#CCC;
			line-height: 100px;
		  }
		span{font-size: "微软雅黑";
			font-weight: bold;
			font-size: 120px;
			font-family:georgia;
		    }
		 img{width: 200px;}
		 b{display: block;width: 300px;height: 40px;background: pink;overflow:hidden;margin-bottom:100px;}
		 b:hover{overflow: visible;}
	</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<br>
<br>

<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:rgb(245,28,39);">e</span>
<br>
<!--图文混排 -->
<p style="display:inline-block;width: 300px;height:400px" >据Engadget消息,谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire,它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空间,而目前Chromebook存储空间都不是很大。
</p>
<img src="1.png" alt="">
<b>虽然谷歌总是宣称Chrome OS能带来更简单、更安全的使用体验,但Chromebook的销量显然不及其他几款Windows系统的主流笔记本,因此Camfire也许可以视为谷歌对那些想在Chromebook上使用Windows的用户的一种妥协。</b>
</body>
</html>

运行实例 »

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

下面是手抄照片:

2018-08-13 作业手抄片段.jpg

上述代码总结和注释:

h1~h6 标题标签 独占一行
p 段落标签 独占一行
b 粗体标签
br 换行标签
strong 加重语气,也是粗体
i 斜体字
em 定义着重字
del 定义删除字标签
pre 预格式标签
span 文本标签
块级元素:div h1~h6 p 独占一行 对宽高属性值生效
行内: p span 可以共存于一行 对宽高属性值不生效 自带换行符
行内块元素: img 结合了块级以及行内的特点
行内块级相互转换:
display:inline 将块级元素转换成行内元素
display:inline-block 将块级元素转换成行内块元素
display:block 将行内元素转换为块级
font-weight: bold; 定义粗体
font-size: 30px; 定义字体大小
font-family: 楷体; 定义字体
overflow:hidden 溢出隐藏
hover{overflow:visible} 伪选择器 默认值,内容不会被修建,元素会被呈现在元素框之外

下面是作业代码截图以及预览图:

作业代码截图.png

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