CSS一级导航-天蓝色(带阴影)
一款亮丽的导航,能给网站一个画龙点睛的作用。导航在指引用户搜寻内容时,还能改变用户浏览网站的心情,浏览网站也像一场旅行,有创意的导航栏让用户欣赏起来也会更加愉悦,增加对网站的兴趣。
本人不擅长美工制作,不过可以从某些漂亮的网站中提取不错的部分为自己所用,也为他人分享。今天这里为大家准备了一款天蓝色导航一起学习。
我们先看最终效果:
第一步:放置一个div作为导航主体部分
<div class="userPlaceMain"></div>
为其编写样式:
.userPlaceMain
{clear: both;width:1200pxheight: 50px;line-height: 50px;background: #0090CE;padding: 0 20px;color: White;-moz-box-shadow: 5px 5px 10px #B7B7B7;box-shadow: 5px 5px 10px #B7B7B7;
}
注意:此处-moz-box-shadow: 5px 5px 10px #B7B7B7;box-shadow: 5px 5px 10px #B7B7B7;为导航阴影部分
此时导航效果如下:
第二步:放置导航链接内容
这里使用ul li无序列表
<ul><li><a id="userPlaceId_1" href="http://xunwn.com/1010100" class="userPlaceMainUlLiHover">主页</a>|</li><li><a id="userPlaceId_2" href="http://xunwn.com">形象展示</a>|</li><li><a id="userPlaceId_3" href="http://xunwn.com/photo/1010100">产品展示</a></li>
</ul>
现在需要将ul li向左浮动,使用:float:left
.userPlaceMain ul li
{float: left;margin-right: 10px;
}
此时导航效果如下:
离我们最后的效果不远了,还差设置链接文字宽度、背景、间隔
第二步:设置链接文字宽度、背景、间隔
由于a标记为内联标记,若需设置宽度需要使用其他处理方式,这里使用display:inline-block即可设置宽度
.userPlaceMain ul li a
{text-shadow: 0 1px 0 rgba(0,0,0,0.3);color: White;display: inline-block;width: 100px;height: 100%;font-size: 15px;text-align: center;margin-right: 10px;
}
注意:text-shadow: 0 1px 0 rgba(0,0,0,0.3);是为文字增加阴影,此项可不设置
此时导航效果如下:
现在效果好多了吧,还差最后一点处理,就是导航鼠标滑动样式
第三步:设置导航鼠标滑动样式
这里有两种方式,一:直接使用css伪类选择器:hover;二:javascript或者juqery控制链接文字css样式,这里使用第一种,更加简便
.userPlaceMain ul li a:hover{background: #0074A6;color:White; }
最终效果如下:
本人向来追求简单时尚的做法,以后有空还会做更多的东西一起分享,大家一起来学习吧,OK今天告一段落,thank you!
CSS一级导航-天蓝色(带阴影)相关推荐
- HTML+CSS一级导航栏
大一学的都忘记了,有机会重新学习一遍,简单记录下(小傻猫),日常 记录学习 HTML <!DOCTYPE html> <html lang="en"> &l ...
- 微信小程序css卡片样式(带阴影效果)
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
- css阴影3d效果,3D立体带阴影的CSS圆角效果
阴影CSS圆角 *{ margin:0; padding:0; } .box{ width:400px; margin:20px auto; } h1{ font-size:24px; color:# ...
- 用 CSS 画一个带阴影的三角形
1. 思路 怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- CSS 二级导航的消失——在鼠标离开一级导航后、触碰二级导航前消失的问题解决方案
传送门 Problem展示 Problem描述 一种可能的解决方案 结语 Problem展示 这里放上 gif 图,如果你发现自己遇到的是这种情况,请移步 #一种可能的解决方案 Problem描述 场 ...
- 很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
- css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- vue-element-admin改造顶部一级导航,侧边二级导航+权限路由
vue-element-admin改造顶部一级导航,侧边二级导航+权限路由 前言 步骤 src/permission.js src/store/modules/permission.js src/st ...
- 3d div带阴影_带盒阴影的3D阴影
3d div带阴影 View demo 查看演示 Download Source 下载源 When working with 3D transformed elements, you might no ...
最新文章
- [git]一个本地仓库,多个远程仓库
- 【小白学习C++ 教程】一、Vscode和 Visual stdudio配置C++环境
- chromium net android移植
- nmap地址段下的ip_安服福音——花式nmap扫描整理结果(文末重磅消息)
- Java并发编程实战~volatile
- Java过滤器详细文档,简介,实例,应用
- 机器学习-多元梯度下降
- Android Key Hash的生成
- 基于腾讯视频影视作品数据分析
- TMS320F28377D的外设应用笔记(1)——Epwm配置
- c++ 0x3f 0x3f3f 0x3f3f3f 0x3f3f3f3f的具体值
- Android WebView调用摄像头录像拍照处理
- Revealing Module(揭示模块)模式
- STM32学习----ADC(数模转换)
- HCI 解决方案对比:Harvester 和 OpenStack
- 做嵌入式编程,为什么用的是C语言而不是C++呢?
- 完全纯净的Windows 7 x86x64全版本制作
- 字符串库函数(1)Strlen,strcpy,strcat,strcmp
- 【论文泛读85】基于上下文的句子相似度
- uni-app 二维码生成(链接转二维码)
热门文章
- JAVA SE面试题(全)
- 软件架构设计分层模型和构图思考
- 京东数科Java一面面经
- 计算机usb接口是一种通用,USB接口大科普,你用的是哪一种?
- 如何将Word文档每页转换为图片保存?
- 识别电路板上贴片电阻型号0805 0402 0603 1206封装信息
- 在Cadence的PCB工程中直接修改替换元件封装
- 消息称,用户已收到华为 HarmonyOS 2.0 开发者公测版推送
- Python数据分析案例06——现代人的婚育意愿调查分析(基于逻辑回归模型和问卷数据)
- AG7110/AG7111与AG7210方案设计选型方法|AG7110与AG7210设计要求和设计方法|HDMI视频切换器方法全解