css3学习过程中导航条的制作笔记

原创 2015年11月18日 15:48:22

导航菜单效果图:

使用了css3知识点制作:有一下几点:

1:将方角画成圆角:border-radius

2:阴影效果使得有立体感:box-shadow:

3:过度效果:transform里的rotate() ,并使用transition设置了过度的对象,时间,方式

还使用了rgba()来调节颜色的透明度


<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
         ul{
          display: block;
          width: 400px;
          height: 70px;
          background:rgba(15,222,39,0.3);
          /*制作圆角*/
          border-radius:20px;
          /*制作立体的导航条*/
          box-shadow: 5px 8px 5px rgba(11,147,43,0.4);
         }
         ul>li{
          display: inline-block;
          margin: 20px auto;
            /*设置 a过度的对象,时间,过度 方式*/
          -webkit-transition: all 0.5s ease-in;
 -moz-transition: all  0.5s ease-in;
 -o-transition: all  0.5s ease-in;
 -ms-transition: all  0.5s ease-in;
 transition: all  0.5s ease-in;
         
         }
         a{
             text-decoration: none;/*去掉超链接的下划线*/
             font-size: 24px;
             margin: 0 6px;
             font-weight: bold;
             /*设置立体的字体*/
             color: rgba(231,249,33,1);
             text-shadow:4px 2px 3px rgba(13,180,111,1);
            
           
         }
         /*给导航条设置分割线*/
         ul>li:before{
          content: '';
          border: 1px solid rgba(13,180,111,0.5);
         }
         /*隐藏第一个分割线*/
         li:first-child:before{
             border:0px;
         }   
       /*使得每个菜单会动*/


      li:hover{
      /*设置li旋转一定的角度*/
     
        -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 transform:rotate(360deg);


       }
</style>
</head>
<body>
<ul>
<li><a href="">首页</a></li>
<li><a href="">水果</a></li>
<li><a href="">蔬菜</a></li>
<li><a href="">肉类</a></li>
<li><a href="">配料</a></li>
</ul>

</body>
</html>

【HTML5学习笔记】16:CSS选择器 上

CSS选择器即是定位到想要选择的元素,然后对其配置样式。目前已经有CSS3选择器了,不过使用较多的还是CSS1和CSS2,而CSS3用于扩展。 选择器分类:基本选择器、复合选择器、伪选择器(还分为伪...
  • SHU15121856
  • SHU15121856
  • 2017年06月18日 22:27
  • 367

【学习笔记+实践】简单的导航条菜单制作

1、用无序列表构建菜单; 2、垂直菜单转变为水平菜单:float:left; 3、在制作圆角菜单时,背景图片贴在标签上; 4、在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧:margin-top用...
  • u014745411
  • u014745411
  • 2015年01月24日 14:53
  • 642

Bootstrap 教程第二课:制作网站导航条

上一课介绍了用Bootstrap前端框架制作一个简易的主页,其中介绍了使用Bootstrap框架所需要的准备工作,以及文档格式要求,在这里及以后将不再复述,如有不明白的地方,可以查看上一节的内容(Bo...
  • kl28978113
  • kl28978113
  • 2016年06月20日 15:46
  • 2127

屌炸天-css3水平导航下拉菜单

1. 简介 参考:http://designmodo.com/css3-dropdown-menu/ 本人重新定义了css的样式, 得到了适合自己的css文件 2. 原css文件 s...
  • Cryhelyxx
  • Cryhelyxx
  • 2014年11月29日 19:49
  • 2163

设计模式学习笔记—模板方法模式

模板方法(Template method pattern) 其实,我感觉吧,模板方法就像一种父类调用子类方法的一种(其实这是错的),事实上,模板方法的作用是在父类调用子类中实现的方法 这样的话 1.首...
  • LiynGu
  • LiynGu
  • 2016年01月22日 13:10
  • 200

页面制作学习笔记

1-1-1工具 面板 视图 1.使用PS工具 编辑-首选项-单位与标尺:标尺:像素,文字:像素 面板: 在“窗口”菜单下开启:工具、选项、信息(F8)、图层(F7)、历史记录 保存工作区(新建工作区)...
  • x_chengqq
  • x_chengqq
  • 2016年05月25日 13:34
  • 196

使用CSS3制作导航条和毛玻璃效果

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。 本次分享...
  • kuihuan2771
  • kuihuan2771
  • 2017年03月15日 10:12
  • 312

学习CSS3 3D转换,制作一个3D立方体

要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果。不过有很多需要注意的地方,这里把我学习的方法,过程...
  • u014346301
  • u014346301
  • 2016年10月26日 16:28
  • 2750

多种类型的导航条制作【css3,jquery】

导航条的使用很广,每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下...
  • u010297791
  • u010297791
  • 2016年09月16日 19:04
  • 1920

使用CSS3制作导航条和毛玻璃效果

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。 本次分享...
  • mumushuiyue
  • mumushuiyue
  • 2017年05月03日 22:26
  • 142
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3学习过程中导航条的制作笔记
举报原因:
原因补充:

(最多只允许输入30个字)