div+cssselect效果资源-CSDN下载

共2个文件

js：1个

html：1个

3星 · 超过75%的资源需积分: 9 180 浏览量 2012-11-14 13:07:39 上传评论 1 收藏 32KB ZIP 举报

在网页设计中，`div` 和 `css` 是两种核心的技术，用于构建和美化页面布局。`div` 是一个HTML（超文本标记语言）元素，它通常被用作页面上的内容容器，而`css`（层叠样式表）则负责控制页面的样式、布局和表现。在传统的HTML中，`<select>` 元素用于创建下拉菜单，但其默认样式在不同的浏览器之间存在差异，且通常较为简陋。本教程将详细讲解如何使用`div+css`来实现一个兼容多浏览器的美化版`select`效果。我们需要创建一个`div`元素作为`select`的替代品，这将作为我们自定义样式的容器。通过设置`position`属性为`relative`，我们可以确保这个`div`相对于其正常文档流的位置。然后，我们将在`div`内嵌套一个`<select>`元素，并将其`position`设置为`absolute`，这样可以使其脱离正常文档流并定位在`div`的特定位置。接下来，我们需要用CSS来定制`select`的外观。由于`select`元素在不同浏览器中的样式难以统一，我们将主要依赖于`::before`和`::after`伪元素来模拟`select`的箭头图标和其他视觉元素。例如，我们可以创建一个`::after`伪元素，设置其`content`为一个向下的箭头图标，并通过`transform`属性调整其位置。对于兼容性问题，特别是针对老旧的IE6及以上版本，我们需要使用一些CSS hack。例如，我们可以使用`*html`或`_width`这样的前缀来专门针对IE浏览器设置样式。不过，对于IE6，由于其对CSS2的支持有限，可能无法实现所有复杂的美化效果，因此可能需要提供一个备选方案，如简单的无样式`select`或者JavaScript的兼容处理。为了使`select`在视觉上与周围元素平滑融合，我们还需要调整其边框、背景色、字体样式等。例如，可以使用`border-radius`来创建圆角，使用`box-shadow`添加阴影效果，使用`color`和`font-size`来设定文字颜色和大小。同时，通过响应式设计，我们可以确保在不同屏幕尺寸下，`select`的效果依然保持一致。为了让用户能够交互，我们需要添加一些JavaScript来模拟`select`的点击行为。可以监听`click`事件，当用户点击`div`时，显示或隐藏`select`的下拉菜单。此外，还可以通过JavaScript监听`change`事件，以便在用户选择新的选项后更新`div`的内容以反映选择的状态。使用`div+css`实现的`select`效果可以提供更加一致且美观的用户体验，同时通过合理的浏览器兼容性处理，确保在多种浏览器环境下都能良好运行。这不仅提升了页面的整体视觉品质，也使得网站的交互更加友好。在实际项目中，开发者可以根据具体需求进行调整和优化，创造出符合品牌风格的自定义`select`组件。

资源推荐

资源详情

资源评论

收起资源包目录

select效果.zip （2个子文件）

select效果

jquery.js 88KB

select.html 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js" ></script> <title>无标题文档</title> <style type="text/css"> .newsSelectDiv { width:100px; height:18px; padding:5px; background-color:#fafafa; border-radius:5px; } .newsOrder { width: 100px; border: 1px solid #cdcdcd; font-size: 13px; background-color: #ffffff; } .one { height: 18px; width: 100px; } .one_txt { width:75px; float:left; padding:2px 0 1px 5px; } .two { display: none; height: 14px; padding: 3px 5px 1px 5px; } .three { display: none; height: 15px; padding: 2px 5px 1px 5px; } .W_arr_bg { background-color: #fafafa; width: 10px; height: 7px; overflow: hidden; border-left: 1px solid #cdcdcd; text-align:center; float:right; padding: 11px 4px 0 4px; _padding: 5px 4px 0 4px; *padding: 5px 4px 0 4px; _height: 14px; *height: 13px; } .W_arr_d { display: inline-block; height: 3px; margin-top: -3px; overflow: hidden; vertical-align: middle; width: 5px; } .W_arr_d em { background: none repeat scroll 0 0 #C1C1C1; display: block; height: 1px; overflow: hidden; } .W_arr_d em.b2 { margin: 0 1px; width: 3px; } .W_arr_d em.b3 { margin: 0 2px; width: 1px; } </style> <script type="text/javascript"> jQuery(function(){ jQuery('.W_arr_bg').toggle( function(){ jQuery('.one').css({'border-bottom':'1px solid #cdcdcd'}); jQuery('.two').show(); jQuery('.three').show(); }, function(){ jQuery('.one').css({'border-bottom':''}); jQuery('.two').hide(); jQuery('.three').hide(); } ); jQuery('.overBg').hover( function(){ jQuery(this).css({'background-color':'#f9f9f9'}); }, function(){ jQuery(this).css({'background-color':''}); } ); jQuery('.overBg').click(function(){ var curTxt = jQuery(this).html(); var cliTxt = jQuery('.one_txt').html(); jQuery('.one_txt').html(curTxt); jQuery(this).html(cliTxt); jQuery('.one').css({'border-bottom':''}); jQuery('.two').hide(); jQuery('.three').hide(); }); }) </script> </head> <body> <div class="newsSelectDiv"> <div class="newsOrder"> <div class="one"> <div class="one_txt">按时间排序</div> <span class="W_arr_bg"> <span class="W_arr_d"> <em class="b1"></em> <em class="b2"></em> <em class="b3"></em> </span> </span> </div> <div class="two overBg">按热门排序</div> <div class="three overBg">按评论排序</div> </div> </div> </body> </html>

评论收藏

内容反馈