Collection
Collection
培训第二课文本控制和行快元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>这是一个h1标签</h1> <h2>这个是h2标签</h2> <b>这是粗体标签b</b> <br> <strong>中文网</strong> <i>坚决打赢脱贫攻坚战</i> <em>定义着重字</em> <del>定义删除字标签</del> <span style="background: blue;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="http://gz.southcn.com/content/attach/20180812/5a8427d33a8b05791623a3f8_cut.jpg" style="width: 200px;height: 300px;" /><span>123</span> 行内块级相互转换： display: inline 将块级元素转换为行内 display: inline-block;将块级元素转换为行内块元素 display: block;将行内元素转换为块级 <div style="width: 100px;height: 100px; display: inline;">1</div> <div style="width: 100px;height: 100px; display: inline-block;">2</div> <span style="width: 100px;height: 100px;display: block;">3</span> </body> </html>
点击 "运行实例" 按钮查看在线实例
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!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(0,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="http://gz.southcn.com/content/attach/20180812/a373d064-bc40-4079-8f9d-ea17d7d106f6.png">
<br><br>
<img src="http://gz.southcn.com/content/attach/20180812/a373d064-bc40-4079-8f9d-ea17d7d106f6.png">
<b>据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空，。
</b>
</body>
</html>点击 "运行实例" 按钮查看在线实例
1、h1~h6标题标签：级别由高到低，一般页面中h1只是用一次，分清主次关系。自带加粗，字号大小，外间距，且是块级元素，独立成行，具有div的全部特征
2、p 段落标签：具有div的全部特征，自带外间距。
3、块元素：独立成行，可设置宽高
4、行级元素：不独立成行，设置宽高不生效，间距横向生效，纵向不生效
5、行快元素：不自动换行，能够识别宽高，默认排列方式为从左到右
作业demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>身体易疲倦劳累？这道养生汤助你身心舒畅</title>
<style type="text/css">
*{padding: 0;margin: 0}
body{font-family: '黑体';}/*定义字体*/
.main{width: 980px;margin: 0 auto;}/*定义宽度 自动居中*/
.title{font-size:24px;line-height: 30px;text-align: center;margin-top: 10px;}/*定义文本大小、行高、居中、外边距*/
.text{font-size: 14px;line-height: 24px;text-indent: 2em;margin-top: 20px;}
.pic{text-align: center;}
.n_time{font-size: 12px; color: #ccc;text-indent: 2em}
</style>
</head>
<body>
<div class="main">
<h2 class="title">身体易疲倦劳累？这道养生汤助你身心舒畅</h2>
<p class="n_time">2018-08-13 08:23 来源：南方网 严慧芳</p>
<p class="text"><strong>花旗参，味甘、性寒，具有益气养阴生津的功效。响螺，味甘，性凉，有明目、开胃、消滞、滋阴、润燥等作用，而且咀嚼口感有韧劲，风味十足。</strong>搭配生姜调和温凉，蜜枣瘦肉增甜增鲜，整个汤鲜味浓郁，甘美顺滑，适合夏秋之际，天气炎热时，汗出较多，疲倦劳累，心烦燥热等情况饮用。</p>
<div class="pic"><img src="http://gz.southcn.com/content/attach/20180812/5a8427d33a8b05791623a3f8_cut.jpg"></div>
<p class="text"> 每日一膳出书啦！《每日一膳》春、夏、秋、冬系列，微信扫二维码购书有优惠，更有机会获得杨志敏教授亲笔签名版图书。一向热心公益慈善事业的杨志敏教授决定每售出一套《每日一膳》图书，即从版税中捐赠2元给广东省慈阳慈善基金会帮助眼疾患者恢复光明。</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运用文本控制标签属性排版文章页面
手抄代码
