一、效果展示

二、注意

（1）这个蓝色背景并不是设置了背景颜色，这是背景贴图，并且是高度100px，宽度1px的图片横向重复粘贴

（2）这里面三个文字的祖先元素是li，为了能够横向排版，进行了浮动，为防止高度塌陷，外联了css文件，这里需要注意，不然代码会出问题

-至于高度塌陷，请参考这篇文章：

https://blog.csdn.net/comegoing_xin_lv/article/details/126086973?spm=1001.2014.3001.5501

（3）至于动漫导航条的图片，自己截图

-这里是链接：

http://qiqidm8.com/

三、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>背景导航条</title><link rel="stylesheet" href="../src/clearfix.css" /><style>/* 设置背景元素 */.background {/* 贴入1像素图片 */background-image: url("../src/img_exercise/qiqidongman.png");/* 设置元素大小 */height: 100px;width: 300px;/* x轴重复贴图 */background-repeat: repeat-x;/* 背景元素居中 */margin: 0px auto;}/* 设置大列表 */ul.clearfix {/* 取消padding */padding: 0px;/* ul居中 */margin: 0px auto;/* 强制大小 */width: 240px;height: 100px;}/* 去除小圆点 */li {list-style: none;}/* 列表元素浮动，横向排版 */.list {float: left;}/* 设置列表中链接 */.list a {/* 文字垂直居中 */line-height: 100px;/* 文字水平居中 */text-align: center;/* 设置颜色 */color: white;/* 去除下划线 */text-decoration: none;/* 设置大小，先更改属性 */display: inline-block;width: 80px;}.list a:hover {/* 鼠标移入后变色 */background-color: white;color: #08d;}</style></head><body><div class="background"><ul class="clearfix"><li class="list"><a href="javasrcipt:;">首页</a></li><li class="list"><a href="javasrcipt:;">电影</a></li><li class="list"><a href="javasrcipt:;">电视剧</a></li></ul></div></body>
</html>

前端练习--奇奇动漫导航条（通过背景图设置）相关推荐

iOS源码学习-导航条加阴影，自定义导航条的背景图片
介绍: 给导航条的下方加上阴影,自定义导航条的背景图片. 适用环境:Xcode 4.3, iOS 5.0. 下载地址:github.com 更多源码,请访问开源苹果运行截图:
移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
前端——菜鸟网站横向CSS导航条菜单：带小三角形
之前看到很多网页的导航条都会有小三角形,一直好奇是如何实现的,正好前些天做的菜鸟教程首页的导航栏也有小三角形,就研究了一下它的实现方法.菜鸟教程首页导航如下图: 其实实现这个功能也挺简单.首先写一个大 ...
【Web前端】网页背景图设置技巧
问题一:如何设置背景图铺满整个屏幕 css代码: body {background-image: url("../img/bg.jpg");background-position: ...
前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点--用div来画"三角". 之前本帅博主写过一篇<前端--菜鸟网站横向CSS导航条菜单:带小三角形>,里面也有介绍如何制作小三角形,不过它是用的现 ...
bootstrap导航条文字颜色_XEditor基础组件：导航条
导航条是网页中最常见的组件之一,它通常位于网页的顶部.当我们想浏览网站的其他部分时,我们常常会回到网页顶部,然后点击导航条中的某个链接,跳转到其他页面. XEditor提供了各种各样的导航条,在使用导 ...
jQuery 导航条置顶滚动渐变背景透明度
思路1 顶部导航条的背景透明度随着滚动条滚动的像素增加或者减少思路2 只要滚动条的像素大于0 就给背景透明度1 然后再给个transitionshijian也有过度效果问题1 顶部导航条要使用 ...
京东左侧导航条练习笔记
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

前端练习--奇奇动漫导航条（通过背景图设置）

一、效果展示

二、注意

三、代码

前端练习--奇奇动漫导航条（通过背景图设置）相关推荐

最新文章

热门文章