标签：obj 16 插画 html var 4449 官网 222 站酷
源码连接：链接：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)之间类似这种区别。这两对真是很难区分的，我经常因为细节问题找很久
- 尽量使用类添加样式，使用标签容易样式叠加，有时候自己写的多了都会自己忘了对某个标签做过什么定义
- 定义函数或者变量千万别忘了初始化，运行后可以在后台查看变量的定义情况
标签：obj,16,插画,html,var,4449,官网,222,站酷 来源： https://blog.csdn.net/yingshuangtu/article/details/118292871
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。