类似网易163主页的选项卡效果代码

最新推荐文章于 2020-02-29 20:38:00 发布
最新推荐文章于 2020-02-29 20:38:00 发布
阅读量2.6k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Java体系 文章标签： 网易 活动 div 语言 class tags
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/softwave/article/details/2100022
本文提供了一段实现类似网易163主页选项卡效果的HTML和CSS代码示例，通过简单的样式设置实现了标签切换的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" />

类似网易163主页的选项卡效果代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="http://cimg2.163.com/cnews/css07/style.css" rel="stylesheet" type="text/css" />
<title>标签切换</title>
</head>
<body>
<!-- 把下面代码拷到页面中需要调用的地方 -->
<style type="text/css">
.tags {width:720px; margin:0 auto;background:url(http://cimg2.163.com/cnews/0709/17da/ulBg.gif) repeat-x 0 bottom;}
.tags ul {clear:both; overflow:hidden;padding-top:9px;}
.tags li {float:left; margin-right:3px; height:22px; line-height:22px; background:url(http://cimg2.163.com/cnews/0709/17da/tagrBg.gif) no-repeat left -58px; padding-left:10px; cursor:pointer;}
.tags li h5 {background:url(http://cimg2.163.com/cnews/0709/17da/tagrBg.gif) no-repeat right -80px; padding-right:10px;}
.tags li.on {background-position:left top; height:29px; line-height:29px; margin-top:-6px; padding-left:14px;}
.tags li.on h5 {background-position:right -29px; font-weight:bold; color:#EC3D00; padding-right:13px;}
.tags li.on h5 a,.tags li.on h5 a:visited {color:#EC3D00;}
.tags li.hhh {margin-bottom:-7px;}
.cont {width:718px; margin:0 auto; border:1px solid #CCCCCC; border-top:none; display:none;}
.cont h6 {background:url(http://cimg2.163.com/cnews/0709/17da/li6.gif) no-repeat left 17px;; padding:18px 0 6px 24px; text-align:left; margin:0 18px; font-family:'黑体'; font-size:18px; border-bottom:1px dashed #cccccc;}
.cont p {text-align:left; font-size:14px; line-height:23px; margin:0; padding:9px 24px; text-indent:2em;}
</style>
<div style="text-align:center; width:720px; margin:9px auto;"><img src="http://cimg2.163.com/cnews/0709/17da/wordTitle.gif" alt="年度媒体流行语解析" /></div>
<div class="tags">
    <ul id="tags">
        <li><h5><a href="#">廉租住房制度</a></h5></li>
        <li><h5><a href="#">政府信息公开</a></h5></li>
        <li><h5><a href="#">反渎职侵权</a></h5></li>
        <li><h5><a href="#">和谐社会</a></h5></li>
        <li><h5><a href="#">铁路提速</a></h5></li>
        <li><h5><a href="#">八荣八耻</a></h5></li>
        <li><h5><a href="#">神州六号</a></h5></li>
        <li><h5><a href="#">物权法</a></h5></li>
        <li><h5><a href="#">房价</a></h5></li>
        <li><h5><a href="#">非典</a></h5></li>
    </ul>
</div>
<div class="cont" id="cont1">
    <h6>廉租房制度</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont2">
    <h6>政府信息公开</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont3">
    <h6>反渎职侵权</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont4">
    <h6>和谐社会</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont5">
    <h6>铁路提速</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont6">
    <h6>八荣八耻</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont7">
    <h6>神州六号</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont8">
    <h6>物权法</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont9">
    <h6>房价</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<div class="cont" id="cont10">
    <h6>非典</h6>
<p>北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。</p></div>
<script type="text/javascript">
var tags=document.getElementById("tags").getElementsByTagName("li");
function change(num){
    for (var i=1; i<=tags.length;i++){
        var lastIndex=tags.length-1;
        tags[lastIndex].style.margin="0";
        var j=i-1;
        if(i==num) {
            tags[j].className="on";
            document.getElementById("cont"+i).style.display="block";
            if(i==tags.length)tags[j].style.marginTop="-6px";
        }
        else {
            tags[j].className="";
            document.getElementById("cont"+i).style.display="none";
        }
    }
}
function getEvent(){
        var i=1;var j;
        for (i;i<=tags.length;i++){
            j=i-1;
            eval("tags[j].onmouseover=function (){change("+i+");nn="+i+"}")
        }
}
getEvent();
change(1);
var nn;
nn=2;
setTimeout('change_img()',10);
function change_img(){
    if(nn>=tags.length) nn=1;
    setTimeout('change('+nn+')',2000);
    nn++;
    tt=setTimeout('change_img()',4000);
}
</script>
<!-- 把上面代码拷到页面中需要调用的地方 -->
</body>
</html>
 
摘编自【http://www.blueidea.com/】

<script type="text/javascript" src="http://www.google.com/reader/ui/publis<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=grc_p(%7bc%3a%22green%22%2ct%3a%22%5cu8fd9%5cu4e9b%5cu6587%5cu7ae0%5cu4e5f%5cu503c%5cu5f97%5cu4e00%5cu770b%22%2cs%3a%22false%22%7d)%3bnew%20grc"></script>se%22%7D)%3Bnew%20GRC">

Docker容器入门及网易最佳实践
weixin_43777806的博客
11-07 1525
文章目录第一节 Docker容器入门1.1.1 基础概念1. Docker是什么2. Docker和传统虚拟机的对比3. 为什么要使用Docker4. Docker架构5. Docker包括三个基本概念：1）Docker镜像2）Docker镜像分层存储3）Docker容器4）Docker仓库Docker Registry公开仓库Docker Registry 私有仓库1.1.2 安装及加速1. D...
第19章 企业邮件入门简介
lihuhelihu的博客
11-16 1296
Postfix是Wietse Venema在IBM的GPL协议之下开发的MTA（邮件传输代理）软件。Postfix是Wietse Venema想要为使用最广泛的sendmail提供替代品的一个尝试。在Internet世界中，大部分的电子邮件都是通过sendmail来投递的，大约有100万用户使用sendmail，每天投递上亿封邮件。这是一个让人吃惊的数字，Postfix试图更快、更容易管理、更安全，同时还与sendmail保持足够的兼容性。
仿网易漂亮的TAB选项卡(标签
09-26
仿网易漂亮的TAB选项卡,简单通用.仿网易漂亮的TAB选项卡,简单通用.
网易Tab选项卡源码及下载
weixin_30610755的博客
11-24 118
仿网易娱乐新闻Tab选项卡的html源码 Code <divclass="leftTitle"> <h2></h2> <h3id="ywhgnav1"class="on"><ahref="javascript:showDiv('ywhg',1,3);"target="_self">最近新贴</a>&...
css3动画属性 3D旋转图片 立方体特效 选择器 H5语义化标签
xiaochen520670的博客
02-29 461
1CSS3动画属性:animation animation-name 关键帧的名称 animation-duration 动画的持续的时间 animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线） animation-timing-function: 动画的类型： ...
仿网易选项卡制作
Wendy
10-03 1413
如果你的页面只有一个tab（选项卡）切换的地方，需要调用js效果，如果单独为了它，还要为页面加载一个jQuery插件，想必是极痛苦的。所有很多时候，jQuery特效也不是万能的，偶尔来个原生的js效果也是必须的。今天闲着无聊，用js和jquery分别写了一个选项卡的效果，但是其中用到jquery只是为了更好的获取标签以及修改样式。 先来浏览一下效果图吧~~ 一、
Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果
weixin_30553065的博客
04-26 81
这里我们用TabLayout来实现这一效果。TabLayout是Android Design Support Library库中的控件。Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加...
SpringBoot中发送QQ邮件功能的实现代码
08-28
SpringBoot中发送QQ邮件功能的实现代码 本文主要介绍了 SpringBoot 中发送 QQ 邮件功能的实现代码，通过详细的代码示例和概念讲解，帮助读者理解邮件发送过程中的各种协议和技术细节。 标题解释 SpringBoot 中发送...
python爬虫网易云音乐URL
03-24
比如，打开浏览器的开发者工具，在Network选项卡中查看XHR请求，找到返回歌曲数据的API接口，然后模拟这个请求。例如，歌单的接口可能是https://music.163.com/api/playlist/detail?id=歌单ID，返回JSON数据，里面...
掌握10种JS图片展示技术，提升你的网页视觉效果
- 163选项卡效果 此文件的名称暗示了它的内容，即展示一种类似网易（163）风格的图片选项卡效果。它可能包括了选项卡的HTML结构、CSS样式以及JavaScript脚本来实现选项卡的动态切换功能。 - js图片切换 这个文件...
安卓选项卡动态滑动
小白的究极进化
07-05 909
本文会实现一个类似网易新闻（不说网易新闻大家可能不知道大概是什么样子）点击超多选项卡，选项卡动态滑动的效果。  首先来看看布局，就是用HorizontalScrollView控件来实现滑动的效果，里面包含了一个布局。 RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tool
仿网易选项卡的实现
HanDong
03-05 770
android 选项卡
仿网易漂亮的TAB选项卡(标签)
weixin_34071713的博客
09-30 686
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;HEAD&gt; &l
【爬虫】爬取网易首页源代码
无名小站
09-12 872
import urllib.request web_urls="http://www.163.com" response=urllib.request.urlopen(web_urls) print(response.read().decode("gbk")) #查看网页编码。判断如何解码
网易新闻应用源码完整版客户端+服务端源码
chenli03的专栏
05-16 2431
这个源码是从安卓教程网android分享过来的，看到这个项目比较不错，就转了。网易新闻应用源码完整版客户端+服务端源码，仿网易新闻，android端+服务器端 1，为了加快访问速度，服务器端数据是写死了的，数据太多的就复制粘贴了，不是数据库查询的 2，新闻图片下载代码注释掉了（网速给力的可以放开注释），显示的是默认图片  3.运行时记得改android端Constantvalues类里面的I
基于多串变压器LLC控制技术的高功率LED照明驱动解决方案设计：提高效率与降低成本
07-08
内容概要：文章介绍了采用多串变压器 LLC控制技术的新型离线式 LED照明驱动解决方案，该方案基于TI的UCC25710多串变压器 LLC谐振控制器，实现了高效率、低成本、高可靠性和良好EMI性能的两级拓扑结构。与传统三级拓扑结构相比，新方案省去了多个非隔离DC/DC变换环节，减少了元件数量，提升了系统效率至92%以上。文中详细描述了多串变压器的设计原理、LLC谐振控制器的工作机制，并展示了100W四串LED负载的参考设计PMP4302A的实际性能，包括输出电流匹配、效率、调光波形及EMI测试结果。 适合人群：从事LED照明系统设计的研发工程师和技术人员，尤其是对高功率LED驱动器设计感兴趣的读者。 使用场景及目标：①适用于户外和商业领域的高功率LED照明系统；②用于需要高效能、低成本、可靠性和良好EMI性能的LED照明应用；③支持PWM和模拟调光功能，适用于需要调光接口的LED照明系统。 其他说明：本文不仅提供了详细的理论分析和技术细节，还包括了具体的应用实例和测试数据，为实际工程应用提供了有力支持。建议读者结合实际需求，深入研究多串变压器LLC谐振控制器的设计原理和实现方法，并关注其在不同应用场景下的表现。
【毕业论文】网络个人信息安全问题研究.doc
最新发布
07-09
【毕业论文】网络个人信息安全问题研究.doc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值