在线建站培训
您的位置: 魔客吧 网页制作 CSS教程 查看内容

一个利用CSS实现的酷炫的下拉框

2017-8-2 08:21 | 发布者: moke | 栏目:CSS教程

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

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

首先,来看看 Html 代码。

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.     <div class="heading">  
  3.         <h2>Custom Select</h2>  
  4.     </div>  
  5.   
  6.     <div class="select">  
  7.         <p>Please select</p>  
  8.         <ul>  
  9.             <li data-value="HTML5">HTML5</li>  
  10.             <li data-value="CSS3">CSS3</li>  
  11.             <li data-value="JavaScript">JavaScript</li>  
  12.             <li data-value="JQuery">JQuery</li>  
  13.             <li data-value="Backbone">Backbone</li>  
  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.         border1px solid bisque;   
  5.         border-radius: 5px;   
  6.         margin-bottom: 0;   
  7.     }   
  8.   
  9. .select > p {   
  10.         text-alignleft;   
  11.         padding: 1rem;   
  12.         positionrelative;   
  13.         border-bottom-rightright-radius: 0;   
  14.         border-bottom-left-radius: 0;   
  15.         cursorpointer;   
  16.         color: rgba(102, 102, 102, .6);   
  17.     }   
  18. .select > p:after {   
  19.         displayblock;   
  20.         width10px;   
  21.         height10px;   
  22.         content'';   
  23.         positionabsolute;   
  24.         top: 1.4rem;   
  25.         rightright: 2rem;   
  26.         border-bottom1px solid #33CC66;   
  27.         border-left1px solid #33CC66;   
  28.         transform: rotate(-45deg);   
  29.         transition: transform .3s ease-out, top .2s ease-out;   
  30.     }  

1、设置 p 和 ul 元素的背景颜色和边框等设置。

2、为 p 元素单独指定样式,并设置其 position 属性,主要是为了下面绘制右侧的下拉按钮。

3、利用 :after 在p 元素的右方绘制下拉按钮,可以看出来,我们是利用左下边框然后旋转 -45 度 模拟的这个效果。值得注意的是,我们需要将其  display 设置为 block,并且设置宽高,否则看不到 这个效果。

CSS Code复制内容到剪贴板
  1. .select ul {   
  2.     margin-top: 0;   
  3.     border-top-left-radius: 0;   
  4.     border-top-rightright-radius: 0;   
  5.     list-style-typenone;   
  6.     cursorpointer;   
  7.     overflow-y: auto;   
  8.     max-height: 0;   
  9.     transition: max-height&n

    魔客吧温馨提示:如果你想搭建一个地方门户或者社交论坛,那么到魔客吧的 discuz模板 频道看看吧,这里有很多的地方门户和论坛模板哦!

最新分享资源

最新评论

验证码 换一个