实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
</head>
<style type="text/css">
.boldSpan{
font-weight: bold;/*定义粗体*/
font-size: 10px; /*定义字体大小*/
font-family: 楷体;/*定义字体*/
}
.centerH1{
text-align: center; /*定义文本居中*/
height: 100px;/* 定义高度*/
background: red; /*定义背景色*/
line-height: 100px; /*设定行高 垂直居中*/
color: #FFF;
}
div span{
font-size: 50px;
font-weight: bold;
font-family: Cambria;
}
.amds{
width: 200px;
height: 40px;
overflow: hidden;
}
.amds:hover{
overflow:visible;
margin-bottom: 50px; /*外边距增加50 显示完整页面效果*/
}
</style>
<body>
<!-- H1-h6 为标题标签 顺序从大到小 -->
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
<b>这是粗标签</b><!-- 字体加粗标签 -->
<p>坚决打赢脱贫攻坚战，让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，总书记的扶贫足迹遍布全国，对坚决打赢脱贫攻坚战作出重要战略部署。党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。</p> <!-- p标签是为段落标签 且标签为独占一行-->
<br><!-- 换行标签 -->
<strong>加重语气标签</strong> <!-- 加重语气标签,其实也是粗体的实用 -->
<br>
<i>斜体标签的运用</i>
<em>定义着重字的标签</em>
<br>
<del>定义删除标签</del> <!--定义删除标签,以下该标签例子-->
<span>火热折扣价:3999</span> <del>原价:49999</del>
<pre>预期格式文本 可输出空格 换行符等预计格式文本</pre>
<!---块级标签的讲解-->
<p>
块级元素包含:
div 、 h1-h6 p <!--其特点为独占一行 自带换行 对宽高设定有效例子如下-->
<p style="background:red;width: 200px;height: 200px">我是块级标签哦</p>
</p>
<p>
行内元素包含:
span、 i 、 em、 <!--其特点为可以共存一行 但对其宽高设定无效 例子如下-->
<br>
<span style="color: pink">我是行内元素pink</span>
</p>
<p>
行内块级元素 : <!--其特可设定宽高 以及 背景等 例子如下-->
<img style="width: 200px;height: 200px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534173995625&di=2169f6eeeab91b556ea0ab7b4153bc6d&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F018c695676cf7e6ac725ad90872341.jpg"><span>1321</span>
</p>
<!--行块级转换- 块级元素转成行内元素 宽高无效-->
<div style="background:red;display:inline">块转行内元素</div>
<!--行块级转换- 块级转行内块元素 可与其他元素并排 且能设定宽高-->
<div style="background:red;width: 100px;height:50px;display:inline-block;">块转行内块元素</div>
<!--行内元素转换- 行内元素转换为块级元素 设定宽高 独占一行-->
<span style="background:red;width: 100px;height:50px;display:block;">行内元素转块元素</span>
<br>
<!--行内元素转换- 行内元素转行内块级元素 可与其他元素并排 且能设定宽高-->
<span style="background:red;width: 100px;height:50px;display:inline-block;">行内元素转行内块元素</span>
<span style="background:red;width: 100px;height:50px;display:inline-block;">行内元素转行内块元素</span>
<pre>
单元小结
display: inline 将元素转换行内元素
display: inline-block 将元素转换行内块级元素
display: block 将元素转换成块级
三种元素分类
行内 块级 行内块级
</pre>
<!--css控制行内元素 之 字体控制-->
<span class="boldSpan">
阿茂大神呀
</span>
<!--css控制行内元素 之 字体控制-->
<h1 class="centerH1">
阿茂大神呀
</h1>
<!-- 1 制作 谷歌 图标 -->
<div>
<span style="color: #284FAA">G</span>
<span style="color: #B93729">o</span>
<span style="color: #BDAB01">o</span>
<span style="color: #3565D1">g</span>
<span style="color:RGB(0,91,6)">l</span>
<span style="color: #E53E2B;">e </span>
</div>
<!-- 制作图文混排 -->
<br>
<img style="width: 100px;height: 100px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534173995625&di=2169f6eeeab91b556ea0ab7b4153bc6d&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F018c695676cf7e6ac725ad90872341.jpg">
<p style="display: inline-block; width: 250px">
单元小结
display: inline 将元素转换行内元素
display: inline-block 将元素转换行内块级元素
display: block 将元素转换成块级
三种元素分类
行内 块级 行内块级
</p>
<!--溢出隐藏-->
<p class="amds">
单元小结
display: inline 将元素转换行内元素
display: inline-block 将元素转换行内块级元素
display: block 将元素转换成块级
三种元素分类
行内 块级 行内块级
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结: 灵活的运用块级 行内块级 行元素 三大类型 实现对html的布局效果
