学习了使用css 属性来控制文本显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
h1{
/*转到块级元素*/
display:block;
/*设置高度*/
height:500px;
/*设置背景颜色*/
background-color: pink;
/*定义粗体字*/
font-weight:bold;
/*设置字体大小，px像素单位，em单位*/
/*font-size:30px;*/
font-size:6em;
/*设置字体*/
font-family:楷体;
/*文本居中，属性值left左，center剧中，right右*/
text-align:center;
/*设置文本行高*/
line-height:500px;
}
span{
font-size:110px;
font-weight:bold;
font-family:georgia;
}
p{
display: inline-block;
width: 300px;
height: 400px;
background-color: #ffe80e;
}
img{
width: 300px;
height: 400px;
}
b{
display: block;
width:300px;
height:30px;
background-color:pink;
/*溢出隐藏*/
overflow:hidden;/*隐藏溢出文本*/
}
b:hover{
overflow:visible;/*显示溢出文本*/
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<span style="color:#0388f1;">G</span>
<span style="color:rgb(245,28,38);">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><br>
<hr>
<!--图文混排-->
<p>近期，鹿邑县公安局刑警大队通过缜密侦查，破获多起盗窃案件，抓获犯罪嫌疑人2名，追缴被盗机动车、电动车、
自行车等共计31辆；吸油烟机、燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、
气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、
气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、
气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、
气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、</p>
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1497635499,4101991368&fm=173&app=25&f=JPEG?w=640&h=427&s=D3A021E1384202DA142C309403009092" alt="">
<div>
<div style="display:inline-block;width: 100px;height: 100px;background-color: #0388f1"></div>
<div style="display:inline-block;width: 100px;height: 100px;background-color:#ccc;"></div>
</div>
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1497635499,4101991368&fm=173&app=25&f=JPEG?w=640&h=427&s=D3A021E1384202DA142C309403009092" alt="">
<b>近期，鹿邑县公安局刑警大队通过缜密侦查，破获多起盗窃案件，抓获犯罪嫌疑人2名，追缴被盗机动车、电动车、
自行车等共计31辆；吸油烟机、燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、
气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、
气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、
气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、
气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、气泵各1台。燃气灶、</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
笔记总结：
CSS设置字体粗细 ：font-weight
CSS设置字体大小 ：font-size
CSS设置字体 ：font-family
CSS设置文本行高 ：line-height
CSS设置字体水平排列：text-align
<img>标签插入图片
文本溢出控制：overflow
按照片布局的作业源码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2018年8月13日页面实战</title>
<style type="text/css">
body{
background-color: #ccc;
}
.main{
width:570px;
height:940px;
margin:0 auto;
padding:15px;
background-color:#fff;
}
a{
text-decoration: none;
}
h1{
font-size:25px;
}
span{
color:#c3c3c3;
display:inline-block;
margin-right:20px;
}
.tag{
width:16px;
height:16px;
background-color: #39ff1b;
margin-left:220px;
}
.pic{
width:570px;
height:300px;
margin-top:15px;
}
</style>
</head>
<body>
<div class="main">
<h1>黄晓明出借账号被卷股票操纵案 知情人：账户未冻结</h1>
<div>
<span>2018-08-13 21:18</span><span>来源:搜狐娱乐</span>
<img class="tag" src="http://www.php.cn/static/images/logo.png" alt="标签">
<a href="#">黄晓明</a>
</div>
<h4>原标题：黄晓明出借账号被卷股票操纵案 知情人：账户未冻结</h4>
<img class="pic" src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg">
<p style="text-align: center;">黄晓明(资料图)</p>
<p>(来源:新财报)</p>
<p>段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容
</p>
<p>段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容
</p>
<p>段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容段落内容
段落内容段落内容段落内容段落内容段落内容
</p>
<p style="text-align: right;font-size:14px;"">责任编辑：刘艾蒂 UN918</p>
<p style="font-size:14px;color:#ccc;">声明：该观点仅代表作者个人，搜狐号系信息发布平台，搜狐仅供信息存储空间服务。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
