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. 用户 'NT Service\MSSQLServerOLAPService' 登录失败

    初学SSAS,部署微软官方示例项目AdventureWorksDW2012Multidimensional时出现错误:用户 'NT Service\MSSQLServerOLAPService' 登录 ...

  2. IIS网站调用FFMPEG执行截图命令失败的原因(暂时记录)

    之前有个功能是用户上传视频后,网站对其进行截图处理.功能采用FFMPEG操作,在本机新建一个小程序进行调试时是没有问题的. 可功能原封不动挪到项目里,截图竟然失败了,于是开始排查. 期初以为是参数设置 ...

  3. C#操作Oracle数据库中文乱码问题解决

    最近公司有一个对外项目,采用的是oracle数据库,以前做的项目基本都是SQLserver,有和oracle对接的也就一些简单的增删查改. 还巧合的遇到乱码问题,网上各种查找,筛选,总算是把问题解决了 ...

  4. 00--C++牛人的博客

    那些C++牛人的博客 这篇文章来自转载,转载的网址找不到了,   如果有人知道,可以在下面评论,   非常感谢,更感谢原作者. 现整理收集C++世界里那些“牛人”的个人博客.凡三类:一是令人高山仰止的 ...

  5. 创建一个dynamics CRM workflow (三) - Creating Configuration Entity for Custom Workflow

    上个帖子中, 我们创建了个发email的workflow. 但是我们邮件当中的tax 值是 hard code, 这在开发当中是不容许的. 那今天我们来把这个build in workflow用 in ...

  6. mac安装win10后触摸板没有右键功能键的添加技巧

    一些mac用户也会在自己的笔记本电脑上安装windows10系统. 但最近有部分用户发现,安装上win10正式版后,发现无论点击触摸板哪个位置,都只有左键,根本无法右键的问题, 针对此问题,现笔者分享 ...

  7. How many integers can you find HDU - 1796_容斥计数

    Code: #include<cstdio> using namespace std; typedef long long ll; const int R=13; ll a[R]; ll ...

  8. redhat的systemd版本list

    acess https://access.redhat.com/errata/#/ https://github.com/lnykryn/systemd-rhel redhat 知识库 redhat ...

  9. 不能使用一般 Request 集合

    request.querystring("id"),不能request("id")

  10. 用CSS来控制字符长度和显示长度

    在网页排版设计中,会遇到文本超过固定长度导致整体的网页变形的情况.程序员往往需要截取固定的长度来实现某些固定长度的控制.介绍一种直接采 用CSS的代码控制来实现文本截取的方法,与程序员的直接字符截取的 ...