web二级基本操作题（CSS导航条）

最新推荐文章于 2024-01-17 09:00:00 发布

wawa0611

最新推荐文章于 2024-01-17 09:00:00 发布

阅读量113

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_47475151/article/details/132752294

版权

按照如图所示的网页效果制作一个网站导航条，鼠标放伤后有各导航栏目的简介。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>CSS导航条</title>
<style>
*{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;}
/* ********FOUND********* */
body{ background: #fff}
#info{padding:50px;}
#infobox{padding:0px 20px;background-color: #640000;}
#center{background: #ABBAAC; border-top:2px solid #333; padding:20px;}
/* ********FOUND********* */
.c{ clear:both; height:1px; overflow: hidden; background:#333}
#infobox li{ border-right:1px solid #000; float:left; margin-right:1px; text-align:center;margin-top:-4px; }
a{ width:150px;line-height:28px; display:block;}
/* ********FOUND********* */
a:link{color:#000;background:#FF9900;text-decoration: none;}
/* ********FOUND********* */
a:hover{ color:#FFFF00;background:#000;}
#infobox span{ display: none; }
#infobox a:hover span{display: block;position:absolute;border:1px solid #640000;background: #FFFFCC;margin-top:26px!important; margin-top:20px;color:#000;padding:5px;white-space: nowrap;}
</style>
</head>
<body>
<!-- ********FOUND********* -->
<div id="info">
<!-- ********FOUND********* -->
 <div id="infobox">
  <ul>
   <li><a href="#" target="_blank"><span>本章主要介绍构成Web技术的基础知识。学完本章之后，读者可以了解到：什么是Web技术，Web与Internet之间的关系，构成Web技术的网络技术基础，相关Web服务器的配置等等。</span>第1章 Web技术基础</a></li>
   <li><a href="#" target="_blank"><span>Web服务是最常见的Internet服务，而HTTP是Web客户端与服务器端之间数据传输的通信协议。Web服务 是典型的客户机/服务器结构的应用。</span>第2章 HTTP协议基础</a></li>
   <li><a href="#" target="_blank"><span>本章通过描述一个简单的HTML文档的结构和标记格式，讨论如何用这些标记来控制文本的显示效果，包括换行、段落标记、标题等。</span>第3章 HTML语言基础</a></li>
   <li><a href="#" target="_blank"><span>本章主要包括CSS的基本语法、使用方法以及样式表的层次优先级等，并主要介绍了如何使用CSS和div标签进行布局。</span>第4章 CSS基础</a></li>
   <li><a href="#" target="_blank"><span>本章首先对JavaScript的基础知识进行简单的介绍，包括JavaScript的特点、作用。然后详细介绍JavaScript的基本语法，主要包括关键字、标识符、数据类型、字符串、数组、运算符和表达式等。</span>第5章 JavaScript语言基础</a></li>
   <li><a href="#" target="_blank"><span>本章主要介绍几种常见的动态网页技术。动态网页技术是在静态网页技术之后出现的Web编程技术，比静态网页提供更丰富的基于数据支持的功能，提供更好的用户操作体验。</span>第6章 动态网页技术概述</a></li>
  </ul>
  <div class="c"></div>
 </div>
<div id="center">
</div>
</div>
</body>
</html>