实现代码
实例
<!doctype html>
<!-- 文件名: lesson02.html -->
<html>
<head>
<title>文本控制</title>
<meta charset="utf-8">
<style type="text/css">
.m h1{
font-weight:bold; /*粗体*/
font-size:40px;/*大小*/
font-family:楷体；/*字体*/
}
#php{
font-size:40px;
text-align:center;/*对齐 left right*/
height:100px;/*高度*/
background:#bbb;/*背景*/
line-height:100px;/*行高*/
}
.m span{
font-size:100px;/*大小*/
font-weight:bold;/*粗体*/
}
.m img{
width:300px;
height:400px;
}
.m b{
display:block;/*转换块元素*/
width:300px;/*宽*/
height:40px;/*高*/
background:pink;/*背景*/
overflow:hidden;/*溢出隐藏*/
}
.m b:hover{overflow:visible;} /*默认值 元素会被完全显示，呈现在元素框之外*/
</style>
</head>
<body>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
<p>7月8日零点，由文牧野执导，徐峥、王传君、谭卓、章宇等出演的电影《我不是*神》正式上映第四日，票房突破10亿大关。该片自7月5日正式上映起就登顶单日票房榜，目前已连续蝉联3天冠军宝座。《我不是*神》海报@视觉中国7月4日之前，《我不是*神》未播先火，预售票房1.6亿。7月5日首映票房就达到了1.6亿，7月7日周六，票房达到了惊人的3.8亿，累计票房破6亿。7月8日凌晨，《我不是*神》票房累计达到10亿。</p>
<b>粗体标签b</b>
<strong>php中文网</strong>
<i>斜体标签I</i>
<em>定义着重字em</em>
<del>定义删除字标签</del>
<span>常用文本容器标签span</span>
<pre>预格式 文本 标签pre</pre>
<!-- 块级元素：div h1~h6 p 独占一行 对宽高属性值设置生效
行内元素：可以共存于一行对宽高属性值设置不生效
行内块元素：结合了块级以及行内的特点
行内块级相互转换：
display: inline 将块级元素转换为行内
display: inline-block;将块级元素转换为行内块元素
display: block;将行内元素转换为块级 -->
<div style="width:100px;height:100px;background:#ddd;display:inline;">1</div>
<div style="width:100px;height:100px;background:pink;display:inline-block;">2</div><span>行内块元素</span>
<span style="width:100px;height:100px;background:#ccc;display:block;">3</span>
<span style="width:100px;height:100px;background:orange;display:inline-block;">4</span>
<span style="width:100px;height:100px;background:#bbb;display:inline-block;">5</span>
<div class="m" style="width:800px;height:2000px;background:#eee;">
<h1>php中文网</h1>
<p id="php">php中文网</p>
<!-- 谷歌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>
<br>
<!-- 图文混排 -->
<p style="font-size:20px;width:300px;height:400px;display:inline-block;">据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，</p>
<img src="images/1.jpg">
<br>
<img src="images/1.jpg">
<b>据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。</b>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
