CSS3背景 制作导航菜单综合练习题

小伙伴们，根据所学知识，使用CSS3实现下图的导航菜单效果

任务

1、制作导航圆角

提示：使用border-radius实现圆角

2、制作导航立体风格

提示：使用box-shadow实现立体风格

3、制作导航分隔线

提示：使用渐变与伪元素制作

4、删除第一个和最后一个导航分隔线

提示：使用伪元素删除第一个和最后一个分隔线
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS制作立体导航</title>

    <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">

    <style>

        body{

          background: #ebebeb;

        }

        .nav{

          width:560px;

          height: 50px;

          font:bold 0/50px Arial;

          text-align:center;

          margin:40px auto 0;

          background: #f65f57;

          /*制作圆*/

          border-radius:10px;

          /*制作导航立体风格*/

          box-shadow:0px 5px #B23F34;

        }

        .nav a{

          display: inline-block;

          -webkit-transition: all 0.2s ease-in;

          -moz-transition: all 0.2s ease-in;

          -o-transition: all 0.2s ease-in;

          -ms-transition: all 0.2s ease-in;

          transition: all 0.2s ease-in;

        }

        .nav a:hover{

          -webkit-transform:rotate(10deg);

          -moz-transform:rotate(10deg);

          -o-transform:rotate(10deg);

          -ms-transform:rotate(10deg);

          transform:rotate(10deg);

        }

        .nav li{

          position:relative;

          display:inline-block;

          padding:0 16px;

          font-size: 13px;

          text-shadow:1px 2px 4px rgba(0,0,0,.5);

          list-style: none outside none;

        }

        /*使用伪元素制作导航列表项分隔线*/

      .nav li:before{

          content:"";

          position:absolute;

          left:0;

          top:18px;

          height:16px;

          width:1px;

          background:-webkit-linear-gradient(right,#E16459,#D05448 );

          background:-moz-linear-gradient( left,#E16459,#D05448 );

          background:-o-linear-gradient( left,#E16459,#D05448 );

          background:linear-gradient(to left,#E16459,#D05448 );

      }

        /*删除第一项和最后一项导航分隔线*/

        .nav>li:first-child:before{

            background:none;

        }

        .nav a,

        .nav a:hover{

          color:#fff;

          text-decoration: none;

        }

    </style>

</head>

<body>

    <ul class="nav">

        <li><a href="">Home</a></li>

        <li><a href="">About Me</a></li>

        <li><a href="">Portfolio</a></li>

        <li><a href="">Blog</a></li>

        <li><a href="">Resources</a></li>

        <li><a href="">Contact Me</a></li>

    </ul>

</body>

</html>
 

CSS3背景 制作导航菜单综合练习题的更多相关文章

  1. 【CSS3】---练习制作导航菜单

    练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...

  2. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  3. 制作导航菜单分隔线的总结:用css3

    经过百度统计中国中使用谷歌浏览器比较多,我很奇怪,我身边的同事很少用谷歌,唯一我用谷歌的原因就是看上它调试能力和模拟手机. 下面是我个人制作的 预览用谷歌浏览器. <!doctype html& ...

  4. ul制作导航菜单

    首先上图,最终效果: HTML代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  5. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  6. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

  7. 用CSS做导航菜单的4个理由

    导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...

  8. 纯CSS3实现动态导航栏目

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

随机推荐

  1. ACM_____不再爱你……

    不再爱你…… 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 现在有一个圆柱形水杯,里面装满了水,在它的底部有一个小洞,通过一些简单的物理知识我们可以知道: 1.由于重力 ...

  2. 使用光盘作为yum源安装ifconfig等网络命令

    # mkdir -p /mnt/cdrom# 如果是光驱:mount -t iso9660 /dev/cdrom /mnt/cdrom/# 如果是ISO:mount -o loop /usr/loca ...

  3. Swift语法3.03(类型Types)

    类型 在Swift中,有两种类型:命名型类型和复合型类型.命名型类型是在定义时可以给定的特定名字的类型.命名型类型包括类,结构体,枚举和协议.例如,自定义的类MyClass的实例拥有类型MyClass ...

  4. Language Integrated Query

    Language Integrated Query (LINQ, pronounced "link") is a Microsoft .NET Framework componen ...

  5. Smallest Common Multiple FreeCodeCamp

    题目:找出能被两个给定参数和它们之间的连续数字整除的最小公倍数.  范围是两个数字构成的数组,两个数字不一定按数字顺序排序. 分析:首先题目的意思求一个连续数列的所有数字的最小公倍数,这连续的数字序列 ...

  6. Python笔记16-------类

    1.类的定义 (1)#括号中要加入父类,如果没有则默认为object,万类之源 class 类名(父类): '类的文档字符串' 类体代码 若类什么都不做,则类只作为命名空间,仅作为一个容器. (2)类 ...

  7. 训练1-V

    输入2个正整数A,B,求A与B的最大公约数. Input 2个数A,B,中间用空格隔开.(1<= A,B <= 10^9) Output 输出A与B的最大公约数. Sample Input ...

  8. 【LibreOJ 6278】 数列分块入门 2 （分块）

    题目原址 给出一个长为n的数列,以及n个操作,操作涉及区间加法,询问区间内小于某个值x的元素个数. code: #include<cstdio> #include<iostream& ...

  9. Django入门--创建项目及应用

    Django是用于后台处理的web应用框架.用户通过浏览器输入网址,向http服务器发起访问网页的请求,http服务器(Apache/Nginx)接收到用户请求后,把请求发送给web应用框架进行处理, ...

  10. Oracle 高水位(HWM: High Water Mark)

    http://blog.itpub.net/31397003/viewspace-2137246/ http://blog.itpub.net/12778571/viewspace-582695/ h ...