【兜哩开发】关于"酷哇导航"页面雏形

作者: 熙如意Xiry8881 | 来源:发表于2022-06-03 21:45 被阅读0次

由 kaifa.dliyo.cloud 提供

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;padding:0;}

ul {list-style-type: none;margin: 0;padding:0;}

body{margin:0 auto;height:100%;width:1080px;background:#f9f9f9;}

/*头部*/

.head{margin:0 auto;padding:10px 0;width:100%;line-height:28px;height:32px;text-align:center;background:#666;color:#666;}

.head div{margin:0 5px;width:28px;height:28px;background:#f9f9f9;border:1px solid #f3f3f3;border-radius:15px;color:rgb(34,56,145,0.72);}

.head .logo{margin:-1px 6px;width:85px;height:35px;background:#666 url(./0.png)no-repeat;background-size:100%;border:none;border-radius:0;}

.head .user{width:28px;}

.head .schtxt{padding:2px 8px;width:180px;line-height:22px;border:1px solid #f3f3f3;border-radius:15px;}

.list,.list0{margin:10px auto;line-height:32px;height:150px;font-size:14px;background:#fff;overflow:hidden;}

.list0:hover{height:300px;overflow-y:auto;}

.list0 li{float:left;margin:0 auto;width:100%;background:#fff;text-align:center;}

.list0 .on0{border-left:2px solid rgb(225,43,75);}

.tit{margin:0 auto;padding:5px 8px;height:32px;border-bottom:1px solid #f3f3f3;}

.tit div{float:left;}

.tit .bg{margin:12px auto;margin-right:5px;width:5px;height:8px;background:rgb(36,220,87);}

.tit span{float:right;color:#999;}

.tag{margin:0 auto;text-align:center;}

.tag li{float:left;width:20%;}

.tag li:hover{color:rgb(36,220,87);}

/*底部*/

.copy{float:right;margin:0 auto;width:1080px;line-height:35px;background:#f3f3f3;color:#999;font-size:12px;text-align:left;}

.copy a{margin:0 auto;padding:0 8px;width:68px;text-decoration: none;color:#999;}

.copy a:hover{color:rgb(34,253,87);}

/*回顶*/

.gotop{margin:0 auto;text-align:center;width:35px;height:35px;line-height:35px;bottom:80px;right:15px;background:rgb(9,9,9,0.1);border-radius:50%;border:1px solid rgb(34,56,143,0.06);color:rgb(34,56,145,0.45);transition:0.3s;}

.gotop:hover{background:#f9f9f9;}

.info{margin:0 auto;padding:0 8px;}

.info li{width:50%;text-align:left;}

.l{float:left;}

.r{float:right;}

.fix{position: fixed;}

.hidden{display:none;}

.show{display:block;}

</style>

</head>

<body>

</div>

<ul>

</ul>

</div>

</div>

</div>

<li onclick="tn(1)">淘宝优惠券<div></div></li>

<li onclick="tn(6)">什么值得买<div></div></li>

</ul>

</div>

</div>

<li onclick="tn(2)">AcFun<div></div></li>

</ul>

</div>

</div>

<li onclick="tn(0)">网易云音乐<div></div></li>

<li onclick="tn(2)">喜马拉雅FM<div></div></li>

</ul>

</div>

</div>

<li onclick="tn(0)">免费秒传大文件<div></div></li>

<li onclick="tn(4)">TapTap<div></div></li>

<li onclick="tn(5)">Convertio<div></div></li>

<li onclick="tn(6)">搜狗图片搜索<div></div></li>

<li onclick="tn(8)">Photopea<div></div></li>

</ul>

</div>

</div>

<li onclick="tn(5)">CSS-Tricks<div></div></li>

<li onclick="tn(6)">regex101<div></div></li>

<li onclick="tn(6)">Github<div></div></li>

<li onclick="tn(8)">SO JSON在线工具<div></div></li>

</ul>

</div>

</div>

<li onclick="tn(2)">ZCOOL 站酷<div></div></li>

<li onclick="tn(3)">Dribbble<div></div></li>

<li onclick="tn(6)">Polarr<div></div></li>

</ul>

</div>

</div>

<li onclick="tn(0)">Chinaz SEO查询<div></div></li>

<li onclick="tn(2)">5118营销大数据<div></div></li>

<li onclick="tn(5)">百度搜索资源平台<div></div></li>

<li onclick="tn(8)">ZOL数码产品榜<div></div></li>

</ul>

</div>

</div>

</body>

window.onscroll = function(){scrollFunction()};

function scrollFunction() {console.log(121);

if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {

document.getElementById("myBtn").style.display = "block";

} else {

document.getElementById("myBtn").style.display = "none";

}

function topFunction() {

document.body.scrollTop = 0;

document.documentElement.scrollTop = 0;

}

</script>

</html>

网友评论

本文标题：【兜哩开发】关于"酷哇导航"页面雏形

本文链接：https://www.haomeiwen.com/subject/tnihmrtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

【兜哩开发】关于"酷哇导航"页面雏形

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读