作业要求的网页
实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf8">
<title>艾泽拉斯国家地理</title>
<style type="text/css">
p{text-align:center;font-weight:bold;}
</style>
</head>
<body>
<p></p>
<span style="text-align:center;display:block;font-size:30px;font-weight:bold">《争霸艾泽拉斯》前瞻：斯托颂谷地访客指南</span>
<h5 style="text-align:center;width:1200px;height:100px;">坐落在库尔提拉斯最北端的斯托颂谷地是斯托颂家族和神秘的海潮贤者们的家园。海潮贤者掌握着操纵大海的强大力量，他们向强大的库尔提拉斯舰队传递着他们的祝福。下面我们会带您简短地在斯托颂谷地游历一番。斯托颂谷地由郁郁葱葱的绿地与连绵起伏的岩石丘陵组成。在内陆溪流和清新海风的滋养下，这里的野生动植物都得以蓬勃生长。这是一片因陆地和海洋的和谐而丰饶的地区。
</h5>
<div align="center"><img src="https://cms-origin.battlenet.com.cn/cms/page_media/OW2HKBHHAXK31534151134918.jpg"
style="width:900px; height:500px"/></div>
<p>与其他难解的谜团一样，你需要找到并跟随你眼前的线索。首先，搭乘渡轮前往位于伯拉勒斯的斯托颂修道院。也许那里的修士和修女们对于失踪的舰队有更多的想法。幸运的是，你的旅程不会孤单。港务长赛勒斯·克雷斯弗的守卫之一，也是你的向导泰莉亚是一名知识渊博的同伴，她也希望能帮你一起搞清楚斯托颂谷地到底发生了什么。修道院中处处都有大海的痕迹，但你的直觉还是告诉你，在这里你很不受欢迎。你不可能轻松找到答案，而危机也潜伏在比你想象得要更近的地方。库尔提拉斯舰队在海上失踪了。斯托颂的海潮贤者也许是我们找到这支传奇舰队的唯一希望。据一些抵抗组织的人说，舰队并非真的失踪，而是被黑暗之力给困住了。你必须在斯托颂谷地中找到盟友来帮助你挖出这个阴谋的核心，并将舰队带回家。北方布伦纳丹镇上的派克修士就是你所需要的盟友之一。你要去找他并了解清楚，他对于你即将面临的挑战还知道多少。高地之途是进入斯托颂谷地的唯一陆上通道，但一道封锁线将布伦纳丹与库尔提拉斯的其它地域隔绝了开来。在你找到通过的方法以后，你就能爬上这条通路的顶端，领略眼前这片大地令人惊叹的美丽景色了。会见邻居虽然布伦纳丹的景色秀美，但你在这里并没有受到热烈欢迎。这里的镇民们正因为士兵夺取了他们的收成，却又无法保护他们所要保卫的人民而怒气冲天。派克修士愿意帮助你找到你想要的答案，但每一个新发现都会在贯穿着这片麻烦缠身的土地的绳索上再打上一个新结。在平静的表面下还有更多的秘密等待你来发现，同时你也感觉到黑暗正在你的视线之外等待着。
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
今天主要学习的是文本格式，块级元素，行内元素，行内块级元素通过学习这些可以做到简单的图文混排。
上课案例代码如下：
其一
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<title>php chinese netwot</title>
<style type="text/css">
p{font-weight:bold;/*控制文本粗细粗体*/
font-size:30px;/*控制文本大小*/
font-family:楷体;/*定义字体*/
text-align:center;/*定义文本居中*/}
h1{text-align:center;/*left right*/
height:100px;
background:pink;/*定义背景颜色*/
line-height:100px;/*定义行高*/
}
span{font-size:40px;
font-weight:bold;
font-family:georgia;}
img{width:300px;height: 400px;}
b{display: block;
width: 300px;height: 100px;
background:pink;
overflow:hidden;/*超出b标签范围的文字会被修剪掉，溢出隐藏*/
margin-bottom:100px;
}
b:hover{overflow:visible;｝/*伪选择器,默认值，内容不会被修剪，元素会被呈现在元素框的之外*/
</style>
</head>
<body>
<h1>中文网</h1>
<p>中文网</p><!-- span是行内标签没有左右宽度 -->
<br>
<span style="color:#0388F1">G</span>
<span style="color:rgb(245,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>
<!-- 图文混排 -->
<p style="display: inline-block;width:300px;height:400px;">8月4日，俄罗斯卫星网曾援引叙利亚《祖国报》消息称，中国或很快会向叙利亚部署解放军执行反恐作战任务，
<br><!-- 换行标签 -->并且支援叙利亚政府军在伊德利卜等地执行反恐作战行动。而在8月9日，我驻叙利亚大使馆在辟谣时称，
<br>中国不会向叙利亚派遣反恐军事力量，以及参与叙利亚政府军的反恐军事行动。从中国军迷的角度来说，
</p>
<img src="C:\Users\Administrator\Desktop\0813\images\1.jpg"/>
<br><br>
<img src="C:\Users\Administrator\Desktop\0813\images\1.jpg"/>
<b>中国不会向叙利亚派遣反恐军事力量，以及参与叙利亚政府军的反恐军事行动。从中国军迷的角度来说，并且支援叙利亚政府军在伊德利卜等地执行反恐作战行动。而在8月9日，我驻叙利亚大使馆在辟谣时称，并且支援叙利亚政府军在伊德利卜等地执行反恐作战行动。而在8月9日，我驻叙利亚大使馆在辟谣时称，并且支援叙利亚政府军在伊德利卜等地执行反恐作战行动。而在8月9日，我驻叙利亚大使馆在辟谣时称，</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
其二
实例
<!DOCTYPE html> <html> <head> <title>文本类型</title> <meta charset="utf-8"> </head> <body> <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h3标签</h5> <h6>这是一个h4标签</h6> <b>这是一个粗体标签</b> <p> 8月4日，俄罗斯卫星网曾援引叙利亚《祖国报》消息称，中国或很快会向叙利亚部署解放军执行反恐作战任务， <br><!-- 换行标签 -->并且支援叙利亚政府军在伊德利卜等地执行反恐作战行动。而在8月9日，我驻叙利亚大使馆在辟谣时称， <br>中国不会向叙利亚派遣反恐军事力量，以及参与叙利亚政府军的反恐军事行动。从中国军迷的角度来说， <br>大家其实都希望解放军能够介入叙利亚反恐战争，大力打击盘踞当地的“三股势力”等极端组织。 <br>虽然叙利亚一直以来都是俄罗斯的势力范围，但这并不妨碍中国未来出兵叙利亚等第三国执行境外反恐作战。 那未来解放军该如何在境外执行反恐作战任务，俄罗斯在叙利亚的反恐经验又有哪些值得我们借鉴？ 本期出鞘关注解放军未来如何出兵第三国进行反恐作战。（查看完整内容搜索微信公众号：sinamilnews）</p> <!-- 段落标签 --> <br> <br> <br><strong>PHP中文网</strong><!-- 加重语气 粗体 --> <br><i>PHP中文网</i><!-- 定义斜体 --> <br><em>PHP中文网</em><!-- 定义着重字 --> <br><del>PHP中文网</del><!-- 删除字标签 --> <span style="background:pink;width: 300px;height: 200px">399</span><del>499</del> <pre>域格 式 化文本</pre><!-- 有输出格式 --> <p style="background:#ccc; width:500px;height:500px">木哈哈</p> 块级元素：div h1~h6 p 独占一行 对宽度属性值设置生效自带换行符 行内元素：span可以共存于一行对宽度属性设置不生效 行内块元素：img结合了块级以及行内的特点 <br><img src="C:\Users\Administrator\Desktop\0813\images\1.jpg" style="width: 200px;height: 200px;"/><span>donkey</span> 行内块级元素转换 display:inline将块级元素装换为行内元素 display：inline-block将块级元素装换为行内块级元素 display:block </blockquote> <div style="width:100px;height:100px;background:pink;display:inline">1</div> <div style="width:100px;height:100px;background:pink;display:inline-block">2</div> <span style="width:100px;height:100px;background:pink;display:block;">3</span> <span style="width:100px;height:100px;background:pink;display:inline-block;">4</span> <span style="width:100px;height:100px;background:pink;display:inline-block">5</span> </body><!-- --> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码
