⛵ 源码获取文末联系 ✈

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

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

文章目录

前端学习路线
网页基本结构
网页演示
- HTML结构代码
学的反而越迷茫
学习更多

前端学习路线

（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"><title>原神社区-米游社</title><link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1647677959453/icon/favicon.ico"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/header.css"><link rel="stylesheet" href="css/content.css"><link rel="stylesheet" href="css/footer.css"><link rel="stylesheet" href="http://www.ylcp.shop/files/files/1647677959453/css/index.css"><link rel="stylesheet" href="css/swiper-bundle.min.css">
</head><body><!-- header部分开始 --><header style="z-index: 100;"><div class="mid"><div class="logo"><img src="picture/logo.png" alt="mihoyo"><strong>米游社·原神</strong></div><ul class="list"><li>首页</li><li>酒馆</li><li>攻略</li><li>官方</li><li>观测枢</li><li>米游铺</li><li>更多</li></ul><div class="user"><form action="javascript:;" method="post"><input type="text"></form><div class="focus">关注</div><div class="message">消息</div><div class="userInfo"><a href="#"><img src="picture/profile.png" alt="我的头像"></a></div></div></div></header><!-- header部分结束 --><!-- content部分开始 --><div class="content clearfix"><!-- article部分开始 --><article><div class="picscroll"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="picture/banner01.jpeg" alt=""></div><div class="swiper-slide"><img src="picture/banner02.jpeg" alt=""></div><div class="swiper-slide"><img src="picture/banner03.png" alt=""></div><div class="swiper-slide"><img src="picture/banner04.jpeg" alt=""></div><div class="swiper-slide"><img src="picture/banner05.jpeg" alt=""></div></div><div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></div><ul class="articlelist"><li><div class="article-item-header"><a href="#"><img src="picture/usericon.png" alt="usericon"></a><a href="#"><span>西风快报员</span><img src="picture/level16.png" alt=""></a><span>11-13·官方</span></div><div class="article-item-body"><a href="#"><div class="article-item-body-title clearfix"><h3>官方</h3><h3>2.6新版本「流风眷堇庭」先行展示页现已开启！</h3></div><p class="article-item-body-content">2.6新版本「流风眷堇庭」先行展示页现已开启！苍野的流风，访览堇色华庭的诗文画卷。幽谷的纯光，照亮晦暗渊底的流明一隅。在明如皎镜的水面之上，昔日遗事正逐渐浮现…>>点击前往2.6新版本「流</p><div class="article-item-body-pic"></div></a></div><div class="article-item-footer"><div class="article-item-footer-label"><a href="#"><span>流风眷堇庭</span></a></div><p class="article-item-footer-details"><span>17w+</span><span>1250</span><span>2w+</span></p></div></li><li class="secondlist"><div class="article-item-header"><a href="#"><img src="picture/usericon.png" alt="usericon"></a><a href="#"><span>西风快报员</span><img src="picture/level16.png" alt=""></a><span>11-13·官方</span></div><div class="article-item-body"><a href="#"><div class="article-item-body-title clearfix"><h3>官方</h3><h3>「精通移涌」活动：天赋培养素材双倍掉落</h3></div><p class="article-item-body-content">活动期间，成功挑战天赋培养素材秘境，消耗「原粹树脂」领取秘宝奖励时，可获得双倍奖励。 〓活动时间〓2022/03/21 04:00 ~ 2022/03/28 03:59 〓参与条件〓激活相</p><div class="article-item-body-pic"><div class="article-item-body-pic-pause"></div></div></a></div><div class="article-item-footer"><div class="article-item-footer-label"><a href="#"><span>流风眷堇庭</span></a></div><p class="article-item-footer-details"><span>17w+</span><span>1250</span><span>2w+</span></p></div></li><li class="thirdlist"><div class="article-item-header"><a href="#"><img src="picture/usericon.png" alt="usericon"></a><a href="#"><span>西风快报员</span><img src="picture/level16.png" alt=""></a><span>11-13·官方</span></div><div class="article-item-body"><a href="#"><div class="article-item-body-title clearfix"><h3>官方</h3><h3>「百人一揆」玩法说明</h3></div><p class="article-item-body-content">「百人一揆」活动即将开启！在稻妻不为人知的秘密会馆中，似乎举办着无论是渴求争斗的战士，或是单纯好战的魔物都能接纳的乱斗大会·百人一揆。 编制二人一组的搭档队伍，在场馆中华丽地展现武人的名迹，提高争斗</p><div class="article-item-body-pic" style="background-image: url(picture/banner04.jpg);"></div><div class="article-item-body-pic" style="background-image: url(picture/22.jpg);"></div><div class="article-item-body-pic" style="background-image: url(picture/33.jpg);"></div></a></div><div class="article-item-footer"><div class="article-item-footer-label"><a href="#"><span>流风眷堇庭</span></a></div><p class="article-item-footer-details"><span>17w+</span><span>1250</span><span>2w+</span></p></div></li><li><div class="article-item-header"><a href="#"><img src="picture/usericon.png" alt="usericon"></a><a href="#"><span>西风快报员</span><img src="picture/level16.png" alt=""></a><span>11-13·官方</span></div><div class="article-item-body"><a href="#"><div class="article-item-body-title clearfix"><h3>官方</h3><h3>【V2.5攻略】#角色攻略#雷神国家队养成指南及面板参考</h3></div><p class="article-item-body-content">UID：100829803雷神国家队可谓是数个版本以来最为热门的配队。队伍伤害高，操作简单，已经成为了众多旅行者的首选。至于细节的培养，手法的改进，本篇提供了进一步的指南。ps：雷神国家队培养优</p><div class="article-item-body-pic" style="background-image: url(picture/leishen.png);"></div></a></div><div class="article-item-footer "><div class="article-item-footer-label "><a href="# "><span>流风眷堇庭</span></a></div><p class="article-item-footer-details "><span>17w+</span><span>1250</span><span>2w+</span></p></div></li></ul></article><!-- article部分结束 --><!-- aside部分开始 --><aside><div class="asidecommit "><p>发布</p><div><a href="# " target="_blank "><button>发布帖子</button></a><p>讨论、分析、攻略、同人文</p></div><div><a href="# " target="_blank "><button>发布图片</button></a><p>绘画、COS、手工、表情包</p></div></div><div class="download "><div class="download-img "><img src="picture/qrcode_ys.png" alt="QRcode "></div><div class="download-text "><p>扫码下载米游社App</p><p>了解提瓦特最新资讯</p></div></div><div class="banner "><img src="picture/banner.jpg" alt="banner "></div><div class="news "><div class="news-header "><strong>官方资讯</strong><a href="# "><span>更多</span></a></div><div class="news-body "><div class="news-body-img "><div class="news-body-img-info ">【已开奖】香菱生日活动开启！</div></div><ul class="news-list "><li><a href="# "><span>活动</span><span>【转发抽奖】琴生日活动开启！</span></a></li><li><a href="# "><span>资讯</span><span>2.6新版本「流风眷堇庭」先行展示页现已开启！</span></a></li><li><a href="# "><span>资讯</span><span>《原神》2.6版本「流风眷堇庭」前瞻特别节目回顾长图</span></a></li><li><a href="# "><span>公告</span><span>「精通移涌」活动：天赋培养素材双倍掉落</span></a></li><li><a href="# "><span>公告</span><span>「百人一揆」活动：换队乱斗挑战</span></a></li></ul></div></div></aside><!-- aside部分结束 --></div><!-- content部分结束 --><!-- footer部分开始 --><footer><div class="main "><div class="footer-nav "><div class="footer-item " id="communityMap "><p class="footer-item-title "><strong>社区地图</strong></p><div><p><a href="# ">酒馆</a><a href="# ">攻略</a></p><p><a href="# ">官方</a><a href="# ">观测枢</a></p><p><a href="# ">米游铺</a></p><p><a href="# ">同人图</a><a href="# ">COS</a></p><p><a href="# ">硬核</a></p></div></div><div class="footer-item " id="knowUs "><p class="footer-item-title "><strong>了解我们</strong></p><div><p><a href="# ">关于我们</a></p><p><a href="# ">加入我们</a></p><p><a href="# ">原神官网</a></p><p><a href="# ">米哈游官网</a></p></div></div><div class="footer-item " id="relatedInfo "><p class="footer-item-title "><strong>相关信息</strong></p><div><p><a href="# ">隐私政策</a></p><p><a href="# ">米哈游社区用户服务协议</a></p><p><a href="# ">米哈游通行证用户服务协议</a></p></div></div><div class="footer-item " id="contactUs "><p class="footer-item-title "><strong>联系我们</strong></p><div><p><a href="# ">地址：上海市徐汇区宜山路700号C4栋6层</a></p><p><a href="# ">电话：400-666-6312（每天10:00~20:00）</a></p></div></div><div class="footer-item " id="QRcode "><a href="javascript:;" target="_blank "><div><img src="picture/qrcode_ys.png" alt=" "></div><p>扫码下载米游社App</p><p>了解提瓦特最新资讯</p></a></div></div><div class="footer-copyright "><p>© 2018 米哈游版权所有｜沪公网安备31010402001113号 | 沪ICP备19018275号-4</p><p>沪网文〔2021〕3168-216｜增值电信业务经营许可证：沪B2-20210555</p><p>互联网违法不良信息举报电话：021-60371750（工作时间：每天10点-20点）｜互联网违法不良信息举报邮箱：tousu@mihoyo.com</p><p>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</p><ul class="footer-license "><li><a href="# " target="_blank "><img src="picture/license01.png" alt=" "></a></li><li><a href="# " target="_blank "><img src="picture/license02.png" alt=" "></a></li><li><a href="# " target="_blank "><img src="picture/license03.png" alt=" "></a></li><li><a href="# " target="_blank "><img src="picture/license04.png" alt=" "></a></li><li><a href="# " target="_blank "><img src="picture/license05.png" alt=" "></a></li><li><a href="# " target="_blank "><img src="picture/license06.png" alt=" "></a></li></ul></div></div></footer><!-- footer部分结束 --><!-- js 引入swiper --><script src="js/swiper-bundle.min.js"></script><!-- js swiper初始化 --><script>var swiper = new Swiper('.swiper-container', {slidesPerView: 3,spaceBetween: -245,centeredSlides: true,loop: true,pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: ".swiper-button-next ",prevEl: ".swiper-button-prev ",},// autoplay :true,});</script>
</body></html>

学的反而越迷茫

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

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

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

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

学习更多

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

HTML学生个人网站作业设计：游戏网站设计——原神首页 1页带轮播图相关推荐

web前端期末大作业：JavaScript大作业——福五鼠动漫网页制作(6页)带轮播图效果学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
制作一个简单HTML游戏网页（HTML+CSS）米哈游 1页带轮播图
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站 ...
HTML5期末大作业：动漫网站设计——斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页 ...
HTML5期末大作业：明星个人主页介绍网站设计——明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计
HTML5期末大作业:明星个人主页介绍网站设计--明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码H ...
HTML5期末大作业：动漫网站设计——福五鼠动漫(6页)带轮播特效高质量代码 HTML+CSS+JavaScript 毕设网页设计HTML
HTML5期末大作业:动漫网站设计--福五鼠动漫(6页)带轮播特效 HTML+CSS+JavaScript 大学生毕设网页设计HTML 学生网页课程设计期末作业下载 web网页设计制作成品常见网页设 ...
游戏专题类，web网页模板分享，前端期末作业，静态页面，带轮播图，登录页
index.html <html lang="zh" data-hairline="true" data-theme="light"& ...
web课程设计网页规划与设计----公司官网带轮播图 (页面精美 1页)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页带轮播带js校验
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
HTML第三次作业——Tab切换和轮播图
第一题:完全模仿京东首页的每日特价专栏制作一个Tab切换效果,除了图片大小和图片具体内容不一样外,其它部分要求高仿,即内容部分也要求高仿,即也是由图片和文字的组合构成,最左边也是一张图片. 效果图:代 ...

HTML学生个人网站作业设计：游戏网站设计——原神首页 1页带轮播图

文章目录

前端学习路线

网页基本结构

网页演示

HTML结构代码

学的反而越迷茫

学习更多

HTML学生个人网站作业设计：游戏网站设计——原神首页 1页带轮播图相关推荐

最新文章

热门文章

HTML学生个人网站作业设计：游戏网站设计——原神首页 1页 带轮播图

文章目录

前端学习路线

网页基本结构

网页演示

HTML结构代码

学的反而越迷茫

学习更多

HTML学生个人网站作业设计：游戏网站设计——原神首页 1页 带轮播图相关推荐

最新文章

热门文章

HTML学生个人网站作业设计：游戏网站设计——原神首页 1页带轮播图

HTML学生个人网站作业设计：游戏网站设计——原神首页 1页带轮播图相关推荐