网易云音乐首页导航样式的实现

实现效果图:

背景图片:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;list-style-type:none;color: azure;text-decoration: none;}

        ul,ul li,ul li a {
            background: url("img/sprite.gif") no-repeat scroll left top;
        }
        ul {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color:#CC0000;
            background-repeat: repeat-x;
            background-position: 0 0;
        }
        ul li {
            position: relative;
            float: left;
            padding:0  20px;
            background-position:0 -40px ;
        }
    </style>
</head>
<body>

    <ul>
        <li><a href="#" >首页</a></li>
        <li><a href="#">素材</a></li>
        <li><a href="#" >图片</a> </li>
        <li> <a href="#" >图标</a> </li>
    </ul>
</body>
</html>

注意:background:url("img/sprite.gif") no-repeat scroll left top中的left后面的值不可缺少,可以为top、0、-9999px、999px等;

background-repeat:repeat-x;放在ul或者li均可;

如果想让背景边框线变短,在ul的样式中加入padding-top:10px替代line-height:40px,并把ul,ul li,ul li a 此处的ul去掉。

时间: 2024-10-06 23:30:03

网易云音乐首页导航样式的实现的相关文章

实现 60fps 的网易云音乐首页

网易云音乐是一款很优秀的音乐软件,我也是它的忠实用户.最近在研究如何更好的开发TableView,接着我写了一个Model驱动的小框架 - MDTable.为了去验证框架的可用性,我选择了网易云音乐的首页来作为Demo,语言是Swift 3. 本文的内容包括: 实现网易云音乐首页的思路如何建立一个轻量级的UITableViewController(不到100行)性能瓶颈原因以分析及如何优化到接近60fps Note:本文并没有用Reveal去分析网易云音乐iOS客户端的原始UI布局,所以实现方式

iOS网易云音乐首页源码、动画引擎源码等

iOS精选源码 自己维护的框架, 超级多功能 图片选择SDK:支持多选,相册选择,预览,网络图预览 一款可以简单实现长按拖拽重排的 UICellCollectionView Cell框... 动画引擎 FXAnimationEngine MJCIOS/MJCSegmentInterface(分段界面框架) TYCyclePagerView iOS上的一个无限循环轮播图组件 首页广告视图 SGAdvertScrollView SliderView-自定义分段标签滚动视图,集成使用简单 轻巧便捷的t

使用flex进行网易云音乐界面构建和布局解析

1.为什么要用flex进行webapp布局 第一,float布局 需要清除浮动,很麻烦. 第二,绝对定位需要考虑位置和空间占位 第三,元素垂直水平居中问题. 2.网易云音乐首页分析3.啥也别说,直接上代码 先来一个html, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

网易云音乐

模拟制作网易云音乐(AudioContext) 记得好早前在慕课网上看到一款可视化音乐播放器,当前是觉得很是神奇,还能这么玩.由于当时刚刚转行不久,好多东西看得稀里糊涂不明白,于是趁着现在有时间又重新梳理了一遍,然后参照官网的API模拟做了一款网易播放器.没有什么创新的点,只是想到了就想做一下而已. 效果可以看这里:http://music.poemghost.com/,如果看不了,说明博主的服务器已经不在工作啦.(建议使用电脑浏览器打开,同时切换到手机模式来打开,因为在手机上测试时有问题,而且

android仿网易云音乐引导页、仿书旗小说Flutter版、ViewPager切换、爆炸菜单、风扇叶片效果等源码

Android精选源码 复现网易云音乐引导页效果 高仿书旗小说 Flutter版,支持iOS.Android Android Srt和Ass字幕解析器 Material Design ViewPager切换变色美观效果 卡证识别 相机样式 Android炫酷爆炸效果的菜单源码 Android简洁优雅可点击的toast控件,仿手机百度 Android实现水平列表,其中的项目像风扇叶片一样移动效果 让你的RecyclerView秀出传送带效果,支持横向和纵向两种选... 一种流式布局的效果,很像我们

Python爬一爬网易云音乐

结果 对过程没有兴趣的童鞋直接看这里啦. 评论数大于五万的歌曲排行榜 首先恭喜一下我最喜欢的歌手(之一)周杰伦的<晴天>成为网易云音乐第一首评论数过百万的歌曲! 通过结果发现目前评论数过十万的歌曲正好十首,通过这前十首发现: 薛之谦现在真的很火啦~ 几乎都是男歌手啊,男歌手貌似更受欢迎?(别打我),男歌手中周杰伦.薛之谦.许嵩(这三位我都比较喜欢)几乎占了榜单半壁江山... <Fade>电音强势来袭,很带感哈(搭配炫迈写代码完全停不下来..) 根据结果做了网易云音乐歌单 : 评论数

我喜欢的网易云音乐

使用了很多音乐APP,无论是付费,还是免费APP,网易云音乐是目前为止最好的云音乐APP,没有之一. 云音乐UI 配色简介大方 布局合理舒适 功能简洁实用 我喜欢的理由 在听歌时候没有广告 纯粹的播放音乐,没有乱起八糟的广告,唯一的广告在首页的slash有推广,并且明确表示出来是推广.如果我有兴趣我自然会点击.如果没有兴趣,强制让我点击,不仅对广告带来的是负面的收益,对音乐app也是很差的体验.其它免费的音乐在你听音乐的时候会强行插入广告,立马听歌的兴趣就没了. 所有歌曲音质都是高清无损 很多音

网易云音乐的歌单推荐算法

[转载]原文地址:https://www.zhihu.com/question/26743347 原文: 不是广告党,但我却成为网易云音乐的的重度患者,不管是黑红的用户界面,还是高质量音乐质量都用起来很舒服.我喜欢听歌,几乎每周不低于15小时,但其实听得不是特别多,并没有经常刻意地去搜歌名,所以曲目数量我并不是很在乎.但是比起其它,网音给我推荐的歌单几乎次次惊艳,而且大多都没听过,或者好久以前听过早就忘记了名字,或者之前不知道在哪听过 只是知道其中一部分旋律,根本不知道名字,等等,听起来整个人大

仿网易云音乐部分UI实现

引言 有一段时间闲着没事做,突发奇想,于是就去防了部分网易云UI的界面,最开始是想仿成这个样子: 于是反编译了网易云的源文件,果不其然混淆的很彻底,表示并不能看懂,诺: 里面的代码大部分都是smali语法,也就是这样的: .class public La/auu/a; .super Ljava/lang/Object; .source "a.java" # static fields .field public static final CRLF:I = 0x4 .field priv