新浪某个tab 页模仿
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0;
padding: 0;
}
#div0{
width:520px;
margin-top: 50px;
margin-left: 50px;
}
.div1{
height:34px;
line-height:34px;
border: 1px solid #dbdee1;
background: url(http://i2.sinaimg.cn/dy/deco/2013/0321/bg1px.png) 0 -33px repeat-x;
border-left:0px;
}
.div1_1>span{
float:left;
height: 33px;
font-size:16px;
font-family:"Microsoft YaHei","微软雅黑";
padding:0 13px;
border-left:1px solid #dbdee1;
border-right:1px solid #dbdee1;
}
.spselect{
line-height:28px;
border-top:3px solid #ff8400;
background-color:#fff;
margin-bottom:-1px;
padding:0 12px;
}
.divselect{
display: block;
}
.divnoselect{
display: none;
}
.time{
float:right;
padding-right:10px;
}
.div2 div{
height:100px;
}
.div2 div li{
padding-left: 10px;
list-style:none;
background: url(http://i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px;
overflow: hidden;
line-height: 26px;
}
a:hover{
color: #ff8400;
} .div2 a:hover {
text-decoration: underline;
} </style>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
var divs = $("#div2>div");
$("#div1_1>span").mouseover(function () { //鼠标事件
//$(this).addClass("spselect");//添加类在当前对象
var index = $(this).index(); //$(this).index()代表当前对象索引
//eq()函数用于获取当前jQuery对象所匹配的元素中指定索引的元素，
$(this).addClass("spselect").siblings().removeClass();//添加类在当前对象 移除同级元素类
divs.hide().eq($('#div1_1>span').index(this)).show();
});
$("#div1_1>span").mouseout(function () {
$(this).removeClass("spselect");
}); }); </script>
</head>
<body>
<!--大div内容和标题区-->
<div id="div0">
<div class="div1">
<div class="div1_1" id="div1_1">
<span class="sp spselect"><a>新闻</a></span>
<span class="sp"><a class="a2">看河南</a></span>
<span class="sp"><a>看世界</a></span>
</div>
<span class="time">2017.10.16</span>
</div>
<div style="height:20px"></div>
<div class="div2" id="div2">
<div class="divselect">
<ul>
<li><a>xxx主持中共中央党外人士座谈会</a></li>
<li><a>“我们的自信”文化篇——中华之魂</a></li>
<li><a>十八次党代会十八座里程碑 解决了啥难题</a></li>
</ul>
</div>
<div class="divnoselect">
<ul>
<li><a>河南本周最低气温降至7℃ 周三前多阴雨天气</a></li>
<li><a>“五星级”菜市场亮相郑州 投资800万装修豪华(组图)</a></li>
<li><a>河南构建全产业链现代物流强省 三年转型发展规划出台</a></li>
</ul>
</div>
<div class="divnoselect">内容3</div>
</div> </div>
</body>
</html>
新浪某个tab 页模仿的更多相关文章
- Python爬虫：新浪新闻详情页的数据抓取（函数版）
上一篇文章<Python爬虫:抓取新浪新闻数据>详细解说了如何抓取新浪新闻详情页的相关数据,但代码的构建不利于后续扩展,每次抓取新的详情页时都需要重新写一遍,因此,我们需要将其整理成函数, ...
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...
- 仿新浪首页、主题、详情页，纯html静态页面
仿新浪首页.主题.详情页.纯html静态页面,下载地址: http://download.csdn.net/detail/sweetsuzyhyf/8085535
- CefSharp禁止弹出新窗体，在同一窗口打开链接，或者在新Tab页打开链接，并且支持带type="POST" target="_blank"的链接
说明:在同一窗口打开链接,只要稍加改造就可以实现,这里实现的是在新Tab页打开链接,并且支持带type="POST" target="_blank"的链接 gi ...
- 使“Cmder Here”菜单在Tab页开新窗口
Cmder是一个非常好用的的控制台命令行,我们在实际使用的时候,经常通过如下指令将其注册到右键菜单: Cmder.exe /REGISTER ALL 这样就可以在任意文件夹下快速打开Cmder,并且能 ...
- 用java实现新浪爬虫,代码完整剖析(仅针对当前SinaSignOn有效)
先来看我们的web.xml文件,如下 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application ...
- 使用JAVA实现模拟登陆并发送新浪微博（非调用新浪API）
没有调用新浪的API,在程序中加入自己的帐号和密码就能发送微博,代码完全在后台运行,不用打开浏览器. 用了HtmlUnit这个库来模拟登录还有发送微博. 先上效果图: 这个是刚登陆上获取第一页的信息. ...
- 豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...
- python网络爬虫 新浪博客篇
上次写了一个爬世纪佳缘的爬虫之后,今天再接再厉又写了一个新浪博客的爬虫.写完之后,我想了一会儿,要不要在博客园里面写个帖子记录一下,因为我觉得这份代码的含金量确实太低,有点炒冷饭的嫌疑,就是把上次的代 ...
随机推荐
- noip模拟赛 财富
题目描述LYK有n个小伙伴.每个小伙伴有一个身高hi.这个游戏是这样的,LYK生活的环境是以身高为美的环境,因此在这里的每个人都羡慕比自己身高高的人,而每个人都有一个属性ai表示它对身高的羡慕值.这n ...
- 修改tomcat端口号的方法
8080是Tomcat服务器的默认的端口号.我们可以通过修改Tomcat服务器的conf目录下的主配置文件server.xml来更改.用记事本打开server.xml文件,找到如下部分: 以下为引用的 ...
- Linux进程线程学习笔记：运行新程序
Linux进程线程学习笔记:运行新程序 周银辉 在上一篇中我们说到,当启动一个新进程以后,新进程会复制父进程的大部份上下 ...
- 网络基础篇(一)--TCP/IP协议族
TCP/IP协议族是一个分层,多协议通信体系. 1 TCP/IP协议族体系结构 TCP/IP协议族自底而上分为四层: 数据链路层, 网络层, 传输层和应用层. 1.1 数据链路层 实现网卡接口的网络驱 ...
- GDUT Krito的讨伐(bfs&&优先队列)
题意 Description Krito最终干掉了99层的boss,来到了第100层. 第100层能够表示成一颗树.这棵树有n个节点(编号从0到n-1),树上每个节点可能有非常多仅仅怪物. Krito ...
- 在NSUserDefaults中保存自己定义的对象
在iOS开发中.须要用到一些回调值(从A到B,从B返回时把B中的值带回A中).事实上方法也非常多(delegate,block.nsuserdefaults等).我想用NSUserDefaults回调 ...
- Oracle经典教程学习笔记
Oracle学习 1.为表创建约束:alter table 表名 add constraint 约束名 约束内容 演示样例:alter bable infos add constraint UN_ST ...
- hdu 4941 Magical Forest （map容器）
Magical Forest Time Limit: 24000/12000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Other ...
- U32670 小凯的数字 数学
这是洛谷一个比赛中的一道题,和去年NOIP D1T1挺像.我看了一眼之后想“这不是小学奥数吗?求一个数字和就好了呀”...然后,60,剩下T了,gg. 只好看正解,但是一脸懵逼???然后看了证明,c* ...
- 杂项-Company：ShineYoo
ylbtech-杂项-Company:ShineYoo 1. 网站返回顶部 1. 2. 3. 4. 2. 网站测试返回顶部 1. 2. 3.家服宝返回顶部 0.首页 http://www.jiafb. ...