demo1
实例
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>文本控制</title> </head> <body> <h1>H1标签</h1> <h2>H2标签</h2> <h3>H3标签</h3> <h4>h4标签</h4> <h5>h5标签</h5> <h6>h6标签</h6> <p style="background-color:red;">段落标签，块级元素，独占一行</p> <br> <!-- 换行标签 --> <b>B标签字体加粗</b> <strong>这个也是加粗</strong> <em>强调字体和i标签类似</em> <i>斜体</i> <del>删除字标签</del> <pre>pre标签 - 预格式化文本，大多用于在网页中插入代码 你看 我这里是个回车</pre> <br> 块级元素：独占一行，对宽高属性值设置生效 <br> 行内元素：可以共存于一行，对宽高属性值设置不生效 <img src=""> <!-- 行内块元素 --> display:inline 将块元素转换为行内元素 display:inline-block 将块级元素转换为行内块元素 display:block 将行内元素转换为块级元素 <div style="width: 100px;height: 100px;background: pink;display: inline;">display属性1</div> <div style="width: 100px;height: 100px;background: pink;display:inline-block;">display属性2</div> <span style="width:100px;height: 100px;background:pink;display: inline-block;">display属性3</span> <span style="width:100px;height: 100px;background:pink;display: block;">display属性4</span> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
demo2
实例
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight: bold; /*定义粗体*/
font-size:30px; /*定义字体大小*/
font-family: "宋体"; /*定义字体*/
}
h1{ text-align: center; /*居中对齐*/
text-align:left; /*左对齐*/
text-align:right; /*右对齐*/
line-height:100px; /*行高*/
background: pink;
}
span{font-size: 60px;
font-weight: bold;
font-family: "微软雅黑";
}
b{display: block;
width: 300px;
height: 40px;
background: pink;
overflow:hidden; /*溢出隐藏，超出设置宽高的区域就自动隐藏*/
}
b:hover{overflow:visible;} /*visible,默认值，内容不会被修剪，元素会被呈现在元素框之外*/
img{width:300px;height:400px;}
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<span style="color:rgb(66,133,244);">G</span>
<span style="color:#ea4335;">o</span>
<span style="color:rgb(251,188,5);">o</span>
<span style="color:rgb(66,133,244);">g</span>
<span style="color:rgb(52,168,83);">l</span>
<span style="color:rgb(234,67,53);">e</span>
<hr>
<img src="img/1.jpg">
<p style="display:inline-block;width:300px;height:400px;">黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担。</p>
<hr>
<b>黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担。</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
课后作业 2018.8.13
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.13作业</title>
<style type="text/css">
h1,.photo{text-align: center;}
.h2{font-size: 1.5em;font-weight: bold;}
p{line-height: 1.5em;margin:20px;}
.color{color:#999;}
a:link{text-decoration: none;}
</style>
</head>
<body style="width: 60%;margin:0 auto;">
<h1>黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h1>
<span class="color">2018-08-13 21:18 来源:搜狐娱乐</span>
<span style="display: inline-block;float:right;"><a href="https://lz373.cn">黄晓明</a></span>
<p class="h2">原标题:黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</p>
<div class="photo"><img src="http://5b0988e595225.cdn.sohucs.com/images/20180813/2f1c5e1bdb8c44e6ad1246ec7c803b33.jpeg" alt="黄晓明" title="黄晓明">
</div>
<p style="text-align: center;">黄晓明（资料图）</p>
<p>(来源：财新报)</p>
<p>搜狐娱乐讯 8月13日，据财新报道，记者证实，证监会刚刚公布的获利近9亿元、罚没款高达18亿元的高勇股票操纵案中的自然人账户之一确实为影视明星黄晓明名下账户。</p>
<p>黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承担。<a href="https://lz373.cn">返回网页，查看更多</a></p>
<p style="text-align: right;">责任编辑：李逍遥</p>
<p class="color" style="font-size: 14px;">声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码
