简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 文本控制+行快元素认识-2018年8月14日
Blogger Information
Blog 16
fans 0
comment 0
visits 10749
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
文本控制+行快元素认识-2018年8月14日
兔子的博客
Original
671 people have browsed it

        培训第二课文本控制和行快元素

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

　　运用文本控制标签属性排版文章页面

手抄代码

  • IMG_20180814_083456_看图王.jpg

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！