源码连接：链接：https://pan.baidu.com/s/1YmQImbVeiN6jlvE-mIzQGA
提取码：1lal
复制这段内容后打开百度网盘手机App，操作更方便哦
文章目录
一、实现结果
1.截图
2.思考
花了一天时间写的，主要时间花在了js中将导航栏定位(鼠标滚动到一定位置，导航栏固定)，先是自己写 了js代码然后修改了很久还是运行不了，就百度了很久找到了别人的代码，主要实现思路就是：计算鼠标滚动的px数，再计算该要固定的导航栏到达顶部的距离，当鼠标移动的距离大于或者等于导航栏到达顶部的距离，就将目标固定，obj.style.position = ‘fixed’;obj.style.top = ‘0’+“px”； obj.style.zIndex = ‘9999’;；使用document.body.scrollTop;计算鼠标滚动的高度
menuFixed('tab-nav');
//js代码
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop+60;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'absolute';
obj.style.top = '543'+"px";
}else{
obj.style.position = 'fixed';
obj.style.top = '0'+"px";
obj.style.zIndex = '9999';
}
}
window.onload=function(){menuFixed("dh");}//调用函数
var My=document.getElementById("My");
My.onclick=function(){
alert("该模块还没实现");
}
var My=document.getElementById("guanzhu");
guanzhu.onclick=function(){
alert("感谢您的关注");
}
还有很大一部分时间花在了了实现cssx效果上，做页面细节部分太消耗耐心，仍需继续努力
二、代码
1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>站酷(ZCOOL)</title>
<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
<link rel="stylesheet" href="./css/zcool.css">
<script src="./js/zcool.js"></script>
</head>
<body>
<div class="header">
<!-- 中间 -->
<div class="nav">
<div class="logo">
<img src="./img/logo.svg" alt="">
</div>
<div class="header-menu-bar">
<ul class="menu-list-content">
<li>
<a style="font-weight: 700;" href="">首页</a>
<div class="menu-list hide">
<p>站酷首页</p>
<p>我的首页</p>
</div>
</li>
<li>
<a href="" class="find">发现</a>
<div class="menu-list discover-box">
<div class="t jx" >精选
<div class="d">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">精选</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
<a href="">电商</a>
<a href="">APP界面</a>
<a href="">艺术插花</a>
<a href="">家装设计</a>
<a href="">海报</a>
<a href="">文章</a>
</div>
</div>
</div>
<div class="t">平面
<div class="d" style="background-color: #ffe300;">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">平面</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
<a href="">电商</a>
<a href="">APP界面</a>
<a href="">艺术插花</a>
</div>
</div>
</div>
<div class="t">UI
<div class="d" style="background-color: #999999;">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">UI</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
</div>
</div>
</div>
<div class="t">网页
<div class="d" style="background-color: #ffffff;">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">网页</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
<a href="">电商</a>
<a href="">APP界面</a>
</div>
</div>
</div>
<div class="t">插画
<div class="d" style="background-color: palegreen">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">插画</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
</div>
</div>
</div>
<div class="t">动漫
<div class="d" style="background-color: purple;">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">动漫</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
<a href="">电商</a>
<a href="">APP界面</a>
<a href="">艺术插花</a>
<a href="">家装设计</a>
<a href="">海报</a>
<a href="">文章</a>
<a href="">文章</a>
<a href="">文章</a>
</div>
</div>
</div>
<div class="t">摄影
<div class="d" style="background-color: teal">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">摄影</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
<a href="">电商</a>
</div>
</div>
</div>
<div class="t">空间
<div class="d" style="background-color: tomato;">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">空间</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
<a href="">电商</a>
<a href="">APP界面</a>
<a href="">艺术插花</a>
</div>
</div>
</div>
<div class="t">产品
<div class="d">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">产品</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
</div>
</div>
</div>
<div class="t">三维
<div class="d">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">三维</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
<a href="">电商</a>
<a href="">APP界面</a>
<a href="">艺术插花</a>
<a href="">家装设计</a>
</div>
</div>
</div>
<div class="t">影视
<div class="d">
<a class="cate-box-title" href="精选"><img src="./img/zuanshi.png" alt="">影视</a>
<div class="SubCate-box">
<a href="">运营设计</a>
<a href="">包装</a>
<a href="">动画/影视</a>
<a href="">人像摄影</a>
<a href="">商业插画</a>
<a href="">电商</a>
<a href="">APP界面</a>
</div>
</div>
</div>
<!-- <div class="discover-box-list">
<ul>
<li><p>精选</p>
<pclass="t"></pclass=>
</li>
<li><p>平面</p>
<pclass="t"></pclass=>
</li>
<li><p>精选</p>
<pclass="t"></pclass=>
</li>
<li><p>精选</p>
<pclass="t"></pclass=>
</li>
<li><p>精选</p>
<div class="t"></div>
</li>
</ul>
</div> -->
<div class="discover-right-bar">
<!-- 变化 -->
<div class="left"></div>
<!-- 不变 -->
<div class="right"></div>
</div>
</div>
</li>
<li>
<a href="">职位</a>
<div class="menu-list hide">
<p>职位</p>
<p>公司</p>
<p>+职位发布</p>
</div>
</li>
<li>
<a href="">活动</a>
<div class="menu-list hide">
<p>设计大赛</p>
<p>专题策划</p>
<p>线上活动</p>
<p>学习音频</p>
</div>
</li>
<li>
<a href="">正版素材</a>
<div class="menu-list hide">
<p>视频</p>
<p>字体</p>
<p>音乐</p>
<p>创意专题</p>
<p>我要供图</p>
</div>
</li>
<li>
<a href="">课程</a>
<div class="menu-list hide">
<p>会员专区</p>
<p>平面视觉</p>
<p>绘画插画</p>
<p>电商设计</p>
<p>UI设计</p>
<p>摄影艺术</p>
<p>影视广告</p>
</div>
</li>
<li>
<a href="">版权保护</a>
<div class="menu-list hide">
<p>著作权登记</p>
<p>区块链存证</p>
</div>
</li>
<li>
<a href="">...</a>
<div class="menu-list hide">
<p>设计师</p>
<p>榜单</p>
<p>站酷APP</p>
<p>站酷字库</p>
</div>
</li>
</ul>
</div>
<div class="search">
<img src="./img/search.png" alt="">
</div>
<div class="user-center">
<div class="upload">
<a class="upload-link" href=""></a>
</div>
<div class="login">
<a href="">登录</a><i></i>
<a href="">注册</a>
</div>
</div>
<!-- 下拉内容 -->
<div>
</div>
</div>
</div>
<!-- 中间部分开始 -->
<div class="main-wrap">
<!-- 轮播图 -->
<div id="show_banner" class="show_banner">
<ul id="banner">
<li><img src="./img/lunb1.png" alt=""></li>
<li><img src="./img/lunb2.jpg" alt=""></li>
<li><img src="./img/lunb3.jpg" alt=""></li>
<li><img src="./img/lunb4.png" alt=""></li>
<li><img src="./img/lunb5.jpg" alt=""></li>
</ul>
<span id="left"><</span>
<span id="right">></span>
</div>
<!-- 轮播图下图片 -->
<div class="advtop">
<div class="container">
<ul>
<li><img src="./img/s1.png" alt=""></li>
<li><img src="./img/s2.jpg" alt=""></li>
<li><img src="./img/s3.png" alt=""></li>
<li><img src="./img/s4.jpg" alt=""></li>
<li style="margin-right: 0;"><img src="./img/s5.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="tab-nav" id="tab-nav">
<div class="tab-nav-container">
<ul>
<li style="border-bottom: 2px solid #000;color: #000;">首页推荐</li>
<li id="My">我的关注</li>
<li>全部推荐</li>
</ul>
</div>
</div>
</div>
<!-- 卡片 -->
<div class="all-work-list">
<div class="container">
<!-- 1 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p1.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" >再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu" id="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 2 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p2.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 3 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p3.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 4 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p4.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 5 -->
<div class="card-box" style="margin-right: 0;">
<div class="card-img">
<img src="./img/p5.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 6 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p6.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 7 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p7.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 8 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p8.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 9 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p9.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 10 -->
<div class="card-box" style="margin-right: 0;">
<div class="card-img">
<img src="./img/p10.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 11 -->
<div class="card-box" >
<div class="card-img">
<img src="./img/p10.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 12 -->
<div class="card-box">
<div class="card-img">
<img src="./img/p10.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 13 -->
<div class="card-box" >
<div class="card-img">
<img src="./img/p10.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 14 -->
<div class="card-box" >
<div class="card-img">
<img src="./img/p10.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<!-- 15 -->
<div class="card-box" style="margin-right: 0;">
<div class="card-img">
<img src="./img/p10.jpg" title="《再见，夏天》插画绘本" alt="">
</div>
<div class="card-info">
<p class="title" title="《再见，夏天》插画绘本">再见，夏天</p>
<p class="info-type">插画-绘本</p>
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
<div class="user">
<span>
<img src="./img/t1.png" alt="">
</span>
<span class="time">
一天前
</span>
<div class="detail">
<div class="tou">
<img src="./img/t1.png" alt="">
<span>鲸鱼Flyish</span>
<span class="dizhi">深圳|插画师</span>
<div class="guanzhu">关注</div>
</div>
<img class="z-pic" src="./img/h1.png" alt="">
<div class="detail-bottom">
<p class="item">
<img src="./img/y.png"><span class="view">4449</span>
<img src="./img/p.png"> <span class="comment">16</span>
<img src="./img/z.png"><span class="tuijian">222</span>
</p>
</div>
</div>
</div>
</div>
<div class="page">
<div class="center">
<span style="background-color:#ffe300;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>...</span>
<span>99</span>
<span>100</span>
<span>></span>
</div>
</div>
</div>
</div>
<!-- 中间部分结束 -->
<!-- 底部开始 -->
<div class="footer">
<div class="footer-container">
<div class="top">
<div class="top-l">
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">中文</a>
<a href="">English</a>
</div>
<div class="top-r">
<a href="" class="weixin"></a>
<a href="" class="xl"></a>
</div>
</div>
<div class="middle">
<a href=""> 广播电视节目制作经营许可证（京）字第06990号</a><i></i>
<a href="">京ICP备11017824号 </a><i></i>
<a href="">京ICP证130164号 </a><i></i>
<a href="">人力资源服务许可证</a>
<a href="">营业执照 </a><i></i>
<a href="">网上有害信息举报专区</a><i></i>
<a href="">不良信息举报电话：010-56538658</a><i></i>
<a href="">举报邮箱 jubao@zcool.com.cn </a><i></i>
<a href="">联系电话：010-56538600</a><i></i>
<a href="">Copyright © 2006-2021 ZCOOL站酷</a><i></i>
</div>
</div>
</div>
<!-- 底部结束 -->
<!-- 到达顶部 -->
<div class="topBar">
<a href="#">
<img src="./img/top.png" alt="" title="返回顶部">
</a>
<!-- -->
</div>
</body>
</html>
2.js代码
window.onload=function(){
var banner = document.getElementById("banner");
var show_banner = document.getElementById("show_banner");
var Left = document.getElementById("left");
var Right = document.getElementById("right");
// var cri = document.getElementsByClassName("cri");
// console.log(cri);
var i=0;
function Interval_banner(){
i++;
if(i==5){
i = 0;
}
Banner();
}
var timer = setInterval(Interval_banner,1000)
show_banner.onmouseover=function(){
clearInterval(timer)
}
show_banner.onmouseout=function(){
timer = setInterval(Interval_banner,1000)
}
Right.onclick=function(){
i++;
if(i==5){
i = 0;
}
Banner();
}
Left.onclick=function(){
i--;
if(i==-1){
i = 4;
}
Banner();
}
function Banner(){
banner.style.marginLeft = -1130*i+"px";
}
// 到达指定位置，固定头部
menuFixed('tab-nav');
//js代码
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop+60;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'absolute';
obj.style.top = '543'+"px";
}else{
obj.style.position = 'fixed';
obj.style.top = '0'+"px";
obj.style.zIndex = '9999';
}
}
window.onload=function(){menuFixed("dh");}//调用函数
var My=document.getElementById("My");
My.onclick=function(){
alert("该模块还没实现");
}
var My=document.getElementById("guanzhu");
guanzhu.onclick=function(){
alert("感谢您的关注");
}
}
三、总结
想要完成一个界面时，首先要思考的是布局，先将布局完成好会使后面后续繁重的工作便捷很多，其次是模块的命名，命名重复会制造很大的隐患，也影响代码的可读性，不方便 后端人员完成接下来 的工作，
- 命名应当直观且可以拼读，可望文知意，便于记忆和阅读。
标识符最好采用英文单词或其组合,不允许使用拼音。程序中的英文单词一般不要太复杂，用词应
当准确。 - 命名的长度应当符合"min-length && max-information"原则。
html是一种简洁的脚本语言,命名也应该是简洁的。例如变量名MaxVal就比kMaxValueUntilOverflow好
用。标识符的长度-般不要过长，较长的单词可通过去掉“元音”形成缩写。另外，英文词尽量不缩
写，特别是非常用专业名词，如果有缩写，在同一系统中对同一单词必须使用相同的表示法，并且注明其意思。 - 这里还有一个要特别注意的就是1(数字1)和I(小写字母I)之间，0(数字0)和o(小写字母o)之间类似这种区别。这两对真是很难区分的，我经常因为细节问题找很久
- 尽量使用类添加样式，使用标签容易样式叠加，有时候自己写的多了都会自己忘了对某个标签做过什么定义
- 定义函数或者变量千万别忘了初始化，运行后可以在后台查看变量的定义情况