本节讲解定位代码。
在制作网页的时候，几乎都要应用到定位代码。
一段文字，一个图片，要放置在网页中的哪个位置，是“居左”对齐，还是“居中对齐”，或者是“居右对齐”，都离不开定位代码。
如果在网页内容上层的某个部位，还要插入（或者说“覆盖”）一些内容的话，那就更需要应用定位代码啦！
也许有的朋友会说：“网页内容，几乎都要应用到定位代码？”“我制作的网页，从来没有应用过定位代码呀？”。
我的回答是：那是你应用了系统默认的定位样式的缘故。也就是说，你制作的网页中的内容都是“居左对齐”的啦。
我在2012年至2013年发表的《代码入门教程》 中，把“定位代码”叫做“定位标签”是错误的。
定位代码，只能作为某些标签的属性应用，因此，定位代码，也可以叫做定位属性。
在这里我顺便讲解一下标签名称与属性的区别。
标签名称，是指明它所修饰与管辖的网页内容类型的。例如，“文字标签”，专门修饰与管辖“文字”；“图片标签”，专门修饰与管辖“图片”。“标签名称”在尖括号中的位置，是占据“首要”位置的。标签名称，没有“属值”与它相连接。
而“属性”呢，它是标签中可以添加的一项内容。它起修饰与限制网页显示效果的作用。“属性”在尖括号中的位置，是在标签名称的后面的。属性有“属值”与其相连接。
在制作网页时，常应用的定位方式是“水平对齐”方式。下面讲解几种标签中定位方式的应用：
一、文字的定位方式：
文字的定位方式，要在段落标签、块区标签等标签在应用，应用这些标签控制文字的内容。
水平对齐方式有三种类型：
1、居左对齐：
表达方式举例：
段落中的居左对齐：<p align=left>或者<p style="text-align: left">
代码举例：
显示效果：
学习代码要多理解代码的意思，多制作网页，多观察显示效果，多记录制作笔记。这是学习代码的根本方法。千万不要死记硬背欧！
“居左对齐”的对齐方式适用于散文类的文章。
2、居中对齐：
表达方式举例：
段落中的居中对齐：<p align=center>或者<p style="text-align: center">
代码举例：
显示效果：
透过秋叶洒落的一缕阳光 “居中对齐”的对齐方式适用于诗词类的文章。
3、居右对齐：
表达方式举例：
段落中的居右对齐：<p align=right>或者<p style="text-align: right">
代码举例：
显示效果：
“春天没来”编撰
2014年6月4日于北京
“居右对齐”的对齐方式适用于作者的署名以及作品的写作时间等内容。
上面讲解的是文字作品中的对齐方式。
二、图片的定位方式：
图片作品中的对齐方式，与文字作品中的对齐方式相似。不过，图片的宽度超过680px左右时，图片的“居中对齐”就与“居左对齐”没有多大的区别啦。
图片的三种对齐方式举例：
1、“居左对齐”图片：
代码举例：
<P align=left><IMG title="" src="http://image73.360doc.com/DownloadImg/2014/06/0208/42232619_2.jpg"></P>
效果：
2、“居中对齐”的图片：
代码举例：
<P align=center><IMG title="春天没来欢迎您" src="http://image73.360doc.com/DownloadImg/2014/06/0208/42232619_2.jpg"></P>
效果：
3、“居右对齐”的图片：
代码举例：
<P align=right><IMG title="春天没来欢迎您" src="http://image73.360doc.com/DownloadImg/2014/06/0208/42232619_2.jpg"></P>
效果：
在制作图片网页的时候，我们常常应用的是“居中对齐”的对齐方式。
如果一篇网页中，图片的宽度不一致，有的图片宽度超过700px，用某些浏览器观看，显示效果将不能“居中对齐”。
代码举例：
下面是我用两种浏览器观看上面网页的显示效果：
1、用360安全浏览器6.3观察上面网页的截图：
<IMG title=360安全浏览器6.3观察效果 src="http://userimage5.360doc.com/14/0606/13/4127803_201406061351030848.png">
显示效果接近于“居左对齐”。
2、用QQ浏览器6.3观察上面网页的截图：
<IMG title=QQ浏览器观察效果 src="http://userimage5.360doc.com/14/0606/13/4127803_201406061351050567.png">
显示效果为“居中对齐”。
遇到上面所说的图片无法居中对齐的情形，可将代码“修改”一下。在每个段落标签中添加一个最宽图片的宽度值即可。
代码：
三、移动标签中的定位方式：
移动标签中的对齐方式，是指“移动内容”在“移动屏幕”中的位置而言的。
代码：
上面的代码中设置了“居左对齐”、“居中对齐”与“居右对齐”三种不同的对齐方式，其效果如下： 四、表格标签中的定位方式：
表格标签中的对齐方式，是指表格在网页中的水平位置而言的。
居左对齐的表格代码：
效果：
居中对齐的表格代码：
效果：
居右对齐的表格代码：
效果：
表格标签中的对齐方式，并不能控制单元格中放入的内容。单元格中的内容，应该在列标签中添加对齐方式进行控制，也可以把单元格中的每个内容，放置到设置了对齐方式的段落标签或者块区标签中进行控制。
作业：
1、认识水平对齐的三种表达方式。制作网页时，根据具体情况，应用合适的水平对齐方式。
2、水平对齐的三种方式各适用于哪些类型的文章？
3、一篇网页中有多张图片的时候，如果不能“居中对齐”，应该用什么方法处理？
4、移动标签中的对齐方式是指什么？
5、表格标签中的对齐方式是指什么？
6、应该应用什么方法控制单元格中内容的对齐方式？
7、网页内容不能正常显示，一般有哪几种原因？
“春天没来”编撰
2014年6月7日于北京 |
|
|
