课堂案例1
<!DOCTYPE html> <html> <head> <title>文本控制</title> <meta 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>坚决打赢脱贫攻坚战， 让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，习总书记的扶贫足迹遍布全国，对坚决打赢脱贫攻坚战作出重要战略部署。 党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。 </p> <br> <br> <strong>php中文网</strong> <i>坚决打赢脱贫攻坚战</i> <em>定义着重字</em> <del>定义删除字标签</del> <span style="background: pink;width: 300px;height: 200px;">399元</span><del>499</del> <pre>预格 式 化文本</pre> <p style="background: #ccc;width: 300px;height: 200px;">123</p> <span>399元</span> <!-- 块级元素：div h1~h6 p 独占一行 对宽高属性值设置生效 行内：可以共存于一行对宽高属性值设置不生效 --> <!-- 行内块元素：结合了块级以及行内的特点 --> <img src="images/1.jpg" style="width: 200px;height: 300px;" /><span>123</span> 行内块级相互转换： display: inline 将块级元素转换为行内 display: inline-block;将块级元素转换为行内块元素 display: block;将行内元素转换为块级 <div style="width: 100px;height: 100px;background: pink; display: inline;">1</div> <div style="width: 100px;height: 100px;background: pink; display: inline-block;">2</div> <span style="width: 100px;height: 100px;background: pink;display: block;">3</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">4</span> <span style="width: 100px;height: 100px;background: pink;display: inline-block;">5</span> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
课堂案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight:bold;/*定义粗体*/
font-size:30px; /* 定义字体大小*/
font-family:楷体; /*定义字体*/
}
h1{ text-align:center;/*left right*/
height: 100px;
background: #ccc;
line-height:100px;/*定义行高*/
}
span{font-size: 40px;font-weight: bold;font-family: georgia;}
img{width: 300px;height: 400px;}
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>
<!-- 谷歌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="display: inline-block;width: 300px;height: 400px;">据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</p>
<img src="images/1.jpg">
<br><br>
<img src="images/1.jpg">
<b>据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
黄晓明案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css" >
body{background: #eee; font-size:14px; }
#box1 {width:600px;
margin: 0 auto;
background: #fff;
padding: 10px 20px;
}
.btl{height: 16px;line-height: 16px;}
span{
font-size: 12px;
}
img[src="images/hxm.png"]{width: 600px; }
.clear{clear: both;}
</style>
</head>
<body >
<div id="box1" >
<h2>黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h2>
<div class="btl">
<span style=" color: #999;">2018-08-13 21:18 来源：搜狐娱乐</span>
<span style="color: #5b98ee; display: inline-block; float: right;"><img src="images/bq.png" style="width:16px;">黄晓明</span>
<div class="clear"></div>
</div>
<p style="margin-top: 30px;"><strong>原标题：黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</strong></p>
<img src="images/hxm.png" >
<p style="text-align: center;">黄晓明（资料图）</p>
<p>(来源：财新报)</p>
<p>这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1这是段落1
</p>
<p>这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2这是段落2
</p>
<p>这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3
</p>
<p>这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3
</p>
<p>这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事段落3这事
<a href="https://www.baidu.com/" style="color: #5b98ee;"><img src="images/sohu.png" alt="" style="height: 14px;">返回搜狐，查看更多</span></a>
</p>
<div style="margin-left: 480px;" >责任编辑：爱迪生</div>
<span style=" color: #999;">声明：该文观点代表作者本人，搜狐号系统发布平台</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
