本篇主要目的了解文本的基本样式,会使用超链接和悬浮状态的伪类选择器。综合应用HTML基本技术、CSS技术和相应的盒子模型概念来设计实践内容,以更简洁、更丰富的效果呈现出来。在原有的盒子模型基础上完成实践内容,理解如何在盒子模型里面插入图片信息,对于要显示的内容应用文本样式。其他布局尽量使用div等元素。超链接使用悬浮状态的伪类表示。
CSS部分:
table{
border: 1px solid black;
}
.div1
{font-size: 30px;
font-family: 楷体;
border-style: solid;
padding: 20px;
height: 30px;
width: 100%;
margin-top: 10px;
background-color:coral;}
.div2
{border-style: solid;
padding: 5px;
margin-left: 40px;
width: 1000;
background-color:aqua;}
.div2-1{float: right;}
.div2-2{float: right;
margin-right: 700px;}
.div3
{border-style: solid;
padding: 5px;
height: 200px;
margin-left: 40px;
width: 1000;
background-color:bisque;}
.div4
{text-indent: 2em;
line-height: 1.5;
border-style: solid;
padding: 20px;
height: 35px;
margin-top: 10px;
margin-left: 40px;
width: 1000;}
.left_div5-1{
float: left;
border-style: solid;
padding: 20px;
height: 140px;
margin: 10px;
margin-left: 10px;
width: 600px;
background-color:cornflowerblue;
}
.left_div5-2{
text-indent: 2em;
float: left;
border-style: solid;
padding: 20px;
height: 140px;
margin: 10px;
margin-left: 10px;
width: 600px;
background-color:cornflowerblue;
}
.right_div5{
float: right;
border-style: solid;
padding: 20px;
height: 140px;
margin: 10px;
margin-right: 10px;
width: 700px;
background-color:beige;
}
.div6 {
border-style: solid;
padding: 5px;
height: 200px;
margin-top: 10px;
margin-left: 40px;
width: 1000;
background-color:antiquewhite;
}
.left_div7{
text-indent: 2em;
float: left;
border-style: solid;
padding: 20px;
height: 140px;
margin: 10px;
margin-left: 10px;
width: 400px;
background-color:chartreuse;
}
.right_div7{
text-indent: 2em;
float: right;
border-style: solid;
padding: 20px;
height: 140px;
margin: 10px;
margin-right: 10px;
width: 240px;
background-color:deepskyblue;}
a:link{color:red;}
a:visited{color: brown;}
a:hover{
color: coral;
font-weight: bold;
background-color:aqua;
}
HTML部分:
(Yellow Crane Tower)是中国5A级旅游景区,江南三大名楼之一,位于湖北省武汉市长江南岸的武昌蛇山之巅,建于三国时代吴黄武二年。
黄鹤楼在三国时期是军事楼,后演变成为观赏楼,历代文人墨客在此留下了许多千古绝唱如
传道、修行、教化的道场。《道藏·历世真仙体道通鉴》言:“吕祖以五月二十日登黄鹤楼,午刻升天而去。故留成仙圣迹。”《全真晚坛课功经》中称其黄鹤楼头留圣迹。
1957年建武汉长江大桥武昌引桥时,占用了黄鹤楼旧址,1981年重建黄鹤楼时,选址在距旧址约1000米的蛇山峰岭上。
1981年10月,重修工程破土开工,1985年6月落成,主楼以清同治楼为蓝本,但更高大雄伟。遗址上只剩下清代黄鹤楼毁灭后唯一遗留下来的一个黄鹤楼铜铸楼顶。
三国时期黄鹤楼只是夏口城一角瞭望守戍的“军事楼”,晋灭东吴以后,三国归于一统,该楼在失去其军事价值的同时,随着江夏城地发展,逐步演变成为官商行旅“游必于是”、“宴必于是”的观赏楼。
唐代《元和郡县图志》记载:孙权
始筑夏口故城,“城西临大江,江南角因矶为楼,名黄鹤楼。”是为了军事目地而建。
最后一座建于同治七年(1868年),毁于光绪十年(1884年)。
效果图:
CSS发展历程:
20 世纪 90 年代初 HTML 语言诞生,这时的 HTML 只包含很少的属性来控制网页的显示效果。伴随着 HTML 的成长,各式各样的样式语言也随之出现,不同的浏览器结合它们各自的样式语言来控制页面的显示效果。
经过不断的发展,HTML 中添加了越来越多的属性来满足页面设计者的需求,随着这些属性的增加,HTML 变的越来越杂乱,而且 HTML 页面也越来越臃肿,于是 CSS 便诞生了。
1994 年,哈坤·利提出了 CSS 的最初建议,并决定与正在设计 Argo 浏览器的伯特·波斯(Bert Bos)合作,共同开发 CSS。1994 年底,哈坤·利在芝加哥的一次会议上第一次正式提出了 CSS 的建议,之后又在 1995 年的 WWW 网络会议上再次提出了 CSS,在会议上伯特·波斯展示了支持 CSS 的 Argo 浏览器,哈坤·利也展示了支持 CSS 的 Arena 浏览器。
同年,W3C 组织(World WideWeb Consortium)成立,该组织对 CSS 的发展很感兴趣,为此还专门组织了一次讨论会。最终 CSS 的全部开发成员都加入了 W3C 组织,并负责 CSS 标准的制定,至此 CSS 的发展走上正轨。
W3C,中文名为“万维网联盟”,也称为“W3C理事会”,由万维网的发明者 蒂姆·伯纳斯·李 于 1994 年 10 月在麻省理工学院计算机科学实验室成立,是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。
CSS所具特点:
CSS 是 Web 领域的一个突破,它为 HTML 提供了一种描述元素样式的方式,使用 CSS 和 HTML 可以制作出外形优美的网页。总体来说 CSS 具有以下特点:
1) 丰富的样式定义
CSS 提供了丰富的外观属性,可以在网页中实现各式各样的效果,例如:
为任何元素设置不同的边框,以及边框与元素之间的内外间距;
改变文字的大小、颜色、字体,为文字添加修饰(例如下划线、删除线);
为网页设置背景颜色或者背景图片等等。
2) 易于使用和修改
CSS 的样式信息不仅可以定义在 HTML 元素的 style 属性中,也可以定义在 HTML 文档
标签内的