网页设计之菜单鼠标浮动效果

最新推荐文章于 2024-09-13 09:02:48 发布

转载最新推荐文章于 2024-09-13 09:02:48 发布 · 269 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shaozhuyong/articles/2836655.html

文章标签：

#ui

本文介绍如何使用HTML和CSS实现菜单栏的基本布局，并通过CSS美化菜单栏样式，包括菜单项的悬浮效果，使菜单栏更加美观和交互友好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：菜单栏的UI设计：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link href="css/caidan.css" rel="stylesheet" type="text/css" />

</head>
<body>
<!--头部内容开始-->
    <div class="menu2">
      <ul>
        <li><a href="webIndex.html">首页</a></li>
        <li><a href="guide.html">入门指导</a></li>
        <li><a href="class.html">类参考</a></li>
        <li><a href="examples.html">代码示例</a></li>
        <li><a href="download.html">下载中心</a></li>
       
      </ul>
    </div>
</body>
</html>

网页菜单效果如下：

步骤二：这样的效果不太好看，我们要实现的是那种炫一点的感觉，比如：

鼠标拂过时出现菜单按钮被按下的效果。这时我们需要CSS样式，我们设计一个CSS文件，如下：

@charset "utf-8";
/*
CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
*/
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0; list-style:none;
}

/** 设置默认字体 **/
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;background:#eee; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul, ol { list-style: none; }

/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
	border-bottom: 1px dotted;
	cursor: help;
}

q:before, q:after { content: ''; }

/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img {
	border: 0;
	text-align: center;
}
/* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/** 重置表格元素 **/
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/** 其它 **/
hr {
    border: 0;
    height: 1px;
    *color: #fff; /* for ie7- */
}
.clear {
	clear:both;
	height:0;
	overflow:hidden;
	display:block;
}
/* -----------------二级首页头部---------------- */
.menu2{ background:#4185D0; width:auto; position:absolute; margin:80px 80px;height:31px; border:1px solid #fff;-moz-border-radius:5px;font-family:"微软雅黑";-webkit-border-radius:5px; border-radius:5px;text-shadow:3px;-moz-box-shadow:1px 3px 3px #ccc;
-webkit-box-shadow:1px 3px 3px #ccc; padding:0px 10px;
box-shadow:1px 3px 3px #ccc; color:#fff;  line-height:30px; text-align:center; behavior:url(pie.htc);}
.menu2 li{  width:82px; margin:1px 2px; background:url(../images/index2/menu_line.jpg) no-repeat right; float:left;display:block;}
.menu2 li a{ color:#fff; text-decoration:none; display:block;}
.menu2 li a:hover{  text-decoration:none; background:url(../images/index2/menu_hb.jpg) no-repeat center; display:block; }

步骤三: 添加引用样式的语句。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link href="css/caidan.css" rel="stylesheet" type="text/css" />

</head>
<body>
<!--头部内容开始-->
    <div class="menu2">
      <ul>
        <li><a href="webIndex.html">首页</a></li>
        <li><a href="guide.html">入门指导</a></li>
        <li><a href="class.html">类参考</a></li>
        <li><a href="examples.html">代码示例</a></li>
        <li><a href="download.html">下载中心</a></li>
       
      </ul>
    </div>
</body>
</html>

到这里我们已经基本实现了功能

注意：设计好文件后要注意文件的路径，比如说href="css/caidan.css"中的"css/caidan.css"代表引用的CSS文件是与网页文件并列的CSS文件夹下的caidan.css文件。

同样url(../images/index2/menu_hb.jpg)则代表引用的jpg文件是与网页文件并列的images文件夹下的index2文件夹下的menu_hb.jpg文件。

示例Demo如下：

下载地址

转载于:https://www.cnblogs.com/shaozhuyong/articles/2836655.html