css3制作导航栏
<!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:5px;
/*制作导航立体风格*/
box-shadow:4px 4px #999;
}
.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:after{
position:absolute;
right:0;
content:'';
width:1px;
height:100%;
background-image:linear-gradient(to bottom, #f65f57,#f65f57,#f65f57,#666,#f65f57, #f65f57,#f65f57);
display:inline-block;
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:after{
display: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制作导航栏的更多相关文章
- C3制作导航栏分割线及立体风格
//首先写一个导航栏样式 .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; ...
- 第8天:CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏
初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- css制作导航栏的上下三角
1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...
- 用ul 来制作导航栏的几个要点
1 ul 1)list-style:none; 3)设置宽度 2)清除浮动的影响,使高度自适应 2 li 1)向左浮动 2)设置margin和padding都为0 3 a 1) dsiplay :bl ...
- css3隐藏导航栏总结
display:none隐藏display:block显示 1.通过hover显示时隐藏元素必须与触发元素存在着关系(父子,兄弟)才能生效,所以推荐用JS完成比较好. 2.隐藏部分的属性直接写在hov ...
- CSS制作导航栏
最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...
随机推荐
- CodeForces 632D Longest Subsequence
暴力. 虽然$a[i]$最大有${10^9}$,但是$m$最大只有${10^6}$,因此可以考虑暴力. 记$cnt[i]$表示数字$i$有$cnt[i]$个,记$p[i]$表示以$i$为倍数的情况下, ...
- linux添加swap
一. 起因 发现云服务器重装后没有swap分区 于是我们分出一些物理内存做swap分区.. 二. 经过 (1)创建块文件 sudo dd if=/dev/zero of=/tmp/big_swap b ...
- C++ unordered_map 在key为string类型和char*类型时测试时间性能差异
测试系统liunx centos6.5 代码如下 #include <string.h> #include <sstream> #include <list> #i ...
- Linux进程通信——管道
管道(pipe)本质上是一种文件,管道通信本质上是通过读写文件通信,但是管道解决了文件的两个问题:限制管道大小,解决read()调用文件结束问题. 管道一个环形的缓冲区,通过两个进程以生产者/消费者的 ...
- [转]Python跳过第一行读取文件内容
from itertools import islice file_name='XXXX' input_file = open(file_name) for line in islice(input_ ...
- C# IDisposable的理解
C#里可以嵌入非托管代码,这就涉及到了这些代码资源的释放.以前总是看到别人的代码里那么写,也没有好好想想为什么,今天看了书,总结一下. 资源释放分为两种: 托管的 非托管的 两者的释放方式不一致: 没 ...
- Servlet源码初探
年底,公司的事情告一段落,就来捣鼓一下这个Servlet源码,为下一步的spingmvc源码初探做准备 1.Servlet接口 public interface Servlet { void init ...
- Hibernate5-课程笔记4
单表查询: Hibernate是DAO层技术,对数据的使用,查询是最为重要的.Hibernate的查询技术非常强大,支持原始SQL语句查询,支持QBC查询及Hibernate特有的HQL查询. H ...
- JS---控制键盘事件
键盘事件汇总: 1.onkeydown 键盘按下时触发; 2.onkeyup 键盘按下后抬起触发的事件 3.onkeypress 这个事件在用户按下并放开任何字母数字键时发生(不常用) keyCo ...
- bone collector hdu 01背包问题
Problem Description Many years ago , in Teddy’s hometown there was a man who was called “Bone Collec ...