立即登录

网页游戏 辅助 制作 基于Html+Css+javascript的游戏网页制作(游戏主题)

03/15 01:29:33

页游戏 辅助 制作 基于Html+Css+javascript的游戏网页制作(游戏主题)

⛵ 源码获取 文末联系 ✈

Web前端开发技术

描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站的设计与制作| HTML期末大学生网页设计作业,Web大学生网页

HTML:结构

CSS:样式

在操作方面上运用了html5和css3,

采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

JavaScript:做与用户的交互行为

文章目录

前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;

(2)css文件:css全部页面样式,文字滚动, 图片放大等;

(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个

(2)二级页面:从首页点击进入之后的页面叫做二级页面

(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说网页游戏 辅助 制作,网站就是由网页组成的

首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名

导航菜单:是指位于页面顶部或者侧边区域的网页游戏 辅助 制作,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.

网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

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>英雄联盟title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
head>
<body>
    <div id="bigbox">
        <div id="title">
            <nav>
                <img src="picture/logo.png" alt="">
                <ul>
                    <li>
                        <a href="">主页a>
                    li>
                    <li>
                        <a href="juese.html">角色介绍a>
                    li>
                    <li>
                        <a href="jijn.html">精彩集锦a>
                    li>
                    <li>
                        <a href="zixun.html">游戏资讯a>
                    li>
                    <li>
                        <a href="jieshao.html">游戏简介a>
                    li>
                    <li>
                        <a href="login.html">召唤师登录a>
                    li>
                ul>
            nav>
        div>
        <div>
            <h1>
                英雄联盟
            h1>
            <div id="index_main">
                <div class="content">
                    <ul class="wrapper">
                        <li><img src="picture/1.jpg">li>
                        <li><img src="picture/2.jpg">li>
                        <li><img src="picture/3.jpg">li>
                        <li><img src="picture/1.jpg">li>
                    ul>
                    <ul class="radius">
                    ul>
                    <div class="prev">
                        <span><span>
                    div>
                    <div class="next">
                        <span>>span>
                    div>
                div>
                <div id="index_main_p">
                    <p>
                        《英雄联盟》(League of Legends,简称LOL)是由美国拳头游戏(Riot Games)开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄,并拥有排位系统、符文系统等特色系统。
                    p>
                    <p>
                        《英雄联盟》致力于推动全球电子竞技的发展,除了联动各赛区发展职业联赛、打造电竞体系之外,每年还会举办“英雄联盟季中冠军赛”“英雄联盟全球总决赛”“英雄联盟全明星赛”三大世界级赛事,形成了自己独有的电子竞技文化
                    p>
                div>
            div>
        div>
        <div id="gengduo">
            <div id="gengduo_left" style="margin-right: 40px;">
                <h1>热门角色<a href="">查看更多>a>h1>
                <ul id="index_juese">
                    <li>
                        <div>
                            <img src="picture/1.webp" alt="">
                        div>
                        <p>盲僧p>
                    li>
                    <li>
                        <div>
                            <img src="picture/2.webp" alt="">
                        div>
                        <p>男刀p>
                    li>
                    <li>
                        <div>
                            <img src="picture/3.webp" alt="">
                        div>
                        <p>小鱼人p>
                    li>
                    <li>
                        <div>
                            <img src="picture/4.webp" alt="">
                        div>
                        <p>阿狸p>
                    li>
                ul>
            div>
            <div id="gengduo_right">
                <h1>新闻资讯
                    <a href="">查看更多>a>
                h1>
                <div id="index_xinwen">
                    <ul>
                        <li>
                            <p>
                                职业选手怎么玩:Karsa打野佛耶戈打法攻略
                            p>
                            <span>04-26span>
                        li>
                        <li>
                            <p>
                                电研所丨如何科学的吃塔皮
                            p>
                            <span>04-26span>
                        li>
                        <li>
                            <p>
                                【英雄联盟】2022西部魔影系列皮肤原画
                            p>
                            <span>04-26span>
                        li>
                        <li>
                            <p>
                                V5战队bilibili直播首秀
                            p>
                            <span>04-26span>
                        li>
                        <li>
                            <p>游戏玩法感想 4/22:游戏分析团队p>
                            <span>04-26span>
                        li>
                    ul>
                div>
            div>
        div>
        <footer>
            <p>
                版权所有©***
            p>
        footer>
    div>
body>
<script type="text/javascript">
    window.onload = function() {
        var content = document.getElementsByClassName('content')[0]
        var wrapper = document.getElementsByClassName('wrapper')[0]
        var radius = document.getElementsByClassName('radius')[0]
        var prev = document.getElementsByClassName('prev')[0]
        var next = document.getElementsByClassName('next')[0]
        var imgWidth = wrapper.children[0].offsetWidth
        var wrapIndex = 0
        //悬停显隐
        content.onmouseover = function() {
            clearInterval(timer)
            next.style.opacity = "0.6";
            prev.style.opacity = "0.6";
        }
        content.onmouseout = function() {
            timer = setInterval(function() {
                next.onclick()
            }, 3500)
            next.style.opacity = "0";
            prev.style.opacity = "0";
        }
        //动态创建圆点指示器
        function createLi() {
            for (let i = 0; i < wrapper.children.length - 1; i++) {
                let li = document.createElement("li")
                radius.appendChild(li)
            }
            radius.children[0].className = 'radius-active'
        }
        createLi()
        //指示器响应
        function cirAction(wrapIndex) {
            for (let i = 0; i < radius.children.length; i++) {
                radius.children[i].classList.remove("radius-active")
            }
            if (wrapIndex === wrapper.children.length - 1) {
                radius.children[0].className = 'radius-active'
            } else {
                radius.children[wrapIndex].className = 'radius-active'
            }
        }
        //指示器控制
        function cirMouse() {
            for (let i = 0; i < radius.children.length; i++) {
                radius.children[i].onmouseover = function() {
                    clearInterval(timer);
                    animate(wrapper, -i * imgWidth);
                    wrapIndex = i;
                    cirAction(wrapIndex)
                }
            }
        }
        cirMouse()
        //滑动动画
        function animate(el, target) {
            clearInterval(el.timer)
            el.timer = setInterval(function() {
                let move = 25;
                let present = wrapper.offsetLeft;
                move = present > target ? -move : move;
                present += move;
                if (Math.abs(present - target) > Math.abs(move)) {
                    wrapper.style.left = present + 'px'
                } else {
                    clearInterval(el.timer);
                    wrapper.style.left = target + 'px'
                }
            }, 16)
        }
        //next控制
        next.onclick = function() {
            if (wrapIndex === wrapper.children.length - 1) {
                wrapIndex = 0;
                wrapper.style.left = 0 + 'px';
            }
            wrapIndex++;
            animate(wrapper, -wrapIndex * imgWidth);
            cirAction(wrapIndex);
        }
        //prev控制
        prev.onclick = function() {
            if (wrapIndex === 0) {
                wrapIndex = wrapper.children.length - 1;
                wrapper.style.left = -wrapIndex * imgWidth + 'px';
            }
            wrapIndex--;
            animate(wrapper, -wrapIndex * imgWidth);
            cirAction(wrapIndex)
        }
        //自动滑动
        var timer = setInterval(function() {
            next.onclick()
        }, 3500)
    }
script>
html>

 

学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司卡盟,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光

—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识

来源:【九爱网址导航www.fuzhukm.com】 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

最新资讯