您现在的位置是：网站首页> 编程资料编程资料

利用CSS实现酷炫的下拉框特效_CSS教程_CSS_网页制作_

2023-11-05 245人已围观

简介 这篇文章给大家介绍的是一个利用CSS实现的酷炫的下拉框，实现后效果真的非常不错，文中给出了详细实现过程和示例代码，感兴趣的朋友们下面来一起看看吧。

首先来看看要实现的效果图

想要制作这么一个效果还是比较麻烦的，但是代码并不难理解。

首先，来看看 Html 代码。

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.     <div class="heading">  
  3.         <h2>Custom Selecth2>  
  4.     div>  
  5.   
  6.     <div class="select">  
  7.         <p>Please selectp>  
  8.         <ul>  
  9.             <li data-value="HTML5">HTML5li>  
  10.             <li data-value="CSS3">CSS3li>  
  11.             <li data-value="JavaScript">JavaScriptli>  
  12.             <li data-value="JQuery">JQueryli>  
  13.             <li data-value="Backbone">Backboneli>  
  14.         ul>  
  15.     div>  
  16. div>  

可见，我们并没有利用原生的 select 元素，而是利用其它元素来模拟这个效果。我们为 li 元素指定了 data-value,主要是接下来我们会用 JQuery 获取选中值并将其放置到 p 元素下。

下面逐步来看 CSS 代码。

CSS Code复制内容到剪贴板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5.   
  6. html {   
  7.     font-family: 'Terminal';   
  8.     font-size: 62.5%;   
  9. }   
  10.   
  11. body {   
  12.     background-color: #33CC66;   
  13. }  

1、将网页中所有元素的外边距和内边距设置为 0。

2、将网页中的默认字体设置为 Terminal，字体大小设置为 62.5%, 也就是 10px。

3、设置背景颜色为 #33CC66。

XML/HTML Code复制内容到剪贴板
  1. <link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>  

上面我们用到了 Terminal 字体，而且接下来我们还会使用 Lobster 字体，所以用这行代码添加引用。

1、指定 headng, select 宽度并指定其水平居中。

2、修改 heading 的宽度，主要是为了让其宽度大于 select 的宽度，显得更加美观。然后指定其上外边距和下外边距。

3、设置 heading 下 h2 元素的字体和字体大小，颜色。

CSS Code复制内容到剪贴板
  1. .select > p, .select ul {   
  2.         background-color: #ffffff;   
  3.         font-size: 2rem;   
  4.         border: 1px solid bisque;   
  5.         border-radius: 5px;   
  6.         margin-bottom: 0;   
  7.     }   
  8.   
  9. .select > p {   
  10.         text-align: left;   
  11.         padding: 1rem;   
  12.         position: relative;   
  13.         border-bottom-rightright-radius: 0;   
  14.         border-bottom-left-radius: 0;   提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS3实现精美横向滚动菜单按钮_css3_CSS_网页制作_

    下一篇：利用纯CSS自定义Checkbox和Radio的样式示例代码_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网