CSS3背景 制作导航菜单综合练习题
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背景 制作导航菜单综合练习题的更多相关文章
- 【CSS3】---练习制作导航菜单
练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- 制作导航菜单分隔线的总结:用css3
经过百度统计中国中使用谷歌浏览器比较多,我很奇怪,我身边的同事很少用谷歌,唯一我用谷歌的原因就是看上它调试能力和模拟手机. 下面是我个人制作的 预览用谷歌浏览器. <!doctype html& ...
- ul制作导航菜单
首先上图,最终效果: HTML代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" ...
- 我收集到的最好的jQuery和CSS3导航菜单
jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...
- WEB入门.九 导航菜单
学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...
- 用CSS做导航菜单的4个理由
导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...
- 纯CSS3实现动态导航栏目
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
随机推荐
- java_poi
import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import org.apache. ...
- 应用二:Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
- 文件类型总结 MIME
来源网上https://www.cnblogs.com/zhongcj/archive/2008/11/03/1325293.html {".3gp", "video/3 ...
- 莫烦大大TensorFlow学习笔记(8)----优化器
一.TensorFlow中的优化器 tf.train.GradientDescentOptimizer:梯度下降算法 tf.train.AdadeltaOptimizer tf.train.Adagr ...
- JavaScript进阶【四】JavaScript中的this,apply,call的深入剖析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Project Euler 14 Longest Collatz sequence
题意:对于任意一个数 N ,寻找在 100,0000 之内按照规则( N 为奇数 N = N * 3 + 1 ,N 为偶数 N = N / 2 ,直到 N = 1 时的步数 )步数的最大值 思路:记忆 ...
- [BZOJ4916]神犇(Monster_Qi)和蒟蒻(SWHsz)
很久很久以前,有一只神犇叫Monster_Qi; 很久很久之后,有一只蒟蒻叫SWHsz; 1<=N<=1E9,A.B模1E9+7; 求这个. 求μ的话直接输出1就行了因为除了1的平方外都有 ...
- PHP开发过程中数组汇总 [ 持续更新系列 ]
开发过程中经常会使用到数组函数,故特地总结出来,自己熟悉,同时供大家参考!(实例部分会抽空尽快完成) 一.目录 array_merge(); 合并数组 array_keys(); array_filt ...
- C++学习笔记(转)
http://www.cnblogs.com/maowang1991/p/3290321.html 以下内容为自己一年多的C++学习心得,纯原创,转载请注明源地址. 一年多的C++学习过程中,自己阅读 ...
- MVC笔记(一)
1 MVC介绍 MVC是一个编程思想. 是一种设计模式 思想: 将一个功能分解成3个部分, M: Model (模型) 处理数据相关的逻辑 V: View (视图) 显示页面 C: Controlle ...