[81资源网] 115资源网选项卡布局HTML + CSS + js的代码

作者 : yujun 本文共3876个字,预计阅读时间需要10分钟 发布时间: 2019-04-29 共3人阅读

[81资源网] 115个资源网选项卡布局HTML + CSS + js的代码

20190429153031_15672.png

布局一共需要调用三个文件,一个存放的CSS的,一个存放JS的,一个就是HTML代码,代码如下:

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}
 $(".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)");
    });
<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>

好了按照上面的代码进行布局和修改就完美了。


测试测试 » [81资源网] 115资源网选项卡布局HTML + CSS + js的代码

发表评论

售后服务:

  • 售后服务范围 1、商业模板使用范围内问题免费咨询
    2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
    3、单价超过200元的模板免费一次安装,需提供服务器信息。
    付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
    2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
    3、服务器环境配置(一般 ¥50-300)
    4、网站中毒处理(需额外付费,500元/次/质保三个月)
    售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
    免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 815176521@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

提供最优质的资源集合

立即查看 了解详情
开通SVIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡