0
点赞
收藏
分享

微信扫一扫

JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页

程序猿不脱发2 2022-11-13 阅读 66
html静态网页web课程与设计web前端期末大作业学生网页作业html编程语言

📂文章目录

  • ​​一、👨‍🎓网站题目​​
  • ​​二、✍️网站描述​​
  • ​​三、📚网站介绍​​
  • ​​四、🌐网站演示​​
  • ​​五、⚙️ 网站代码​​
  • ​​🧱HTML结构代码​​
  • ​​💒CSS样式代码​​
  • ​​六、🥇 如何让学习不再盲目​​
  • ​​七、🎁更多干货​​

一、👨‍🎓网站题目

👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。

二、✍️网站描述

🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：​​Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++​​​ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页_web课程与设计


JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页_html_02


JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页_html静态网页_03


JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页_html静态网页_04



JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页_html静态网页_05


JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页_web前端期末大作业_06

五、⚙️ 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <div class="header">
      <div class="logo left">ZCOOL站酷</div>
      <div class="nav left">
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="find.html">发现</a></li>
          <li><a href="job.html">职位</a></li>
          <li><a href="rank.html">榜单</a></li>
          <li><a href="activitie.html">活动</a></li>
          <li><a href="login.html">登录</a></li>
          <li><a href="register.html">注册</a></li>
        </ul>       
      </div>
      <div class="login left">
        <img class="search" src="picture/search.jpg" alt="">
      </div>
    </div>
    <div class="container">
      <div class="lunbo">
          <img src="picture/lunbo2.jpg" alt="">
      </div>
      <div class="sort">
        首页推荐 <b>/</b> 最新发布 <b>/</b> 上升最快
      </div>
      <div class="content">
        <div class="card">
          <img src="picture/card1.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth.jpg" alt="">
            <p>设计师专栏<span class="right">1小时</span></p>        
          </div>
        </div>
        <div class="card">
          <img src="picture/card2.jpg" alt="">
          <p>树屋<br>
          <span class="second">插画-概念设定</span></p><hr>
          <div class="auth">
            <img src="picture/auth5.jpg" alt="">
            <p>WANGZC<span class="right">1小时</span></p>           
          </div>
        </div>
        <div class="card">
          <img src="picture/card3.jpg" alt="">
          <p>Midea Family Q版形象设计<br>
          <span class="second">平面-吉祥物</span></p><hr>
          <div class="auth">
            <img src="picture/auth4.jpg" alt="">
            <p>小小芝麻 <span class="right">8小时</span></p>          
          </div>
        </div>
        <div class="card">
          <img src="picture/card4.jpg" alt="">
          <p>清平乐令<br>
          <span class="second">摄影-人像</span></p><hr>
          <div class="auth">
            <img src="picture/auth3.jpg" alt="">
            <p>摄影师 <span class="right">5小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card5.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth.jpg" alt="">
            <p>设计师专栏<span class="right">6小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card6.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth3.jpg" alt="">
            <p>设计师专栏<span class="right">1小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card7.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth.jpg" alt="">
            <p>设计师专栏<span class="right">7小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card8.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth.jpg" alt="">
            <p>设计师专栏<span class="right">3小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card9.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth2.jpg" alt="">
            <p>设计师专栏<span class="right">6小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card10.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth4.jpg" alt="">
            <p>设计师专栏<span class="right">3小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card11.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth3.jpg" alt="">
            <p>设计师专栏<span class="right">6小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card12.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth.jpg" alt="">
            <p>设计师专栏<span class="right">2小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card13.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth2.jpg" alt="">
            <p>设计师专栏<span class="right">9小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card14.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth2.jpg" alt="">
            <p>设计师专栏<span class="right">7小时</span></p>
          </div>
        </div>
        <div class="card">
          <img src="picture/card15.jpg" alt="">
          <p>揭秘 Keep 的用户体验之道——站酷<br>
          <span class="second">文章-专访-UI</span></p><hr>
          <div class="auth">
            <img src="picture/auth2.jpg" alt="">
            <p>设计师专栏<span class="right">3小时</span></p>
          </div>
        </div>
      </div>
      <div class="pag">
        <ul>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>...</li>
          <li>999</li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <div class="copyr">
        ©Copyright © 2006-2019 ZCOOL站酷
      </div>
    </div>
  </body>
</html>

💒CSS样式代码

*{margin: 0;padding: 0;text-decoration: none;}
.header{
    width: 100%;
    height: 50px;
    background: #FFE300;
}
.logo{
    width: 200px;
    height: 40px;
    margin-left: 50px;
    font-size: 20px;
    padding-top: 10px;
    text-align: center;
    font-weight: bold;
}
.nav{
    width: 670px;
    height: 50px;
    margin-left: 200px;
}
.nav ul li{
    width:70px;
    height: 26px;
    text-align: center;
    padding:12px  0px ;
    margin-left: 15px;
    list-style:none;
    float: left;
}
.nav ul li:hover a{
    color: gold;
    background: black;
}
.nav a{
    width:80px;
    height: 26px;
    text-align: center;
    padding:17px  18px ;
    color: black;
    text-decoration: none;
}
.login{
    width: 250px;
    height: 50px;
    margin-left:110px;
    font-size: 13px;
    
}
.login .search{
    width:80px;
    height: 50px;
    float: left;
}
.login .logreg{
    width:120px;
    height:38px;
    text-align: center;
    padding-top: 12px;
    color: black;
    float: left;
}
.logreg a{
    color: black;
}
.left{
    float: left;
}
/* 内容区域 */
.container{
    width:1080px;
    margin: 0 auto;
    /* border: 1px solid #ccc; */
}
/* 轮播 */
.lunbo{
    width:100%;
    height:300px;
    margin-top: 20px;
    background: #ccc;
}
.lunbo img{
    width:100%;
    height:300px;
    background: #ccc;
}
.sort{
    height:40px;
    text-align: center;
    font-weight: bold;
    padding-top:20px;
}
.content{
    height:900px;
}
.content .card{
    width:200px;
    height:270px;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    box-shadow: 0 0 5px #ccc;
    /* border: 1px solid red; */
}
.card img{
    width:200px;
    height:190px;
    background: #ccc;
}
.card p{
    font-size: 12px;
    margin-bottom: 5px;
}
.card .second{
    font-size: 8px;
    color:  #ccc;
}
.card hr{background#ccc;opacity:0.5;}
.card .auth img{
    width:30px;
    height:30px;
    margin-left: 8px;
    float: left;
}
.card .auth p{
    height:27px;
    padding-top: 7px;
}
.card .auth .right{
    float: right;
    margin-right: 5px;
    color:  #ccc;
}
.pag{
    width:100%;
    height:50px;
}
.active{
    background: #FFD700;
}
.pag ul{    
    width:500px;
    height:40px;
    margin: auto;
}
.pag ul li{
    width:40px;
    height:30px;
    padding-top: 5px;
    text-align: center;
    list-style: none;
    margin-left: 8px;
    float: left;
        box-shadow: 0 0 5px #ccc;
}
/* 尾部 */
.footer{
    width: 100%;
    height:50px;
    background: #4B4B4B;
}
.copyr{
    width:1000px;
    height:40px;
    color: white;
    text-align: center;
    padding-top: 10px;
    margin:10px auto;
}

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

举报

相关推荐

HTML期末大作业-仿小米商城官网首页模板(HTML+CSS+JavaScript)

html期末大作业html小米商城官网首页web前端期末大作业HTML在线电影HTML商城模板Html/CSS前端开发

HTML期末大作业~大学生旅游官网设计作业成品(HTML+CSS+JavaScript)

大学生旅游官网设计作业htmlweb学生网页设计作业源码HTML网页设计结课作业旅游网页设计HTMLHTML期末大作业Html/CSS前端开发

HTML期末大作业课程设计~动漫游戏官网10个页面(HTML+CSS+JavaScript)

HTML期末大作业课程设计动漫游戏官网HTML个人设计web前端大作业HTML网页设计结课作业web学生网页设计作业源码Html/CSS前端开发

web前端大作业(基于HTML+CSS+JavaScript仿阴阳师游戏官网首页作业制作)

web大学生期末作业htmll大作业ide云平台云计算

【静态网页制作大作业——个人博客搭建（HTML+CSS+Javascript）】

javascript

小米官网首页（html+css+JavaScript）

html5css3typescript网盘轮播图编程语言

【期末大作业】基于HTML+CSS+JavaScript网上订餐系统(23个页面)

csshtmljavascript网页设计系统/运维

【Web前端大作业】基于HTML+CSS+JavaScript制作西北大学新闻网站（7页）

htmljavascript前端cssdreamweaver系统/运维

Web前端大作业—个人网页(html+css+javascript)

前端javascripthtml

HTML5期末大作业 基于HTML+CSS+JavaScript学校官网首页

html静态网页web课程与设计web前端期末大作业学生网页作业html软件测试软件研发
0 条评论