实例
<!DOCTYPE html>
<html>
<head>
<title>文本控制</title>
<meta charset="utf-8">
<style type="text/css">
#div1{
width: 680px;
height: 300px;
margin:0 auto;
margin-bottom: 200px;
background: #ccc;
overflow: hidden; /*overflow: hidden溢出被修剪,将查处部分隐藏，默认visible可见*/
}
#div1:hover{ /*:hover伪类，将鼠标移上触发*/
padding: 0;
overflow: visible; /*overflow: visible超出部分可见*/
}
#div1 p,span{
padding: 0;
line-height:35px; /* line-height设置行高，垂直居中 */
}
</style>
</head>
<body>
<h1 style="text-align:center">这个一个h1标签</h1><!-- text-align:center 水平居中 left居左 right居右 -->
<h2>这个一个h2标签</h2>
<h3>这个一个h3标签</h3>
<h4>这个一个h4标签</h4>
<h5>这个一个h5标签</h5>
<h6>这个一个h6标签</h6>
<B>这个一个加粗标签</B>
<p>块级标签，独占一行</p>
<strong>PHP中文网 加重</strong><br>
<i>斜体</i><br>
<em>定义着重字</em><br>
<del>定义删除字标签</del>
<span>现价399</span><del>原价499</del>
<pre>定义预格式化文本，
可以输出文本中的 换行、空格等</pre>
<!-- font-weight:bold;粗体
font-size:字体大小
font-family:字体设置 -->
<span style="color:#0085FF;font-size: 40px;font-weight: bold;font-family: georgia;">G</span>
<span style="color:rgb(245,28,39);font-size: 40px;font-weight: bold;font-family: georgia;">o</span>
<span style="color:#ffe80e;font-size: 40px;font-weight: bold;font-family: georgia;">o</span>
<span style="color:#0085FF;font-size: 40px;font-weight: bold;font-family: georgia;">g</span>
<span style="color:#39ffeb;font-size: 40px;font-weight: bold;font-family: georgia;">l</span>
<span style="color:rgb(245,28,39);font-size: 40px;font-weight: bold;font-family: georgia;">e</span>
<br>
<!-- 块级元素：独占一行，对宽高属性值设置生效，自带换行 div p h1-h6
行内元素：多个标签共存一行，对宽高属性值设置无效 span
行内块元素：既对宽高属性值设置生效，又可多个标签共存一行 img -->
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180813/2f1c5e1bdb8c44e6ad1246ec7c803b33.jpeg" style="width:200px;height: 200px;">
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180813/2f1c5e1bdb8c44e6ad1246ec7c803b33.jpeg" style="width:200px;height: 200px;"><br>
<!-- display:inline 将块级元素转换为行内元素
display:inline-block 将块级元素转换为行内块元素
display:block 将行内元素转换为块级元素 -->
<span>我是span标签,我是行内元素</span>
<div style="width:100px;height:100px;background: green;display: inline;">我会和span在一行</div>
<div style="width:100px;height:100px;background: green;display: inline-block;">我会和前面的div在一行</div>
<span style="display: block;">我是span行内元素，但是我会独占一行。我是span行内元素，但是我会独占一行。我是span行内元素，但是我会独占一行。我是span行内元素，但是我会独占一行。我是span行内元素，但是我会独占一行。我是span行内元素，但是我会独占一行。</span>
<span>我和上面的span不在一行了</span>
<br>
<div style="width: 680px;margin:0 auto;">
<h1 style="font-family: 黑体;font-size: 30px;font-weight: bold;">黄晓明出借账户被卷股票操纵 知情人：账户未冻结</h1>
<p>2018-08-13 21:18</p>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180813/2f1c5e1bdb8c44e6ad1246ec7c803b33.jpeg" style="width:680px;height:400px" />
<p style="text-align:center;">黄晓明（资料图）</p>
<p>(来源：财新报)</p>
</div>
<div id="div1">
<span>搜狐娱乐讯 8月13日，据财新报道，记者证实，证监会刚刚公布的获利近9亿元、罚没款高达18亿元的高勇股票操纵案中的自然人账户之一确实为影视明星黄晓明名下账户。</span>
<p>而接近监管层的人士表示，这些自然人账户的所有人如果仅仅是出借账户，并不知道账户被利用进行操纵，这些账户也不会被冻结</p>
<p>8月10日晚，证监会通报了5宗操纵案件，其中，高勇控制16个账户，半年内股价暴涨300%，非法获利8.97亿，被证监会没收违法所得8.97亿元并处罚8.97亿元。</p>
<p>根据证监会通报，高勇控制的16个账户，这些账户是黄某、张某燕、张某、吴某江、倪素某、倪松某、姜某、黄某明、徐某、朴某娜、薛某、吴某丰、崔某欣、吴某等人的账户。</p>
<p>媒体“股票说”调查表示，名单中，黄某就是明星黄晓明：“黄某明账户开立后由其母亲张某霞管理使用。经路某介绍，张某霞将黄某明证券账户部分委托高勇管理，该账户涉案交易由高勇作出。黄晓明的母亲叫张素霞。黄晓明和母亲张素霞，跟证监会通报材料中的黄某明和其母亲张某霞，正好一一对应！”</p>
<p>黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担</p>
</div>
</body>
</html>手写代码
点击 "运行实例" 按钮查看在线实例
