好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云资源网 技术教程 正文

[81资源网]115资源网选项卡布局html+css+js代码

爱站云 2019-04-29 技术教程 0 评论

115资源网选项卡布局html+css+js代码 简介:

最近几天网站备案,非常无聊,就把115资源网的选项卡的布局给仿下来了,有需要的就来参考参考。

115资源网选项卡布局html+css+js代码 截图:

115资源网选项卡布局html+css+js代码 说明:

115选项卡布局我用了三个文件,一个存放css的,一个存放js的,一个就是html代码。

css代码:

li{list-style:none}
a{color:#333;text-decoration:none}
*{box-sizing:border-box;text-size-adjust:none}
.left{background:#FFF;height:100%;width:759.67px;padding:18px 25px;padding-bottom:0;overflow:hidden}
.left{float:left}
.title{position:relative;height:45px;line-height:35px;text-indent:21px;font-size:17px;border-bottom:1px solid #F6F6F6}
.title:after{content:" ";position:absolute;height:17px;width:0;border:1.5px solid #5298ff;left:0;border-radius:9px;top:8px}
.left .types{float:right}
.left .types .hover{background:#eaf2ff;color:#5a9dff;border-radius:6px}
.left .types a{color:#ababab;display:inline-block;cursor:pointer;text-indent:0;margin-left:13px;font-size:15px;padding:0 10px;height:30px;line-height:30px}
.left .showtop{width:1520px;transition:.5s all}
.layui-clear{clear:both}
.xuhaoul:nth-child(1){margin-right:100px}
.xuhaoul{width:710px;margin-top:27px;margin-bottom:32px;float:left}
.xuhaoul li{float:left;width:50%;margin-bottom:28px;padding-right:15px}
.xuhaoul li a{display:block;line-height:30px;height:30px;font-size:15px;overflow:hidden}
.xuhaoul li a i{display:inline-block;vertical-align:middle;font-style:normal;margin-right:10px;background:#f3f3f3;width:33px;text-align:center;border-radius:5px;color:#696969;font-size:14px;height:23px;line-height:23px;margin-top:-2px}
.xuhaoul li:nth-child(1) a i{background:#ff2a2a;color:#FFF}
.xuhaoul li:nth-child(2) a i{background:#ff7171;color:#FFF}
.xuhaoul li:nth-child(3) a i{background:#f90;color:#FFF}
.xuhaoul li:nth-child(4) a i{background:#fc0;color:#FFF}

js代码:

 $(".types a").hover(function(e) {
        $(".types .hover").removeClass("hover");
        $(this).addClass("hover");
        /*计算当前应该偏移的高度*/
        var index = $(".types .hover").index();
        var x = $(".showtop ul").width() * index + parseInt($(".showtop ul").css("margin-right")) * index;
        $(".showtop").css("transform", "translateX(-" + x + "px)");
    });

html代码:

<link href="style.css" rel="stylesheet" type="text/css"/>
<div class="scoend">
	<div class="left">
		<div class="title">
			人气榜单
			<div class="types">
				<a class="hover">本月冠军</a>
                
				<a class="">总榜之巅</a>
			</div>
		</div>
		<div class="showtop layui-clear" style="transform: translateX(0px);">
			<ul class="xuhaoul">
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
			</ul>
			<ul class="xuhaoul">
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
				<li><a href="/html/1242.html"><i>1</i> 文章文章文章文章文章 </a></li>
			</ul>
		</div>
	</div>
</div>
<script src="http://static.115z.com/js/jquery-3.3.1.min.js"></script>
<script src="script.js" type="text/javascript"></script>

下载地址:

此处为隐藏内容,请评论后刷新本页面查看隐藏内容,谢谢!

< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:207385345  官方QQ群:333914614


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群
爱站云安全认证