第二章 网页制作的排版方法

第2章 网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

由于浏览器忽略用户在HTML编辑器中输入的回车符,为了使文字段落排列得整齐、清晰,常用段落标签<p>…</p>实现这一功能。语法为:<p align="left/ center|right">文字</p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>段落P标签示例</title>
	</head>
	<body>
		D<p align="center">广东南方职业学院</p>
		<p align="right">作者:信息与计算机学院</p>
		<p align="left">信息与计算机学院开设了计算机应用技术、软件技术、数字媒体应用技术术设计、服装与服饰设计、服策设计与工艺和大数据技术与应用等七个专业。其中软件技术专业是我院首。重点建设专业。</p>
		<p align="center">Copyright &copy;2019 信息与计算机学院</p>
	</body>
</html>

2.1.2 标题标签

标题使ch1>至<h6>标签进行定义。<h1>定义最大的标题,<h6>定义最小的标题,HTML会自动)标题前后添加一个额外的换行。标题文字标签的格式为:<hi Halign="Leftleenterlright">标题文字</h#>

属性align:设置标题在页面中的对齐方式,包括left(左对齐)、center(居中)或right(右对齐),默认为left。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标题示例</title>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标題</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

2.1.3 换行标签

<br/>标签将打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行中都会使该行换行,如果<br/>放在一行的末尾,可以使后面的文字、图像、表格等显示于下一行而又不会在行与行之间留下空行,即强制文本换行。换行标签的语法:文字<br/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>换行标签</title>
	</head>
	<body>
		<h3>联系我们</h3>
		联系地址:广东省江门市五邑路683号(市内13和25路公共汽车到校门口下车)<br/>
		联系电话:+86-750-3963333(20条线)<br/>
		传真电话:+86-750-3073898 3073890<br />
		网址:WWW.GDNFU.COM<br/>
	</body>
</html>

2.1.4 水平线标签

水平线可以作为段落与段落之间的分隔线,使文档结构清晰,层次分明。当浏览器解释
到HTML文档中的<hr/>标签时,会在此处换行,并加入一条水平线段。水平线标签的格式为:
<hr align="left | center | right" size ="横线粗细”width=”横线长度”color="横线色彩"noshade="
noshade" />

属性size:设定线条粗细,以像素为单位,默认值为2。

属性width:设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。所谓相对值,是指线段的长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终当前窗口。

属性color:设定线条色彩,默认为黑色。色彩可以用相应的英文名称或以“#”引导的个十六进制代码来表示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标签示例</title>
	</head>
	<body>
		<p>关于2016届信息与计算机学院优秀毕业生的名单</p>
		<hr color="blue" />
		13软件技术1班(9名):杜其亮,梁冠辉,梁泽民,赖辉旭,陈祖涛,林伟涛,刘付靖,陈俊明,林坚辉<br/>
		13计算机应用1班(9名):黄燕飞,麦指眉,林海林,李斯伟,樊启星,李碧云,徐长卿,吴学尹雪飞<br/>
	</body>
</html>

2.1.5 预格式化标签

<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和其符,而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代预格式化标签的语法为:<pre>文本块</pre>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标签示例</title>
	</head>
	<body>
		<pre>
		这是
		预格式文件
		它保留了           空格和换行。
		</pre>
	<p>pre 标签很适合显示计算机代码:</p>
<pre>
	    for i=1 to 10 
		    print i 
		next i
	</pre>
	</body>
</html>

2.1.6 缩排标签

blockquote>标签可定义一个块引用。<blockquole>与</ blockquole>之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。缩排标签的语法为:<blockquote>文本</blockquote>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标签示例</title>
	</head>
	<body>
		这里有一段长文本引用:
		<blockquote>广东南方职业学院是经广东省人民政府批准、国家教育部备案的全日制普习院校。办学以来,学校坚持以就业为导向,把人才培养质量放在学校工作的首位,针对广东省特别是珠三城经济发展需求和新兴人工智能、智能制造的行业发展趋势,不断调整和优化专业结构,形成了工、经、等学科全面发展的专业布局。</blockquote>
		·请注意,浏览器在blockquote 标签前后添加了换行,并增加了外边枢。
	</body>
</html>

2.1.7 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>全球汇商城简介</title>
	</head>
	<body>
		<h1 align="center">100%正品 十重保障</h1>
		<hr color="deeppink"/>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全球汇成立于2008年,10年来,凭借独创的特卖模式,精选全球正品好货,深度新扣,在电子商务研究中心2018年6月发布的“2017年度中国网络零售市场数据监测报告“中,全球汇在 B2C市场交易份额方面发展势头良好,继续保持第三位。<br/>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;唯品会是全球最大的特卖电商,以及中国第三大电商。<br/>
		全球汇承诺:
		<blockquote>
		全球直采:货源保障,全球布局 直采全世界好货。<br/>
		入仓全检:质检保障,独立自理仓库 坚持入仓全检验。<br/>
		自营物流:物流保障,自营物流封闭操作 全程可潮。<br/>
		假货必赔:第三方保障,中国人保正品保险,假货必赔。<br/>
		</blockquote>
    </body>
</html>

2.2 超链接

2.1.1 超链接简介

2.1.1.1 超链接的定义:所谓超链接(Hyperlink),是指从一个网页指向一个目标的连接关系,这个目标可以另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址个文件,甚至是一个应用程序。

2.1.1.2 超链接的分类:
根据超链接目标文件的不同,超链接可分为页面超链接、锚点超链接和电子邮件超链等;根据超链接单击对象的不同,超链接可分为文字超链接、图像超链接和图像映射等。

2.1.1.3 路径:URL——统一资源定位器,指的就是每一个网站都具有的独立的地址。同一个网站下,但是,当创建网页时,不可能也不需要为每一个链接完全的地址。用户只需要确定当前文档同站点根目录之间的相对路径关系。

(1)绝对路径。绝对路径就是主页上的文件或目录在硬盘上真正的路径(URL和路径)。例如,D:\ web \ index.html代表了index.html文件的物理绝对路径;htpi www.hao123.com/index.html代表了一个URL绝对路径。

(2)根目录相对路径。根目录相对路径是指从站点根文件夹到被链接文档经过的路站点上所有公开的文件都存放在站点的根目录下。站点根目录相对路径以一个正斜于站点根文件夹的suppon子文件夹中。

(3)文档目录相对路径。它是相对于某个基准目录的路径,以当前文件所在的路径为起点,进行相对文件的查找。相对路径适合于创建网站内部链接。
 

2.2.2 超链接的应用

超链接的另外一个叫法称为锚,它是使用<a>标签标记的,可以用两种方式表示,一是通过使用<a>标签的href属性来创建超文本链接,以链接到同一文档的其他位置或其他文档中,在这种情况下,当前文档就是链接的源,href属性的值就是URL的目标;二是通过使用<a>标签的name属性或id属性在文档中创建一个文档内部的书签。

1· 锚点标签<a>···</a >

HTML使用<a>标签来建立一个链接,通常<a>标签又称为锚。建立超链接的标签以<a>开始,以</a>结束。锚可以指向网络上的任何资源:一张HTML页面、一幅图像、一个声音或视频文件等。<a>标签的语法:<a href="url"title=“指向链接显示的文字”target="窗口名称">文本文字</a>

属性 target:设定链接被单击后所要开始窗口的方式有以下4种:

(1)blank。在新窗口中打开被链接的文档。
(2)self。默认值。在相同的框架中打开被链接的文档。
(3)parent。在父框架集中打开被链接的文档。

(4)top。在整个窗口中打开被链接的文档。

2· 指向其他页面的超链接

创建指向其他页面的超链接,就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系,有4种写法。注意,应该尽量采用相对路径。

(1)链接到同一目录内的网页文件,语法:<a href="目标文件名.html">热点文本</a>

(2)链接到下一级目录中的网页文件,格式:<a href=“子目录名/日标文件名,html">热点文本</a>

(3)链接到上一级目录中的网页文件,语法:<a href=",./目标文件名,html">热点文本</a>其中,“/”表示退到上一级目录中

(4)链接到同级目录中的网页文件,格式:<a href="../子目录名/目标文件名.html">热点文本</a>表示先退到上一级目录中,然后再进入目标文件所在的目录。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面之间的链接</title>
	</head>
	<body>
		<a href="register.html">免费注册</a><!--链接到同一目录内的网页文件-->
		<a href="login.html">账户登录</a><!--链接到同一日录内的网页文件-->
    </body>
</html>

3·指向书签的超链接

书签就是用<a>标签对网页元素作一个记号,其功能类似于用于固定船的锚,所以书签也称锚记或锚点。如果页面中有多个书签链接,对不同目标元素要设置不同的书签名。书签名在<a>标签的name属性中定义,语法:<a nume=“记号名“>目标文本附近的内容</n>

(1)指向页面内书签的超链接。要在当前页面内实现书签超链接,需要定义两个标签:一个为超链接标签,另一个为书签标签。超链接标签的格式:<a href=“记号名”>热点文本</a>
即单击“热点文本”,将跳转到“记号名”开始的网页元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<hl>杜甫诗词全集</hl>
	<a href="#one">1.《绝句》</a>
	<a href="#two">2.《登高》</a>
	<a href="#three">3.《茅屋为秋风所破歌》</a>
	<a href="#four">4.《望岳》</a>
	<a href="#five">5.《春望》</a>
	<hr color=" chocolate"/>
	<br/>
	<br/>
	<a name="one">《绝句》</a>
	<p>两个黄醇鸣翠柳,<hr/>一行白鸳上青天。<br/>窗含西岭千秋雪,<br/>门泊东买万里者
	<b /></p >
	<a name="two">《登高》</a>
	<p>风急天高猿啸哀,<br/>渚清沙白鸟飞回。<br/>无边落木萧萧下,<br/>不尽长江滚滚来
	<br/>万里悲秋常作客,<hr/>百年多病独登台。<br/>
	艰难苦恨紫霜类,<br/>潦倒新停浊酒杯。<br/></p>
	<a name="three">《茅屋为秋风所破歌》</a>
	<p>八月秋高风怒号,<br/>卷我屋上三重茅。<br/>
	茅飞渡江洒江郊,<br/>高者挂胃长林梢,<br/>下者飘转沉塘坳。<br/>
	南村群童欺我老无力,<br/>忍能对面为盗贼,<br/>公然抱茅入竹去。
	<br/>
	唇焦口燥呼不得, <br/>归来倚杖自叹息。<br/>
	俄项风定云墨色,<br/>秋天漠漠向昏黑。
	<br/>
	布余多年冷似铁,<br/>娇儿恶卧踏里裂。<br/>
	床头屋漏无千处,<br/>雨脚如麻未断绝。<br/>
	自经丧乱少睡眠,<br/>长夜沾湿何由彻?<br/>
	安得广厦千万间,<br/>大底天下寒士俱欢颜,<br/>风雨不动安如山!<br/>
	鸣呼!<br/>何时眼前突兀见此屋,<br/>吾庐独破受冻死亦足!<br/> </p>
	<a name="four">《望岳》</a>
	<p>南岳配朱鸟,秩礼自百王。欺吸领地灵,鸿洞半炎方。<br/>
	邦家用祀典,在德非馨香。巡守何寂寥,有虞今则亡。
	<br/>
	泊吾随世网,行迈越潇湘。渴日绝壁出,漾舟清光旁。<br/>
	祝融五峰尊,峰峰次低昂。紫盖独不朝,争长業相望。<br/>
	恭闸魏夫人,群仙央翱翔。有时五峰气,散风如飞霜。<br/>
	牵迫限修途,未暇杖崇冈。归来凯命驾,沐浴休玉堂。<br/>
	三叹问府主,蜀以费我皇。往壁忍衰俗,神其思降祥。</p>
	<a name="five">《春望》</a>
	<p>国破山河在, <br/>城春草木深。<br/>感时花溅泪,<br/>恨别鸟惊心。<br/>烽火连三
	<br/>家书抵万金。<br/>白头搔更短,<br/>浑欲不胜簪。
	 <br/></p>
	</body>
</html>

(2)指向其他页面书签的超链接。书签超链接还可以在不同页面间进行链接。当单书签超链接标题,页面会根据超链接中的href属性所以定的地址,将网页跳转到目标地址中书签名称所表示的内容。要在其他页面内实现书签链接,需要定义两个标签:一个为当前面的超链接标签,另一个为跳转页面的书签标签。当前页面的超链接标签的语法:<a href=“目标文件名,himl#记号名”>热点文本</a>

4· 指向电子邮件的超链接

如果希望制作下载文件的超链接,只需在链接地址处输人文件所在的位置,当浏览击超链接后,浏览器会自动判断文件的类型,以做出不同情况的处理。指向下载文件的超链接语法:<a href=“下载文件名">热点文本</a>

例如,下载一个购物向导的压缩包文件guide.rar,可以建立如下超链接:购物向导:<a hrerf="guider. rar”>下载</a>

5·指向电子邮件

网页中电子邮件地址的超链接,可以使网页浏览者将有关信息以电子邮件的形发送经子邮件的接收者,通常情况下,接收者的电子邮件地址位于网页页面的底部。指向电子邮件超链接的语法为<a href="mailto:E-mail地址">热点文本</a>
例如,E-mail地址是 gdnanfang@163.com,可以建立如下超链接:
电子邮箱:<a href="mailto:gdnanfang@163.com”>和我联系</a>

2.3 图像

2.3.1 网页图像的格式及使用要点

1· 常见的网页图像格式

图像文件的格式很多,但一般在网页中使用的图片格式并不多,主要有GIP,JPEG,PNG。下面进行简单的介绍,以便初学者在网页制作过程中做出适当的选择。

(1)GIF。GIF是 Intemet上应用最广泛的图像文件格式之一,是一种索引颜色的图像格式,此格式在网页中使用较多。它的特点是体积小,支持小型翻页型动画,C正F图像最多河以使用256种颜色,最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。

(2)JPEG。JPEG是Intemet上应用最广泛的图像文件格式之一,适用于摄影或连续色调图像。JPEG文件可以包含多达数百万种颜色,因此JPG格式的文件体积较大,图片质量较佳,通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网贞中对图像的质量有要求时,建议使用此格式。

(3)PNG。PNG 是一种新型的无专利权限的图像格式,兼有GIF和JPG的优点。它的显示速度很快,只需下载1/64的图像信息就可以显示出低分辨率的预览图像。它可以用来代替GIF格式,同样支持透明层,在质量和体积方面都具有优势,适合在网络中传输。
2` 使用网页图像的要点

(1)高质量的图像因其图像体积过大,不太适合网络传输。一般在网页设计中选图像不要超过8KB,如必须选用较大图像时,可先将其分成若干小图像,显示时再通过将这些

(2)网页中的动画并非越多越好,页面中应合理使用动画,太炫酷的动画会分散网站访客的注意力。
(3)如果在同一文件中多次使用相同的图像时,最好使用相对路径查找该图像。相对路径是相对于文件而言的,从相对文作所在目录依次往下直到文件所在的位置。例如,文件X.Y与A文件夹在同一目录下,那么文件B.A在目录A下的B文件夹中,它对于文件x.Y的相对路径则为A/B/B.A

2.3.2 图像标签

在HTML中,用<img>标签在网页中添加图像,图像是以嵌入的方式添加到网页中的图像标签的格式:<img src=“困像文件名”alt="替代文宇 title="鼠标悬停提示文字"width=“图像宽度"height=”图像
度”border="边框宽度”align="环绕方式|对齐方式"/>

标签中的属性说明见表,其中src是必需的属性。
需要注意的是,在 width 和height 属性中,如果只设置了其中的一个属性,则另一个)性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置,且其比例和原大小的比例不一致,那么显示的图像会相对于原图变形或失真。

1·图像的替换文本说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图像的基本用法</title>
	</head>
	<body>
		<h1 alien="center">新年开运款时尚保暖羽绒服冬季新品短款茧型宽松羽绒服面包服女</h1>
		<p align="center"><img src"images/waitao.jpg" alt="宽松羽城服面包服"title="览松羽能面包服"/></p>
		<p align="center">&nbsp;&nbsp;材质:面料:100%锦纶里料:100%聚酯纤维 胆布:100%聚鲜维 填充物:90%白鸭绒10%羽毛</p>
	</body>
</html>

2·设置图像大小

在HTML中,通过img标签的属性width和height来调整图像大小,其目的是通过图的高度和宽度加快图像的下载速度。默认情况下,页面中显示的是图像的原始大小,如累设置width和height属性,浏览器就要等到图像下载完毕才显示网页,因此延缓其他页面素的显示。

wiah 和 height 的单位可以是像素,也可以是百分比。百分比表示显示图像大小为岗)器窗口大小的百分比。例如,设置宽松羽绒服面包服图像的宽度和高度。代码如下:< img src="images/ waitao. jpg" width="150" height=" 174">
3·图像的边框

在网页中显示的图像如果没有边框,会显得有些单调,可以通过img标签的border属为图像添加边框,添加边框后的图像显得更醒目、美观。
border 属性的值用数字表示,单位为像素;默认情况下图像没有边框,即border=0;像边框的颜色不可调整,默认为黑色;当图片作为超链接使用时,图像边框的颜色和文字链接的颜色一致,默认为深蓝色。

2.3.3 图像超链接

图像也可作为超链接热点,单击图像则跳转到被链接的文本或其他文件。语法:<a href="URL">< img src="图像文件名”/></a>

2.3.4 设置网页背景图像

在网页中可以利用图像作为背景,但是要注意不要让背景图像影响网页内容的显示,因为背景图像只是起到渲染网页的作用。此外,背景图片最好不要设置边框,这样有利于生成无缝背景。
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。格式:<body background="背景图像路径”>
设置网页背景图像应注意以下要点:
(1)背景图像是否增加了页面的加载时间,背景图像文件大小不应超过10KB.
(2)背景图像是否与页面中的其他图像搭配良好。
(3)背景图像是否与页面中的文字颜色搭配良好。

2.3.5 图文混排

图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。制作网页时往往要在网页中的某个位置插入一个图像,使文本环绕在图像的周围。img标的align属性用来指定图像与周围元素的对齐方式,实现图文混排效果。

与其他元素不同的是,图像的align属性既包括水平对齐方式,又包括垂直对齐方式align 属性的默认值为bottom。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图文混编</title>
	</head>
	<body>
		<h1 align="center">商品描述</h1>
		<hr/>
		<img src="images/milkpowder.JPC" width="250" height="350" align="right"alt =”商品描述"/>
		产地:新西兰奶粉配方:常规配方<br/>
		包装:罐装适用人群:婴幼儿<br/>
		供货渠道:海外原装品牌名称:Aptamil<br/>
		商品名称:溴洲Aptamil金装婴幼儿配方奶粉3段900克保质期:18个月<br/>
		成分:矿物质(1.2%),维生素(0.10%),奶粉(全脂奶粉、益生元、鱼油)(98.7%)<br/>
		生产日期:2018年4月(具体以收到实物为准)<br/>
		规格;900g/罐配件/备注:见详情<br/>
		商品编号:9418783002844<br/>
		储存方法:<br/>
		1.请将奶粉存放在阴凉干燥处,开罐后密封保存,并请于开罐后四周内用完。<b/>
		2.请在奶粉罐底部注明的日期前食用。<br/>
	</body>
</html>

2.4 列表

2.4.1 无序列表

当创建一个无序列表时,主要使用HTML的<ul>标签和<li>标签来标记。其中<ul>标签标识一个无序列表的开始;<li>标签标识一个无序列表项。格式:
<ul Wype=“符号类型”>
<li type=“符号类型1">第一个列表项</h>
<li type=”林号类型2">第二个列表项</li>

...

</ul>

1· 在<ul>后指定符号的样式

<ul type="disc">
<ul type="cirele">
<ul type="square">

<ul img src="graph, gif">

符号为实心圆点,符号为空心,圆点符号为方块,符号为指定的图片文件

2`在<li>后指定符号的样式

在<li>后指定符号的样式,可以设置从该<li>起直到</ul>的项目符号。格式:
<li type="disc">
<li type="circle">

<li type="square">

<li img sre=" graph, gif">

符号为实心圆点,符号为空心圆点,符号为方块,符号为指定的图片文件

2.4.2 有序列表

有序列表是一个有特定顺序的列表项的集合。在有序列表中,各个列表项有先后顺序之分,它们之间以编号来标记。使用<ol>标签可以建立有序列表,表项的标签仍为<li>。格式:
<ol lype=”符号类型”>
<li type=”符号类型1">表项|
<li type=”符号类型2”>表项2

...
</ol>

在浏览器中显示时,有序列表整个表项与上下段文本之间各有一行空白;列表项目向右缩进并左对齐;各表项前带顺序号。
有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。<ol>标签的type 属性用来定义一个有序列表的符号样式,在<ol>后指定符号的样式,可设定直到</0l>的表项加重记号。格式:
<ollype="1">

<oltype="A">

<oliype="a">

<oltype="I">

<ollype="i">

序号为数字,序号为大写英文字母,序号为小写英文字母,序号为大写罗马字,序号为小写罗马字母
在<li>后指定符号的样式,可设定该表项前的加重记号。在格式上只需把上面的ol改li

2.4.3 定义列表

<dl>创建自定义列表<dt>为小标题项,<dd>为解释项

2.4.4 嵌套列表

所谓嵌套列表,就是无序列表与有序列表出嵌套混合使用。嵌套列表可以把页面分为多个层次,给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套,而且彼此可互相歆套。嵌套方式可分为无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套有序列表、在有序列表中嵌套无序列表等方式,读者需要灵活掌握

2.5综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul>
			<li>无序列表第一项</li>
			<li>无序列表第二项</li>
		</ul>
		<ul type="circle">
			<li>无序列表第一项</li>
			<li type="square">无序列表第二项</li>
			<!--就近原则,li与li之间是并列关系-->
		</ul>
		<ol type="I">
			<li>有序列表第一项</li>
			<li>有序列表第二项</li>
			<li>有序列表第三项</li>
		</ol>
		<dt>办学宗旨:</dt>
		<dd>以人为本,培养高素质人才</dd>
		<dt>校训:</dt>
		<dd>爱国明志,敢为人先</dd>
		<dt>校园精神</dt>
		<dd>诚朴坚卓,达谦智勇</dd>
		<hr/>
		<h2>全球汇支付向导<h2>
		 <ul type="circle">
			 <li>全球汇支付方式</li>
			 <ul type=" disc"></ul>
			 <li>货到付款</li>
			 <li>微信支付</li>
			 <li>支付宝</li>
			 <li>网银在线</li>
			 <ul>
			 <hr/>
			 <li>网银在线支付步骤:</li>
			 <ol>
			 <li>选择您要使用的网上银行;</li>
			 <li>显示您的应付总价,单击"确认无误,付款”; /li>
			 <li>确定您在银行的预留信息,单击”确定“按钮;</li>
			 <li>输入您的网银账号,登录密码,验证码;</Ii>
			 <li支付成功,提示“已完成付款”。
			 </ol>
			 <hr/>
			 <li>联系我们</li>
			 <dl>
			 <dt>E-mail;</dt>
			 <dd>worldall@ 163. com</dd>
			 <dt>传真:</d>
			 <dd>0750-3118888</dd>
			 <dt>地址:</dt>
			 <dd>广东省江门市江海区五色路</dd>
			 </dl>
			 <ul>
	</body>
</html>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值