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

CSS凹型导航按钮效果的实现代码CSS3中设置3D变形的transform-style属性详解css 元素选择器的简单实例css border属性的使用方法和技巧css sprite简单实例CSS3中的Transition过度与Animation动画属性使用要点CSS中:before和:after伪元素使用的奇技淫巧使用CSS绘制基础的对话框图案的代码示例CSS3 magic带64种动画库特效源码CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

2021-09-05 1087人已围观

简介 下面小编就为大家带来一篇CSS凹型导航按钮效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧。祝大家游戏愉快哦

一般需求，圆角看起来更加舒服，但是下面直角略显生硬

于是设计师有了下面的需求，下面加上小凹型：

凹型？凹型？凹型？有点变态，这怎么实现...........

图片肯定是最先考虑到的，CSS实现有貌似有一定难度.......

别怕，咋们遇难而上，go go...

先上html结构，这个很简单,没什么可以说明的：

XML/HTML Code复制内容到剪贴板
  1. >    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">    
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">    
  7.     <title>css凹型导航title>    
  8.      
  9. head>    
  10. <body>    
  11. <nav id="nav">    
  12.     <ul>    
  13.         <li>    
  14.             <div class="left">div>    
  15.             <div class="con">导航1div>    
  16.             <div class="right">div>    
  17.         li>    
  18.         <li>    
  19.             <div class="left">div>    
  20.             <div class="con">导航2div>    
  21.             <div class="right">div>    
  22.         li>    
  23.         <li>    
  24.             <div class="left">div>    
  25.             <div class="con">导航3div>    
  26.             <div class="right">div>    
  27.         li>    
  28.         <li>    
  29.             <div class="left">div>    
  30.             <div class="con">导航4div>    
  31.             <div class="right">div>    
  32.         li>    
  33.     ul>    
  34. nav>    
  35. body>    
  36. html>  

再看CSS

CSS Code复制内容到剪贴板
  1. #nav {    
  2.             background: #fff;    
  3.             border-bottom: 1px solid #7bd1ff;    
  4.             width: 960px;    
  5.             margin: 100px auto;    
  6.             height: 60px;;    
  7.         }    
  8.      
  9.         #nav ul li {    
  10.             float: left;    
  11.             list-style: none;    
  12.             height: 60px;    
  13.             margin: 0 10px;    
  14.         }    
  15.      
  16.         li * {    
  17.             float: left;    
  18.             transition: all .2s;    
  19.         }    
  20.      
  21.         .con {    
  22.             width: 60px;    
  23.             height: 60px;    
  24.             line-height: 60px;    
  25.             text-align: center;    
  26.             background: #7bd1ff;    
  27.             border-radius: 10px 10px 0 0;    
  28.         }    
  29. 　　　　　/*   
  30. 　　　　　　设置凹型的尺寸，   
  31. 　　　　　　通过margin定位   
  32. 　　　　　*/    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：深入解析IE浏览器专有的CSS属性hasLayoutCSS3 magic带64种动画库特效源码div+css实现不同方向鼠标悬停弹出提示层特效源码jQuery和CSS3超酷3D堆叠式幻灯片特效源码详解使用CSS固定页面背景图片位置的方法CSS3制作炫酷的下拉菜单及弹起式选单的实例分享CSS3中各种颜色属性的使用教程使用CSS3美化HTML表单的技巧演示利用CSS3的border-radius绘制太极及爱心图案示例js+css3实现的折角邮票图片墙特效源码CSS凹型导航按钮效果的实现代码

    下一篇：使用CSS绘制基础的对话框图案的代码示例CSS3中设置3D变形的transform-style属性详解css 元素选择器的简单实例css border属性的使用方法和技巧css sprite简单实例CSS3中的Transition过度与Animation动画属性使用要点CSS中:before和:after伪元素使用的奇技淫巧CSS凹型导航按钮效果的实现代码CSS3 magic带64种动画库特效源码CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网