这次主要讲了文本标签与文本控制，文本标签讲了p标签、br标签、strong标签、b标签、i标签、h1-h6标签、del标签、pre标签等。讲了行内元素、块级元素以及行内块元素，以及它们之间的转化。文本控制讲了font-weight、font-size、font-family、text-align、line-height、overflow：hidden等等。
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本控制</title> </head> <body> <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h3标签</h4> <h5>这是一个h3标签</h5> <h6>这是一个h3标签</h6> <b>这是一个粗体标签b</b> <p>中国二手资源网是全国最大的虚拟资源交易平台，虚拟资源涵盖面广，商户与众多。网站主要有商业源码破解、网站源码、金蝶破解<br> 用友破解、OA破解、软件破解、素材交易、discuz插件破解、视频资源交易、域名交易、网站交易、点卡账号交易、商业教程交易等等<br> 您有闲置的二手虚拟资源吗？如办公文档word、excel、ppt、cad、psd等等都可以在二手资源网发布，可以赚钱，不用天天在线，售出<br> 有短信通知，可以网盘自动发货，不耽误您上班，不耽误您泡妞，发布即可盈利，无任何投入。 </p> <br> <br> <br> <strong>加重语气粗体</strong> <i>中国二手资源网是全国最大的虚拟资源交易平台</i> <em>定义着重字</em> <del>定义删除字标签</del> <span>现价399元</span><del>原价499</del> <span style="background:pink;width:200px;height:200px;">典型的行内元素，对宽高设置不生效</span>> 块级元素有div h1-h6 p 特点：独占一行，对宽高属性设置生效，自带空格换行 行内元素有span 特点：可以共存于一行，对宽高属性值设置不生效 行内块级元素有img 特点：既可以对宽高属性值设置生效，也可独占一行 <img src="url地址" style="width:100px:height:200px;/> 行内块级互相转换 display:inline 将块级元素转化为行内元素 display:inline-block将块级元素转换为行内块级元素 display:block将行内元素转化为块级元素 <div style="width:300px:height:300px;background:pink;display:inline;">123</div> <div style="width:400px:height:500px;background:blue;display:inline-block;">567</div> <span style="width:400px:height:500px;background:pink;display:block">89</span> <span style="width:400px:height:500px;background:green;display:inline-block;">100</span> <span style="width:400px:height:500px;background:red;display:inline-block;">110</span> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
<meta charset="utf-8">
<style type="text/css">
p{font-weight:bold;
font-size:30px;
font-family: 楷体;
}
h1{text-align: center;height: 100px;background: #ccc;line-height: bold;font-family: georgia}
span{font-size: 40px;font-weight: 20px;
}
img{width: 300px;height: 400px;}
p{display: block;width: 300px;height: 40px;background: pink;overflow: hidden;
}
b:hover{overflow: visible;}
</style>
</haed>
<body>
<h1>居中的</h1>
<p>php中文网</p>
<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:#0388F1">l</span>
<span style="color:#FFE80E>e</span>
<p style="display:inline-block;width:300px;height:400px;"></p>
<img src="images/1.jpg">
<br><br>
<img src="images/1.jpg">
<b>文字改编成块级元素</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
