预计效果图
代码展示
话不多说，先上代码，完整代码与所需文件(图片)可在我的GitHub中找到，链接在此
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>环球互联网产业园</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
<div align="center" class="total">
<div class="first">
<div class="first1">
<img src="image/1.png" height="65" width="200">
</div>
<div class="first2">
<ul>
<li><a href="shouye.html">首页</a></li>
<li><a>园区概况</a></li>
<li><a href="index.html" style="color: #4682b4">园区动态</a></li>
<li><a>招商引资</a></li>
<li><a>园区服务</a></li>
<li><a>联系我们</a></li>
<li onclick="prompt('请输入您想要查找的内容')"><a> <img src="image/3.png" width="25" height="25"></a></li>
</ul>
</div>
</div>
<div class="second">
<img src="image/2.png" height="120" width="1065" />
</div>
<div class="third">
<div class="third1" align="left">
<ul>
<li><img src="image/5.png" height="30" width="30" /></li>
<li><p style="display: inline">首页 /园区动态 /园区新闻 </p></li>
<li><p style="display: inline; color: #4682b4">/详细信息</p></li>
</ul>
</div>
<div class="third2" align="center">
<ul>
<li><a style="color: white; background-color: #4682b4; border: none">园区动态</a></li>
<li><a>园区新闻</a></li>
<li><a style="color: #4682b4; border-left: #4682b4 solid 4pt;">产业动态</a></li>
<li><a>园区公告</a></li>
<li><a>工作简报</a></li>
<li><a>园区新闻</a></li>
</ul>
</div>
<div class="third3">
<div class="third3-1">
<h1>黄奇帆调研园区工作 大力发展现代服务业</h1>
<p>来源：重庆市环球互联网产业园办公室 时间：2015-08-04</p>
</div>
<div class="third3-2" align="left">
<br>
<img src="image/4.png" width="620pt" height="100t" />
<p>
8月3日,重庆市长黄奇帆在渝中区委书记唐英瑜、区长扈万泰的陪同下调研了移动APP产业园,一起参观调研的还有渝中区副区长黄孝明、区科委科委副主任乔伟。
</p>
<p>
黄市长一行首先来到园区大学生创业团队云威科技。在实地走访过程中听取了云威科技总经理李力的介绍后,黄市长充分的肯定了云威团队的创造精神和创新意识鼓励云威团队在今后的发展道路上更创辉煌。随后黄市长一行来到园区公共服务平台和园区众创空间。在听取渝中区科委副主任乔伟对该园区的工作汇报后,黄市长说,渝中区作为都市功能核心区,上半年经济保持了平稳较快发展势头,成绩值得肯定,但与功能定位相似的沿海发达地区相比,还有较大差距,仍然需要把加快发展作为首要任务。渝中区要打造新的经济增长点,增强发展后劲,关键是要围绕推动现代服务业发展来动脑筋、下功夫。要顺应时代发展潮流,通过搭建众创空间、孵化器等平台,有针对性地出台扶持政策措施,吸引和集聚优秀人才大力推动大众创业、万众创新。
</p>
</div>
</div>
</div>
<div class="final" align="center">
<br>
<p>渝中区创新创业服务中心</p>
<p>Copyright all right reserved</p>
<p>ICP备 06046172号</p>
</div>
</div>
</body>
</html>
关键代码解释
CSS
css概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于
<head>标签内部） - 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
伪类
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
伪类与 CSS 类
伪类可以与 CSS 类配合使用：
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过，那么它将显示为红色。
结果展示
当鼠标上方导航栏——首页、园区概况、园区动态等标签时，底色会变成黄色，字体变成蓝色，点击后会变成蓝色
将鼠标放在左边导航栏——园区新闻、产业动态等标签时，底色会变成黄色，字体变成蓝色，点击后会变成蓝色
点击查找按钮，出现以下画面
点击首页，可以跳转到以下图片所示网页
点击上方导航栏的园区动态或者左方导航栏的园区动态都会跳转到开始的页面，如下图所示
