css下拉菜单

格式：doc
大小：51.00 KB
文档页数：5

下载文档原格式

/ 5

hover函数

hover函数hover函数是一种常用的JavaScript函数，在网页设计中使用非常广泛，主要用于添加交互效果，提升用户体验。

hover函数主要作用是在触发指定元素时，添加或移除一个或多个CSS类。

通过添加CSS类，我们可以使这个元素的外观或表现发生改变，从而呈现出更加生动的效果。

在本文中，我们将深入探讨hover函数的用法，并举例说明如何使用它来实现一些常见的交互效果。

在介绍具体的用法之前，我们先来了解一下hover函数的语法和基本原理。

hover函数的语法如下所示：```$(selector).hover(over, out);```selector是一个CSS选择器，用于指定触发hover事件的元素；over和out是两个回调函数。

over函数在鼠标移到该元素上时触发，out函数在鼠标移出该元素时触发。

在hover函数内部，我们可以使用this关键字引用触发事件的元素，用以操作该元素的属性或样式。

hover事件和其他事件一样，可以使用preventDefault和stopPropagation等方法阻止默认行为和事件冒泡。

接下来，我们将通过几个例子来演示hover函数的用法。

例子一：字体变色我们先来实现一个简单的效果，当鼠标移到某个元素上时，该元素的文本变成红色。

HTML代码如下：```<p>这是一段文本。

</p>```CSS代码如下：```p.red {color: red;}```JavaScript代码如下：```$("p").hover(function() {$(this).addClass("red");},function() {$(this).removeClass("red");});```在这段代码中，我们首先选取了所有的p元素，并使用hover函数绑定了两个回调函数。

over函数将在鼠标移到p元素上时触发，它将为该元素添加一个名为red的CSS类，从而使文本变成红色。

DIV+CSS实现二级下拉菜单

二级下拉菜单实现代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type=text/javascript>function menuFix() {var sfEls = document.getElementById("menu").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseDown=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");}}}window.onload=menuFix;</script><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { width:700px; height:38px; margin:0 auto; background:url(/Templates/show/images/menu_bg.jpg) ;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { float:left; margin-left:2px;}#menu ul li a { display:block; width:91px; height:38px; line-height:38px; text-align:center; font-size:14px; color:#FFFFFF; text-decoration:none; font-weight:bold;}#menu ul li a:hover { background:url(/Templates/show/images/Menu_link.jpg);display:block; width:91px; height:38px; line-height:38px; text-align:center; font-size:14px; color:#FF9966; text-decoration:none; font-weight:bold;}#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}#menu ul li ul li { float:none; width:88spx; background:#99CC99; margin:0;}#menu ul li ul li a { background:none;}#menu ul li ul li a:hover { background:#333; color:#fff;}#menu ul li:hover ul { display:block;}#menu ul li.sfhover ul { display:block;}</style></head><body><div id="menu"><ul><li><a href="#">网站首页</a></li><li><a href="#">关于我们</a><ul><li><a href="#">公司简介</a></li><li><a href="#">荣誉资质</a></li></ul></li><li><a href="#">新闻动态</a><ul><li><a href="#">公司新闻</a></li><li><a href="#">行业新闻</a></li><li><a href="#">社会新闻</a></li></ul></li><li><a href="#">产品展示</a></li><ul><li><a href="#">产品一</a></li><li><a href="#">产品二</a></li><li><a href="#">产品三</a></li><li><a href="#">产品四</a></li></ul><li><a href="#">人力资源</a></li><li><a href="#">客户中心</a></li><li><a href="#">联系我们</a></li></ul></div> </body> </html>。

BootstrapCSS组件之下拉菜单（dropdown）

BootstrapCSS组件之下拉菜单（dropdown）Bootstrap下拉菜单，常⽤在开发项⽬中，今天为⼤家介绍介绍dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu例⼦见下拉菜单.html//源码.dropup,.dropdown {position: relative;}.dropdown-toggle:focus {outline: 0;}.dropdown-menu {position: absolute;top: 100%;left: 0;z-index: 1000;display: none;float: left;min-width: 160px;padding: 5px 0;margin: 2px 0 0;font-size: 14px;text-align: left;list-style: none;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}.dropdown-menu.pull-right {right: 0;left: auto;}.dropdown-menu .divider {height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5;}.dropdown-header {display: block;padding: 3px 20px;font-size: 12px;line-height: 1.42857143;color: #777;white-space: nowrap;}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template</title><link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">我的书籍<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">编程</a></li><li><a href="#">设计</a></li><li><a href="#">深⼊</a></li></ul></div><div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">我的书籍<span class="caret"></span></button><ul class="dropdown-menu"><li class="dropdown-header">前端</a></li><li><a href="#">JS</a></li><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li><li class="divider"></li><li class="dropdown-header">后台</li><li><a href="#">PYTHON</a></li><li><a href="#">JAVA</a></li></ul></div><script src="https:///ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

菜鸟教程css3

菜鸟教程css3菜鸟教程CSS3CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，是一种用于描述网页样式和布局的技术。

与CSS2相比，CSS3拥有更多的新特性和功能，可以让开发者更加灵活地控制网页的外观和交互效果。

无论是在移动端还是在桌面端，CSS3都被广泛应用于网页开发中。

下面将介绍CSS3的几个重要特性和用法。

1. 选择器CSS3引入了一些新的选择器，让开发者可以更精确地选择网页中的元素。

比如：属性选择器（Attribute Selectors）允许根据元素的属性值选择元素；伪类（Pseudo-classes）可以根据元素的状态或位置选择元素；伪元素（Pseudo-elements）可以创建某些元素的特定部分。

2. 盒子模型CSS3中的盒子模型（Box Model）得到了进一步的增强。

开发者可以通过box-sizing属性来控制元素的尺寸计算方式，可以选择使用content-box（默认）或者border-box。

此外，CSS3还引入了弹性盒子布局（Flexible Box Layout）和网格布局（Grid Layout），使得网页布局更加灵活和响应式。

3. 文本效果CSS3中提供了一系列的文本效果特性，可以使得网页中的文字更加生动和丰富。

比如：text-shadow可以为文本添加阴影效果；text-overflow可以控制文本超出容器时的显示方式；word-wrap可以实现自动换行；@font-face可以引入自定义的字体等。

4. 渐变和渲染CSS3中引入了线性渐变（linear gradient）和径向渐变（radial gradient）两种新的渐变方式，可以用来创建更加丰富的背景和图形效果。

此外，CSS3还提供了多种渲染方式，比如：盒子阴影（box-shadow）、边框图像（border-image）和文本轮廓（text-outline）等。

5. 过渡和动画过渡（Transition）和动画（Animation）是CSS3中用于实现元素变化效果的重要特性。

css option的用法

CSS中没有直接名为“option”的属性或规则，可能您是想问的是HTML中的<option>标签的用法。

在HTML中，<option>标签用于定义下拉列表中的选项。

它必须包含在<select>标签内部。

每个<option>标签都有一个value属性，该属性指定了选项的值，当该选项被选中时，这个值会被发送到服务器。

此外，还可以通过selected属性来设置默认选中的选项。

例如：
html
<select name="fruits">
<option value="apple">苹果</option>
<option value="banana" selected>香蕉</option>
<option value="orange">橙子</option>
</select>
在这个例子中，“香蕉”是默认选中的选项，因为我们在<option>标签中设置了selected属性。

当表单提交时，服务器将接收到一个名为“fruits”的字段，其值为“香蕉”。

jquery仿京东导航仿淘宝商城左侧分类导航下拉菜单效果

jquery仿京东导航仿淘宝商城左侧分类导航下拉菜单效果在⽹站建设中，特别是做商城和产品⽹站，通常会⽤到导航弹出菜单，像是jquery写的仿京东导航菜单，⼀个经典的左侧多级导航菜单，学会了可以任意改变布局。

京东菜单已经有不少JS前端爱好者仿写过，今天蚂蚁⽹络重新与⼤家分享⼀款仿京东商城的商品多级分类菜单，精简版代码先看下jquery仿京东导航效果：前端html代码如下：复制代码代码如下:<ul><li><a href="#">baidu</a></li><div class="tips"><p><a href="">baidu</a></p></div><li>goolge</li><div class="tips"><p><a href="">google</a></p></div><li>yahoo</li><div class="tips"><p><a href="">yahoo</a></p></div><li>microsoft</li><div class="tips"><p><a href="">microsoft</a></p></div></ul><style type="text/css">html{color:#666;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} body{font:12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}table{border-collapse:collapse;border-spacing:0;}img{border:none;}a{text-decoration:none; color:#666;}a:hover{text-decoration:underline; color:#FF6600;}ul,li{list-style-type:none;}q:before,q:after{content:'';}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}/* All reset */body{ margin:100px;}ul li{line-height:30px; border:1px solid #E5D1A1; text-align:center; margin-top:-1px; width:200px; background:#FFFDD2; position:relative; z-index:1;}.tips{position:absolute; width:150px; height:150px; border:1px solid #E5D1A1; background:#fff; z-index:2; display:none;}</style>js代码：复制代码代码如下:<script type="text/javascript">$(function(){$("ul li").each(function(index){$(this).mouseover(function(){var obj=$(this).offset();var xobj=obj.left+190+"px";var yobj=obj.top-50+"px";$(this).css({"width":"190px","z-index":"9999","border-right":"none","background":"#fff"});$("ul > div:eq("+index+")").css({"left":xobj,"top":yobj}).show();}).mouseout(function(){$("ul > .tips").hide();$(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})})})$("div").each(function(){$(this).mouseover(function(){$(this).prev("li").css({"width":"190px","z-index":"9999","border-right":"none","background":"#fff"})$(this).show();}).mouseout(function(){$(this).hide();$(this).prev("li").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"});})})})</script>效果图如下，jQuery仿京东左侧菜单效果，适合商城产品导航，这⾥没有做的那么细，只是使⽤CSS结合jQuery完成了菜单的简单效果，如果需要美化，请您在实际应⽤中⾃⼰搞⼀下吧，兼容性⾮常不错的，欢迎⼤家使⽤。

Web前端开发案例教程5制作学院网站导航条

display: inline| block| inline-block| none;
5.2.3 元素的类型与转换
元素的转换
display 属性常用的属性值及含义如下。
➢ inline：行内元素，该值是行内元素的默认属性值。 ➢ block：块元素，该值是块元素的默认属性值。 ➢ inline-block：行内块元素，可以对其设置宽度、高度和对齐方式等属
list-style: 列表项目符号列表项目符号的位置列表项目图像;
5.2.1 无序列表样式设置
无序列表样式设置 example超链接默认的文字颜色为蓝色且带有下划线，这种单调的样式并不好看。实际上，为了使超链接看起来更加美观，经常需要为超链接指定不同的状态，使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。在 CSS 中，通过超链接伪类可以实现不同的超链接状态。
超链接样式设置
example02. html
5.2.3 元素的类型与转换
HTML 提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加清晰、合理，HTML 标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。块元素和行内元素还能根据实际需求进行类型转换。
5.2.3 元素的类型与转换
（3）list-style-image 属性：设置列表项的项目图像，使列表的样式更加美观，其取值为图像的URL。
5.2.1 无序列表样式设置
无序列表样式设置
（4）list-style 属性：综合设置列表样式，可以代替上面 3 个属性。使用 liststyle 属性综合设置列表项的样式，格式如下。
任务小结
任务小结
本任务围绕学院网站导航条的实现，介绍了无序列表和超链接的样式设置方法、元素的类型与类型转换等，最后综合利用所学知识实现了带有下拉菜单的导航条。本任务介绍的主要知识点如下表所示。

CSS常用样式属性大全

CSS常用样式属性大全1. 文本样式- `font-size`: 设置字体大小- `font-family`: 设置字体类型- `font-weight`: 设置字体粗细- `color`: 设置字体颜色- `text-decoration`: 设置文本修饰，如下划线、删除线等- `text-align`: 设置文本对齐方式- `text-transform`: 设置文本大小写转换2. 背景样式- `background-color`: 设置背景颜色- `background-image`: 设置背景图片- `background-size`: 设置背景图片大小- `background-position`: 设置背景图片位置- `background-repeat`: 设置背景图片重复方式3. 边框样式- `border`: 设置边框样式、宽度和颜色- `border-radius`: 设置边框圆角- `border-width`: 设置边框宽度- `border-color`: 设置边框颜色4. 尺寸和布局样式- `width`: 设置元素宽度- `height`: 设置元素高度- `margin`: 设置元素外边距- `padding`: 设置元素内边距- `display`: 设置元素的显示方式5. 盒模型样式- `box-sizing`: 控制盒模型的计算方式- `overflow`: 设置内容溢出时的处理方式6. 定位样式- `position`: 设置元素的定位方式- `top`: 设置元素离顶部的距离- `left`: 设置元素离左边的距离- `right`: 设置元素离右边的距离- `bottom`: 设置元素离底部的距离7. 动画样式- `transition`: 设置元素的过渡效果- `animation`: 设置关键帧动画效果以上是CSS常用的样式属性，通过调整这些属性，您可以灵活地控制网页的样式和布局。

纯html+css制作三级下拉菜单

纯html+css制作三级下拉菜单直⼊主题，html+css制作三级下拉菜单实现代码分享给⼤家，具体内容如下1.html代码XML/HTML Code复制内容到剪贴板1. <!DOCTYPE>2. <html>3. <head>4. <meta charset="utf-8">5. <title>三级下拉菜单导航栏</title>6. <link rel="stylesheet" type="text/css" href="style.css">7. </head>8. <body bgcolor="aliceblue">9. <ul class="nav">10. <li>11. <a href="" target="_blank">12. ⼿机数码<span class="triangle">▼</span></a>13. <ul>14. <li><a href="#" target="_blank">15. ⼿机 <span class="triangle">▶</span>16. </a>17. <ul>18. <li><a href="">⼩⽶</a></li>19. <li><a href="">华为</a></li>20. <li><a href="">魅族</a></li>21. </ul>22. </li>23. <li><a href="">24. 电脑 <span class="triangle">▶</span>25. </a>26. <ul>27. <li><a href="">平板</a></li>28. <li><a href="">笔记本</a></li>29. <li><a href="">台式</a></li>30. </ul>31. </li>32. <li><a href="">相机</a></li>33. </ul>34. </li>35. <li><a href="">男装⼥装<span class="triangle">▼</span></a>36. <ul>37. <li><a href="">38. 上⾐ <span class="triangle">▶</span></a>39. <ul>40. <li><a href="">衬衫</a></li>41. <li><a href="">T恤</a></li>42. </ul>43. </li>44. <li><a href="">45. 裤⼦ <span class="triangle">▶</span></a>46. <ul>47. <li><a href="">⽜仔裤</a></li>48. <li><a href="">休闲裤</a></li>49. </ul>50. </li>51. </ul>52. </li>53. <li><a href="">运动户外<span class="triangle">▼</span></a>54. <ul>55. <li><a href="">运动鞋</a></li>56. <li><a href="">运动服</a></li>57. <li><a href="">运动设备</a></li>58. </ul>59. </li>60. <li>61. <a href="">时尚百货</a>62. </li>63. <li><a href="">⽣活服务<span class="triangle">▼</span></a>64. <ul>65. <li><a href="">万能缴费</a></li>66. <ul>67. <li><a href="">⽔费</a></li>68. <li><a href="">电费</a></li>69. </ul>70. <li><a href="">教育培训</a></li>71. <li><a href="">话费充值</a></li>72. </ul>73. </li>74. <li>75. <a href=""> 汇吃美⾷</a>76. </li>77. <li>78. <a href=""> 家居家纺<span class="triangle">▼</span></a>79. <ul>80. <li><a href="">81. <span class="triangle">◀</span> 床上⽤品</a>82. <ul class="nav1">83. <li><a href="">被⼦</a></li>84. <li><a href="">枕头</a></li>85. </ul>86. </li>87. <li>88. <a href=""><span class="triangle">◀</span> 客厅家具</a>89. <ul class="nav1">90. <li><a href="">茶具</a></li>91. <li><a href="">沙发</a></li>92. <li><a href="">椅⼦</a></li>93. </ul>94. </li>95. </ul>96. </li>97. </ul>98. </body>99. </html>2.CSS 代码CSS Code复制内容到剪贴板1. *{2. padding: 0;3. margin: 0;4. }5. ul{6. list-style-type:none;7. }8. .triangle{9.10. font-size: 1em;11. color: white;12. }13. a{14. text-decoration:none;15. text-align: center;16. font-weight: bold;17.18. }19. /*⼀级导航*/20. ul.nav{21. float: left;22. border:1px solid gray;23. margin-left: 10%;24. margin-top:10px;25. border-radius: 4px;26. position: fixed;27. }28. ul.nav li{29. float: left;30. width: 9em;31. background-color:yellowgreen;32. }33. ul.nav a{34. display: block;35. color: white;36. line-height: 1.5em;37. border-right: 1px solid white;38. border-left: 1px solid white;39. padding: 5px;40. }41.42. ul.nav a:hover,43. ul.nav a:focus{44. color: black;45. background-color: #98FB98;46. opacity: 0.5;47. }48. ul.nav li:first-child a{49. border-left: 0;50. border-bottom: 0;51. }52. ul.nav li:last-child a{53. border-right: 0;54. border-bottom: 0;55. }56. /*⼆级导航*/57. ul.nav li ul{58. width: 10em;59. position: absolute;60. left: -1000em;61. }62.63. ul.nav li:hover ul{64. width: 10em;65. left:auto;66. }67.68. ul.nav li ul a{69. border-top: 1px solid white;70. border-bottom: 1px solid white;71. border-left: 0;72. border-right: 0;73.74. }75. /*三级导航*/76. ul.nav li:hover ul li ul{77. width: 10em;78. position: absolute;79. left: -1000em;80.81. }82.83. ul.nav li:hover ul li:hover ul{84. left: auto;85. margin-left: 9.1em;86. margin-top: -2.1em;87. }88. ul.nav li:hover ul li:hover ul.nav1{89. left: auto;90. margin-left: -9.1em;91. margin-top: -2.1em;92. }以上就是本⽂的全部内容，欢迎⼤家学习完善。

下拉、上拉菜单-bootStrap4常用CSS笔记

下拉、上拉菜单-bootStrap4常⽤CSS笔记菜单触发样式.dropdown-toggle下拉基类，定义⼀个触发下拉的元素。

要和data-toggle="dropdown"属性结合使⽤.dropdown-toggle-split菜单分割线，作⽤未知菜单列表样式.dropdown-menu定义⼀个下拉菜单容器.dropdown-menu-right下拉菜单容器右对齐。

默认是左对齐.dropdown-header下拉菜单标题.dropdown-item下拉菜单列表项⽬.dropdown-divider在下拉菜单中创建⼀个⽔平的分割线.active启⽤指定下拉菜单列表项⽬.disabled禁⽤指定下拉菜单列表项⽬下拉、上拉菜单需要引⼊jquery版本不低于3.2，且还要引⼊popper.min.js⽂件，两个⽂件的CDN引⽤如下：<script src="https:///jquery/3.2.1/jquery.min.js"></script><script src="https:///popper.js/1.12.5/umd/popper.min.js"></script>下拉菜单⽰例：1<div class="container">2<div class="wrapper">3<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">点我下拉</a>4<div class="dropdown-menu dropdown-menu-right">5<div class="dropdown-header">产品⼤类</div>6<a href="#" class="dropdown-item">菜单⼀</a>7<a href="#" class="dropdown-item">菜单⼆</a>8<div class="dropdown-divider"></div>9<a href="#" class="dropdown-item">菜单三</a>10<a href="#" class="dropdown-item">菜单四</a>11</div>12</div>13</div>按钮下拉⽰例：1<div class="container">2<div class="wrapper">3点击按钮，下拉菜单：<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">点我</button>45<div class="dropdown-menu">6<a href="#" class="dropdown-item">a菜单⼀</a>7<a href="#" class="dropdown-item">b菜单⼆</a>8<div class="dropdown-divider"></div>9<a href="#" class="dropdown-item">c菜单三</a>10<a href="#" class="dropdown-item">d菜单四</a>11</div>12</div>13</div>按钮组下拉⽰例：<div class="container"><div class="btn-group"><button class="btn btn-primary">请选择</button><button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><div class="dropdown-menu"><a href="#" class="dropdown-item">a菜单⼀</a><a href="#" class="dropdown-item">b菜单⼆</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">c菜单三</a><a href="#" class="dropdown-item">d菜单四</a></div></div></div>上拉菜单⽤法和下拉相同，只要将下拉菜单包含在⼀个类名为: dropup 的容器内就可以实现上拉菜单功能。

Vue中实现菜单下拉、收起的动画效果

Vue中实现菜单下拉、收起的动画效果菜单的下拉和收起动画，看起来好像⽐较简单，但是搞了半天。

最后可以使⽤的代码：<transitionname="default"v-on:enter="menuEnter"v-on:leave="menuLeave"enter-class="default-enter"leave-to-class="default-leave-to"><ul v-if="hasChildren(node, index)" class="menu-l2"><liv-for="(subnode, subIndex) in node.children":key="subnode.id"@click.prevent="handleChildNodeClick(subnode, subIndex)"class="node-l2":class="{ 'node-l2-active' : (subIndex == activeChildNodeIndex)}">{{ }}</li></ul></transition>js，这⾥是vue中的methods部分menuEnter: function(el, done) {//这⾏是关键el.offsetWidth;el.style.maxHeight = this.nodes[this.activeParentNodeIndex].children.length * 4 + "rem";el.style.transition = "all 0.3s ease-in";done();},menuLeave: function(el) {el.offsetWidth;el.style.maxHeight = 0;el.style.transition = "all 0.3s ease-out";}css://transitions.default-enter-active {transition: all 0.3s ease-in;}.default-leave-active {transition: all 0.3s ease-out;}.default-enter,.default-leave-to {max-height: 0;}说明这⾥结合了js和css，其实只⽤js也可以，但是稍微⿇烦。

设计复杂网页

•onFocus：该事件在指定元素被浏览者交互时产生。
•onKeyDown：该事件在按下任意键的同时产生。
•onKeyPress：该事件在按下和松开任意键时产生。此事件
相当于把onKeyDown和onKeyUp这两个事件集合在一起
•onKeyUp：该事件在按下的键松开时产生。
•onLoad：该事件在一幅图像或网页载入完成时产生。
3．CSS编辑器在保存样式后，系统会自动弹出编辑CSS样式属性的对话框，通过该对话框，可以定义CSS样式的多种格式，如文本、背景等。对话框左边【分类】列表框中显示了设置CSS样式的不同属性，各属性的作用如下：
（1）类型
【类型】选项中主要用来设置字体属性，包括字体、大小、样式、文字颜色等。字体属性是每个页面中最基本的属性。需要注意的是，不仅单独的文字需要定义字体属性，几乎所有的页面元素都会涉及到字体定义，例如定义表格需要涉及表格中的字体、定义列表也要涉及到列表中的字体。
（2）在【名称】文本框中输入新样式的名称。命名时必须注意，样式名称必须以英文句号开头。
（3）在【选择类型】的三个单选项中选定一个要定制的类型。
（4）单击【确定】按钮，弹出【保存样式表文件为】对话框，选择样式的保存位置。（5）单击【保存】按钮，弹出定义CSS格式的对话框。在对话框中进行各项的格式设置，设置完毕后单击【确定】按钮。
5.2.使用CSS样式
CSS是Cascading Style Sheets（层叠样式单）的简称，通常我们把它称作样式表，它是一种格式化网页的标准方式。CSS样式不仅能够控制一篇文档中的文本格式，而且通过采用外部链接的方式，还可以控制多篇文档的文本格式。当对CSS样式的定义进行修改时，文档中所有应用该样式的文本格式也会自动发生改变。

CSS中的focus-within伪类选择器

CSS中的focus-within伪类选择器css中:focus-within是什么在css中 :focus-within 是⼀个伪类，现在已经被列⼊到css选择器中（css Level 4 selector）。

css中伪类:focus-within能⾮常⽅便处理获取焦点状态，当元素本⾝或其后代获得焦点时，:focus-within伪类的元素就会有效。

没看懂，可以看下⾯的例⼦：<div class="container" tabindex="0"><label for="text">Enter text</label><input id="text" type="text" /></div><style>.container:focus-within {background-color: #aaa;}</style>如果div.container获取到焦点时，就会有⼀个#aaa背景⾊。

⽽且如果其后代元素获得焦点时，其背景⾊也会更改，所以<input>收到焦点时，div的背景⾊仍是#aaa。

这样，我们就不需要实现这样功能时，总是使⽤JavaScript，极⼤⽅便开发者。

:focus-within的使⽤场景:focus-within ⾮常强⼤，主要是由于伪类在它的任何元素获取到焦点时都将被激活。

当元素包含许多⼦组件的元素上谨慎使⽤该伪类。

有了:focus-within 之后，有⼀些常见的交互⾏为就变得⾮常的简单，特别是以前需要JavaScript的键盘事件的交互⾏为，我们都可以使⽤ :focus-within 来替代。

接下来，咱们来看⼀些 :focus-within 的常见⽰例。

1、表格⾏的⾼亮⼀个常见的例⼦，就是表格⾏⾼亮的⾏为，即⿏标悬浮在表格的⾏时，颜⾊变得⾼亮。

5种简单实用的css列表样式实例

5种简单实用的css列表样式实例谁不希望有一个好看而又干净的列表？这篇文章中我们给出几个实用的例子，你可以把他们直接用到自己的工作中。

我们从一个带有动画效果的垂直列表开始，接着是一个图文混排的例子，然后是一个只有图片的list例子跟一个水平菜单的例子，最后是一个以放大数字开头的列表。

对于初学者而言这里可以学到很多东西，对于熟手，直接拿来用就是了。

1.helvetica字体的列表第一个例子的样式看起平淡无奇，不过喜欢简约风格的人也许会感兴趣，这类似于印刷字体风格，简结的同时也不失灵动的特点（当鼠标滑上去的时候）。

注：个人喜欢这里的第二个图文混排的例子，但是发现老外更喜欢第一个，也许这就是文化差异吧。

这里是源码demo地址：CodePen先看效果图：以下是html代码<div><h2>HelvetiList</h2><ul><li><a href="#">Zurich</a></li><li><a href="#">Geneva</a></li><li><a href="#">Winterthur</a></li><li><a href="#">Lausanne</a></li><li><a href="#">Lucerne</a></li></ul></div>以下是css代码：div {width: 200px;}h2 {font: 400 40px/1.5 Helvetica, Verdana, sans-serif; margin: 0;padding: 0;}ul {list-style-type: none;margin: 0;padding: 0;}li {font: 200 20px/1.5 Helvetica, Verdana, sans-serif;border-bottom: 1px solid #ccc;}li:last-child {border: none;}li a {text-decoration: none;color: #000;display: block;width: 200px;-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;-moz-transition: font-size 0.3s ease, background-color 0.3s ease;-o-transition: font-size 0.3s ease, background-color 0.3s ease;-ms-transition: font-size 0.3s ease, background-color 0.3s ease;transition: font-size 0.3s ease, background-color 0.3s ease;}li a:hover {font-size: 30px;background: #f6f6f6;}2.图文混排的Thumbnail List这是一种在很多网站上都用得比较普遍的列表样式，“图文混排”，图文混排往往比单一的文字更能吸引人的眼球，很多wordpress的博客网站都是用图文混排的板式。

理解与应用css中的display属性

理解与应用css中的display属性display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有：noneblockinlineinline-blockinherit下面，我将按照顺序将上述几种属性做一个完整的讲解。

第一部分：display:nonenone这个值表示此元素将不被显示。

比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例），我们就可以按下F12，打开开发者工具，点击element，然后使用左上角的选择工具选中想要删除的广告，可以看到element中会有高亮的一行或几行代码，右键，点击Add Attribute，然后输入：style="display:none"，这时就可以发现广告不见啦！当然display:none的用法绝不是专门用于这里的，它还可以用于二级下拉菜单的制作中将二级下拉菜单先设置位display:none;,当鼠标滑过一级菜单时，再显示出来（详见《如何实现导航菜单中的二级下拉菜单》）。

还可以用于登陆模态框的制作等等。

第二部分：display:block使用了display：block;之后，此元素将显示为块级元素，此元素前后会带有换行符。

我们先来回顾以下块级元素是什么，他有什么特点。

既然要区分块级元素和行内元素，就得先说说标准文档流了。

标准文档流：简称标准流，指的是在不使用其他的与排列和定位相关的css规则时，各种元素的排列规则。

于是，我们将“各种元素”分为块级元素和行内元素。

（注：实际上还有空元素，如<br>用于换行，<hr>为一条水平线，这里对空元素不做过多讨论）块级元素特点：总是以一个块的形式表现出来，占领一整行。

若干同级块元素会从上之下依次排列（使用float属性除外）。

可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。

DIV+CSS命名规范

DIV+CSS规范命名大全集合页头：header 如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id 区别及用法登录条：loginBar 标志：logo 侧栏：sideBar广告：banner 导航：nav 子导航：subNav菜单：menu 子菜单：subMenu 搜索：search滚动：scroll 页面主体：main 内容：content标签页：tab 文章列表：list 提示信息：msg小技巧：tips 栏目标题：title 加入：joinus指南：guild 服务：service 热点：hot新闻：news 下载：download 注册：regsiter状态：status 按钮：btn 投票：vote合作伙伴：partner 友情链接：friendLink页脚：footer版权：copyRight常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u1.CSS的 ID 的命名也许你需要了解class与Id区别外套：wrap 主导航：mainNav 子导航：subnav页脚：footer 整个页面：content 页眉：header版权：copyRight 商标：label 标题：title主导航：mainNav(globalNav) 顶导航：topnav边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar旗志：logo 标语：banner 菜单内容1： menu1Content菜单容量：menuContainer 子菜单：submenu边导航图标：sidebarIcon 注释：note面包屑：breadCrumb(即页面所处位置导航提示)容器：container 内容：content 搜索：search登陆：login 功能区：shop(如购物车，收银台)当前：currentDIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML 中重复使用调用。

纯CSS下拉菜单和右拉菜单的实现方法

纯CSS下拉菜单和右拉菜单的实现方法下拉和右拉菜单是网页当中最为常见的组件为便于理解，两个例子都只写了基本样式，实际应用时可以添加符合页面风格的美化样式，【】给大家讲解一下实现思路。

以下两例公用样式：<style>body,ul{margin:0px;padding:0px;}li{list-style:none;}a{text-decoration:none;}</style>一、纯CSS实现下拉菜单本例实现效果CSS代码#nav{height:18px;}#nav li{float:left;display:inline;}.list{background: #FFF;}.menu{height:18px;padding-left:10px;padding-right:10px;overflow:hidden;}.menu:hover{height:auto;}.menu:hover .list{position:absolute;z-index:1;}.list a{display:block}HTML代码<h3>下拉菜单示例</h3><ul id="nav"><li class="menu">菜单项目<div class="list"><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li><li class="menu">菜单项目<div class="list"><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li><li class="menu">菜单项目<div class="list"><a href="#">菜单项目</a><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li><li class="menu">菜单项目<div class="list"><a href="#">菜单项目2</a><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li></ul>实现关键点：1.一级导航指定固定高度，并将超出部分隐藏：.menu{height:18px;overflow:hidden;}；2.通过hover事件将高度属性改为auto：.menu:hover{height:auto;}；3.为了二级菜单显示时不影响其他节点的位置，通过position:absolute将二级菜单踢出文档流,并指定其优先层级menu:hover .list{position:absolute;z-index:1;}二、纯CSS实现右拉菜单本例实现效果CSS代码需要上面的公用样.menu-v{position:relative;width:100px;height:18px;padding-left:10px;padding-right:10px;}.list-v{background: #fff;display:none;width:120px;}.list-v a{display:block}.menu-v:hover .list-v{display:block;position:absolute;z-index:1;left:80px;top:0px;}HTML代码<ul><li class="menu-v">菜单项目<div class="list-v"><a href="#">菜单项目</a><a href="#">菜单项目</a><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li><li class="menu-v">菜单项目<div class="list-v"><a href="#">菜单项目</a><a href="#">菜单项目</a><a href="#">菜单项目</a></div></li></ul>实现关键点1.先将二级菜单隐藏并指定显示位置并踢出文档流.list-v{display:none;position:absolute;z-index:1;left:80px;top:0px;width:120px;background: #fff;} 2.通hover事件将二级菜单显示.menu-v:hover .list-v{display:block;}。

css菜鸟教程

css菜鸟教程CSS基础教程CSS（层叠样式表）是一种用于网页样式设计的语言。

通过CSS，你可以控制网页的布局、字体、颜色、背景等各种样式，以及添加动画效果和响应式布局。

1. CSS语法CSS语法由选择器和声明块组成。

选择器用于选择需要应用样式的元素，声明块包含一系列属性-值对，用于描述要应用到选择器匹配的元素上的样式。

2. CSS选择器常见的CSS选择器包括：- 元素选择器：```cssp {color: blue;}```上述代码表示将所有 `<p>` 元素的字体颜色设为蓝色。

- ID选择器：```css#myDiv {background-color: yellow;}```上述代码表示将 `id` 为 `myDiv` 的元素的背景颜色设为黄色。

- 类选择器：```css.myClass {font-size: 20px;}```上述代码表示将所有 `class` 为 `myClass` 的元素的字体大小设为20像素。

- 属性选择器：```cssinput[type='text'] {border: 1px solid black;}```上述代码表示将所有 `type` 属性为 `text` 的 `input` 元素的边框设为1像素的黑色实线。

3. CSS属性CSS属性用于描述元素的各种样式。

常见的CSS属性有：- 字体样式属性：- `color`：元素的字体颜色- `font-size`：元素的字体大小- `font-family`：元素的字体类型- 边框样式属性：- `border-width`：边框的宽度- `border-color`：边框的颜色- `border-style`：边框的样式- 背景样式属性：- `background-color`：背景颜色- `background-image`：背景图片- `background-repeat`：背景图片的重复规则4. CSS盒模型盒模型描述了元素在网页布局中的尺寸和属性。

css规范文档

css规范⽂档CSS书写顺序*{/*显⽰属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*⽂字*/colorfontcontent/*边框背景为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来⽅便，哈哈。

*/ borderbackground}下表顺序为从上到下，从左到右：========================display || visibilitylist-style : list-style-type || list-style-position || list-style-imagepositiontop || right || bottom || leftz-indexclearfloatwidthmax-width || min-widthheightmax-height || min-heightoverflow || clipmargin : margin-top || margin-right || margin-bottom || margin-leftpadding : padding-top || padding-right || padding-bottom || padding-leftoutline : outline-color || outline-style || outline-widthborderbackground : background-color || background-image || background-repeat || background-attachment || background-position colorfont : font-style || font-variant || font-weight || font-size || line-height || font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS命名规则：⼀．⽂件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；　链接样式：link.css；　打印样式：print.css；主要的 master.css专栏 columns.css主题 themes.css主要的 master.css模块 module.css基本共⽤ base.css表单 forms.css补丁 mend.css　⼆．页⾯结构容器: container页头：header内容：content页⾯主体：main页尾：footer栏⽬：column页⾯外围控制整体布局宽度：wrapper左右中：left right center　三．导航导航：nav主导航：mainbav⼦导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu⼦菜单：submenu摘要: summary四．功能标志：logo⼴告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加⼊：joinus状态：status按钮：btn滚动：scroll标签页：tab⽂章列表：list提⽰信息：msg当前的: current⼩技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyrightContainer div #container 容器Layout #layout 布局Header or banner div #head, #header 页头部分Footer div #foot, #footer 页脚部分Navigation list #nav 主导航Sub-navigation list #subNav ⼆级导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏Main div #main 页⾯主体Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Search input #searchInput 搜索输⼊框Search output #search_output 搜索输出和搜索结果相似Search #search 搜索Search bar #searchBar 搜索条Search results #search_results 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #logo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Arrow arr/arrow 箭头Little #little 标题Website map #sitemap ⽹站地图List #list 列表Home page #homepage ⾸页Sub page subpage ⼆级页⾯⼦页⾯Toolbar #tool, #toolbar ⼯具条Next pulls #drop 下拉Next pulls menu #dorpmenu 下拉菜单Status #status 状态Container div #container 容器Header or banner div #header 页头部分Main or global navigation div #mainNav 主导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏Main div #main 页⾯主体Content div #content 内容部分The main content area #contentMain 主要内容区域Footer div #footer 页脚部分Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Sub-navigation list #subNav ⼆级导航Search input #searchInput 搜索输⼊框Search output #searchOutput 搜索输出和搜索结果相似Search #search 搜索Search results #searchResults 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #brandingLogo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Status #status 状态Products .products 产品Products prices .productsPrices 产品价格Products description .productsDescription 产品描述Products review .productsReview 产品评论Editor's review .editorReview 编辑评论New release .newsRelease 最新产品Publisher .publisher ⽣产商Screen shot .screenshot 缩略图FAQ .faqs 常见问题Keyword .keyword 关键词Blog .blog 博客Forum .forum 论坛五class的命名:(1)颜⾊:使⽤颜⾊的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体⼤⼩,直接使⽤"font+字体⼤⼩"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使⽤对齐⽬标的英⽂名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使⽤"类别+功能"的⽅式命名,如.barnews { }.barproduct { }/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、⿏标⼿势：在XHTML标准中，hand只被IE识别，当需要将⿏标⼿势转换为“⼿形”时，则将“hand”换为“pointer”，即“cursor:pointer;”10．注释书写规范1、⾏间注释：直接写于属性值后⾯，如：.search{border:1px solid #fff;/*定义搜索输⼊框边框*/background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地⽅加⼊注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}/*=====搜索条结束=====*/3．协助注释⾮作者维护时所加⼊的表⽰修改时间、修改⼈等标识信息。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>联系我们- 其它- 武汉珂普尔节能科技有限公司</title><meta name="keywords" content="服务中心,武汉珂普尔节能科技有限公司"><meta name="description" content="服务中心,武汉珂普尔节能科技有限公司"><meta http-equiv='x-ua-compatible' content='ie=7' /><base href="/" /><link rel="stylesheet" type="text/css" href="tpl/terry/images/base.css"/><link rel="stylesheet" type="text/css" href="tpl/terry/images/main.css"/><style>#nav_2{width:990px;position:absolute;z-index:1;left: 0px;top: 0px; background:url(tpl/terry/images/navbg.jpg) repeat-x;}#nav_2 ul li{ float:left;}.list{line-height:22px;text-align:center;padding: 3px 0px;font-weight:normal;color:#336601; font-size:12px;}.menu1{height:auto;background-color:#fff;cursor:hand; font-size:14px;overflow-y:hidden;filter:alpha(opacity=80); /* IE */-moz-opacity:0.8; /* Moz + FF */opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/}.menu2{height:35px;overflow-y:hidden;cursor:hand;}</style></head><bodyonload="MM_preloadImages('tpl/terry/images/nav22.jpg','tpl/terry/images/nav21.jpg','tpl/terry/im ages/nav23.jpg','tpl/terry/images/nav24.jpg','tpl/terry/images/nav25.jpg','tpl/terry/images/nav26.jp g','tpl/terry/images/nav27.jpg','tpl/terry/images/nav28.jpg')"><div class="clear"></div><div style="position:relative; height:45px; float:left; width:990px; z-index:100;"><div id="nav_2"><ul><li><img src="tpl/terry/images/navline.jpg" width="2" height="45" /></li><li><a href="" target="_top" onclick="MM_nbGroup('down','group1','nav1','',1)" onmouseover="MM_nbGroup('over','nav1','tpl/terry/images/nav21.jpg','',1)"onmouseout="MM_nbGroup('out')"><img src="tpl/terry/images/nav1.jpg" alt="首页" name="nav1" width="121" height="45" border="0" /></a></li><li><img src="tpl/terry/images/navline.jpg" width="2" height="45" /></li><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="index.php?c=msg&ts=aboutus" target="_top" onclick="MM_nbGroup('down','group1','nav2','',1)"onmouseover="MM_nbGroup('over','nav2','tpl/terry/images/nav22.jpg','',1)"onmouseout="MM_nbGroup('out')"><img src="tpl/terry/images/nav2.jpg" alt="公司介绍" name="nav2" width="121" height="45" border="0" /></a><div class="list"><a href="index.php?c=msg&ts=aboutus&">公司介绍</a><br /><a href="index.php?c=msg&ts=wenhua&">企业文化</a><br /><a href="index.php?c=msg&ts=contactus&">公司资质</a><br /></div></li><li><img src="tpl/terry/images/navline.jpg" width="2" height="45" /></li><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="index.php?c=list&cs=news" target="_top" onclick="MM_nbGroup('down','group1','nav3','',1)"onmouseover="MM_nbGroup('over','nav3','tpl/terry/images/nav23.jpg','',1)"onmouseout="MM_nbGroup('out')"><img src="tpl/terry/images/nav3.jpg" alt="新闻中心" name="nav3" width="121" height="45" border="0" /></a><div class="list"><ahref="index.php?c=list&cs=xingyedongtai&">行业新闻</a><br /><a href="index.php?c=list&cs=gongsidongtai&">公司动态</a><br /></div></li><li><img src="tpl/terry/images/navline.jpg" width="2" height="45" /></li><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="index.php?c=list&cs=pros" target="_top" onclick="MM_nbGroup('down','group1','nav4','',1)"onmouseover="MM_nbGroup('over','nav4','tpl/terry/images/nav24.jpg','',1)"onmouseout="MM_nbGroup('out')"><img src="tpl/terry/images/nav4.jpg" alt="产品中心" name="nav4" width="121" height="45" border="0" /></a><div class="list"><ahref="index.php?c=list&cs=renenghuishouxitongERS&">热能回收系统ERS</a><br /><a href="index.php?c=list&cs=pro2&">能效管理系统EMS</a><br /><a href="index.php?c=list&cs=pro3&">集中控制系统CCS</a><br /><a href="index.php?c=list&cs=pro4&">变频节电设备PDS</a><br /><a href="index.php?c=list&cs=pro5&">螺杆式压缩机零配件</a><br /></div></li><li><img src="tpl/terry/images/navline.jpg" width="2" height="45" /></li><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="index.php?c=list&cs=anli" target="_top" onclick="MM_nbGroup('down','group1','nav5','',1)"onmouseover="MM_nbGroup('over','nav5','tpl/terry/images/nav25.jpg','',1)"onmouseout="MM_nbGroup('out')"><img src="tpl/terry/images/nav5.jpg" alt="应用案例" name="nav5" width="121" height="45" border="0" /></a><div class="list"><ahref="index.php?c=list&cs=kongyaji&">空压机</a><br /><a href="index.php?c=list&cs=jieneng&">节能</a><br /></div></li><li><img src="tpl/terry/images/navline.jpg" width="2" height="45" /></li><li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="index.php?c=msg&ts=kefu" target="_top" onclick="MM_nbGroup('down','group1','nav6','',1)"onmouseover="MM_nbGroup('over','nav6','tpl/terry/images/nav26.jpg','',1)"onmouseout="MM_nbGroup('out')"><img src="tpl/terry/images/nav6.jpg" alt="服务中心" name="nav6" width="121" height="45" border="0" /></a><div class="list"><ahref="index.php?c=msg&ts=kefu&">售后服务</a><br /><a href="index.php?c=msg&id=189&">售前服务</a><br /><a href="index.php?c=list&cs=download">资料下载</a><br /><a href="index.php?c=list&ms=book">意见反馈</a><br /></div></li><li><img src="tpl/terry/images/navline.jpg" width="2" height="45" /></li><li><a href="index.php?c=msg&ts=contact" target="_top" onclick="MM_nbGroup('down','group1','nav7','',1)"onmouseover="MM_nbGroup('over','nav7','tpl/terry/images/nav27.jpg','',1)"onmouseout="MM_nbGroup('out')"><img src="tpl/terry/images/nav7.jpg" alt="联系我们" name="nav7" width="121" height="45" border="0" /></a></li><li><img src="tpl/terry/images/navline.jpg" width="2" height="45" /></li><li><a href="index.php?c=post&f=set&ms=xunjia" target="_top" onclick="MM_nbGroup('down','group1','nav8','',1)"onmouseover="MM_nbGroup('over','nav8','tpl/terry/images/nav28.jpg','',1)"onmouseout="MM_nbGroup('out')"><img src="tpl/terry/images/nav8.jpg" alt="预约订购" name="nav8" width="121" height="45" border="0" /></a></li></ul></div></div><div class="clear"></div><div><div style="text-align: center"><img border="0" alt="" src="upfiles/201103/27/72b76fa6cdaae79a.jpg" /></div></div></body></html>。