【网页设计】期末大作业html+css（B站首页 1页 带js轮播)
2024-04-04 15:55:51
⛵ 源码获取 文末联系 ✈
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"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1650895271428/images/favicon.ico"><title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/swiper.min.css"><script src="js/swiper.min.js"></script>
</head>
<body><!--顶部导航栏--><div class="bili-header"><div class="nav-menu"><div class="nav-mask"></div><div class="container"><div class="nav-wrapper-left"><ul class="nav-con-ul"><li class="nav-item home"><a href="javascript:;" class="t"><i class="iconfont icon-tv"></i>主站</a></li><li class="nav-item"><a href="javascript:;" class="t">游戏中心</a></li><li class="nav-item"><a href="javascript:;" class="t">直播</a></li><li class="nav-item"><a href="javascript:;" class="t">会员购</a></li><li class="nav-item"><a href="javascript:;" class="t">漫画</a></li><li class="nav-item"><a href="javascript:;" class="t">赛事</a></li><li class="nav-item"><a href="javascript:;" class="t">BW</a></li><li class="nav-item"><a href="javascript:;" class="t"><i class="iconfont icon-mobile"></i>下载APP</a></li></ul></div><div class="nav-wrapper-right"><div class="nav-con fr"><ul class="nav-con-ul"><li class="nav-item"><a href="javascript:;" class="t item-face"><div class="i-face"><img src="picture/akari.jpg" alt="" class="face"></div></a></li><li class="nav-item"><a href="javascript:;" class="t">动态</a></li><li class="nav-item"><a href="javascript:;" class="t">历史</a></li><li class="nav-item"><a href="javascript:;" class="t">创造中心</a></li><li class="nav-item up-load"><a href="javascript:;" class="u-link t">投稿</a></li></ul></div></div></div></div><div class="header-banner" style="background-image: url(picture/header-banner1.png);"><div class="container"><div class="header-content"><div class="search"><form class="searchform"><input type="text" autocomplete="off" placeholder="新王加冕，FPX夺冠全程视频回顾" value="" class="search-keyword"><button type="submit" class="search-submit"></button></form><ul></ul><a href="javascript:;" class="link-ranking"><span>排行榜</span></a></div><a href="javascript:;" class="banner-link" style="background-image: url(picture/banner-link.png);"></a></div></div></div><div class="header-wrapper"><div class="primary-menu"><ul class="nav-menu"><li class="home"><a href="javascript:;"><div class="nav-name">首页</div></a><ul class="sub-nav"></ul></li><li class=""><a href="javascript:;"><div class="num-wrap"><span>999+</span></div><div class="nav-name">动画</div></a><ul class="sub-nav"></ul></li><li class=""><a href="javascript:;"><div class="num-wrap"><span>999+</span></div><div class="nav-name">动画</div></a><ul class="sub-nav"></ul></li><li class=""><a href="javascript:;"><div class="num-wrap"><span>155</span></div><div class="nav-name">番剧</div></a><ul class="sub-nav"></ul></li><li class=""><a href="javascript:;"><div class="num-wrap"><span>192</span></div><div class="nav-name">国创</div></a><ul class="sub-nav"></ul></li><li class=""><a href="javascript:;"></div><div class="mask-inner"></div></div><p class="t">XQ VS RW侠 KPL秋季赛季后赛</p><p class="num"><span class="play"><i class="icon"></i>9.8万</span><span class="danmu"><i class="icon"></i>497</span></p></a></div><div class="card-live-module"><a href="javascript:;"><div class="pic"><div class="lazy-img"><img src="picture/live1-0.webp" alt=""></div><div class="snum1"><span class="auther">03:20</span><div class="watch-later-trigger w-later"></div></div><div class="mask-inner"></div></div><p class="t">XQ VS RW侠 KPL秋季赛季后赛</p><p class="num"><span class="play"><i class="icon"></i>9.8万</span><span class="danmu"><i class="icon"></i>497</span></p></a></div><div class="card-live-module"><a href="javascript:;"><div class="pic"><div class="lazy-img"><img src="picture/live1-0.webp" alt=""></div><div class="snum1"><span class="auther">03:20</span><div class="watch-later-trigger w-later"></div></div><div class="mask-inner"></div></div><p class="t">XQ VS RW侠 KPL秋季赛季后赛</p><p class="num"><span class="play"><i class="icon"></i>9.8万</span><span class="danmu"><i class="icon"></i>497</span></p></a></div></div></div><div class="r-con"><div class="bili-tab rank-head"><h3>排行</h3><div class="bili-tab-item on">全部</div><div class="bili-tab-item">原创</div><div class="bili-dropdown rank-dropdown"><span class="selected">三日</span><i class="icon icon-arrow-down"></i><ul class="dropdown-list"><li class="dropdown-item" srtyle="">一周</li></ul></div></div><div class="tab-box rank-list-wrap"><div class="tab-con clearfix" style="margin-left:0px;"><div class="tab-item rank"><div class="r-item"><span class="number r-item-n">1</span><a href="javascript:;" class="ri-info-wrap clearfix"><div class="ri-preview"><img src="picture/donghua-r-1.webp" alt=""></div><div class="ri-detail"><p class="ri-title">一月这几部新番不火，我当场把这个视频吃下去！</p><p class="ri-point">综合评分：102.4万</p></div><div class="watch-later-trigger w-later"></div></a></div><div class="r-item"><span class="number r-item-n">2</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number r-item-n">3</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number">4</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number">5</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number">6</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number">7</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div></div></div></div><a href="javascript:;" class="more-link">查看更多<i class="icon icon-arrow-r"></i></a></div></div><!--第十七栏专栏--><div class="zone-wrap-module live-module clearfix"><div class="l-con"><div class="zone-title"><div class="headline clearfix"><i class="icon icon_t icon-article"></i><a href="javascript:;" class="name">专栏</a><a href="javascript:;" class="link-more">更多<i class="icon"></i></a><div class="read-push"><i class="icon icon_read"></i><span class="info">换一换</span></div></div></div><div class="storey-box clearfix"><div class="article-card"><div class="article-cover"><a href="javascript:;"><div class="lazy-img"><img src="picture/article1.jpg" alt=""></div></a></div><div class="article-info"><a href="javascript:;" target="_blank" class="title">「鬼灭之刃」：有它在，日本动画就还有希望</a><div class="data"><span class="view"><i class="icon"></i>5874</span><span class="comment"><i class="icon"></i>39</span><span class="up"><a href="javascript:;" target="_blank">哈影小十君</a></span></div></div></div><div class="article-card"><div class="article-cover"><a href="javascript:;"><div class="lazy-img"><img src="picture/article1.jpg" alt=""></div></a></div><div class="article-info"><a href="javascript:;" target="_blank" class="title">「鬼灭之刃」：有它在，日本动画就还有希望</a><div class="data"><span class="view"><i class="icon"></i>5874</span><span class="comment"><i class="icon"></i>39</span><span class="up"><a href="javascript:;" target="_blank">哈影小十君</a></span></div></div></div><div class="article-card"><div class="article-cover"><a href="javascript:;"><div class="lazy-img"><img src="picture/article1.jpg" alt=""></div></a></div><div class="article-info"><a href="javascript:;" target="_blank" class="title">「鬼灭之刃」：有它在，日本动画就还有希望</a><div class="data"><span class="view"><i class="icon"></i>5874</span><span class="comment"><i class="icon"></i>39</span><span class="up"><a href="javascript:;" target="_blank">哈影小十君</a></span></div></div></div><div class="article-card"><div class="article-cover"><a href="javascript:;"><div class="lazy-img"><img src="picture/article1.jpg" alt=""></div></a></div><div class="article-info"><a href="javascript:;" target="_blank" class="title">「鬼灭之刃」：有它在，日本动画就还有希望</a><div class="data"><span class="view"><i class="icon"></i>5874</span><span class="comment"><i class="icon"></i>39</span><span class="up"><a href="javascript:;" target="_blank">哈影小十君</a></span></div></div></div><div class="article-card"><div class="article-cover"><a href="javascript:;"><div class="lazy-img"><img src="picture/article1.jpg" alt=""></div></a></div><div class="article-info"><a href="javascript:;" target="_blank" class="title">「鬼灭之刃」：有它在，日本动画就还有希望</a><div class="data"><span class="view"><i class="icon"></i>5874</span><span class="comment"><i class="icon"></i>39</span><span class="up"><a href="javascript:;" target="_blank">哈影小十君</a></span></div></div></div><div class="article-card"><div class="article-cover"><a href="javascript:;"><div class="lazy-img"><img src="picture/article1.jpg" alt=""></div></a></div><div class="article-info"><a href="javascript:;" target="_blank" class="title">「鬼灭之刃」：有它在，日本动画就还有希望</a><div class="data"><span class="view"><i class="icon"></i>5874</span><span class="comment"><i class="icon"></i>39</span><span class="up"><a href="javascript:;" target="_blank">哈影小十君</a></span></div></div></div><div class="article-card"><div class="article-cover"><a href="javascript:;"><div class="lazy-img"><img src="picture/article1.jpg" alt=""></div></a></div><div class="article-info"><a href="javascript:;" target="_blank" class="title">「鬼灭之刃」：有它在，日本动画就还有希望</a><div class="data"><span class="view"><i class="icon"></i>5874</span><span class="comment"><i class="icon"></i>39</span><span class="up"><a href="javascript:;" target="_blank">哈影小十君</a></span></div></div></div><div class="article-card"><div class="article-cover"><a href="javascript:;"><div class="lazy-img"><img src="picture/article1.jpg" alt=""></div></a></div><div class="article-info"><a href="javascript:;" target="_blank" class="title">「鬼灭之刃」：有它在，日本动画就还有希望</a><div class="data"><span class="view"><i class="icon"></i>5874</span><span class="comment"><i class="icon"></i>39</span><span class="up"><a href="javascript:;" target="_blank">哈影小十君</a></span></div></div></div></div></div><div class="r-con"><div class="bili-tab rank-head"><h3>排行</h3><div class="bili-dropdown rank-dropdown article-rank-dropdown"><span class="selected">一日</span><i class="icon icon-arrow-down"></i><ul class="dropdown-list"><li class="dropdown-item" srtyle="">一周</li></ul></div></div><div class="tab-box rank-list-wrap"><div class="tab-con clearfix" style="margin-left:0px;"><div class="tab-item rank"><div class="r-item"><span class="number r-item-n">1</span><a href="javascript:;" class="ri-info-wrap clearfix"><div class="ri-preview"><img src="picture/donghua-r-1.webp" alt=""></div><div class="ri-detail"><p class="ri-title">一月这几部新番不火，我当场把这个视频吃下去！</p><p class="ri-point">综合评分：102.4万</p></div><div class="watch-later-trigger w-later"></div></a></div><div class="r-item"><span class="number r-item-n">2</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number r-item-n">3</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number">4</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number">5</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number">6</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div><div class="r-item"><span class="number">7</span><a href="javascript:;" class="ri-info-wrap clearfix">【灯泡】华法琳终于对斯卡蒂下手了</a></div></div></div></div><a href="javascript:;" class="more-link">查看更多<i class="icon icon-arrow-r"></i></a></div></div><!--第十八栏电影--><div class="zone-wrap-module live-module clearfix"><div class="l-con"><div class="zone-title"><div class="headline clearfix"><i class="icon icon_t icon-movie"></i><a href="javascript:;" class="name">电影</a><div class="bili-tab"><div class="bili-tab-item on">有新动态</div><div class="bili-tab-item">最新投稿</div></div><a href="javascript:;" class="link-more">更多<i class="icon"></i></a><div class="read-push"><i class="icon icon_read"></i><span class="info"><b>40360</b>条新动态</span></div></div></div><div class="storey-box clearfix"><div class="card-live-module"><a href="javascript:;"><div class="pic"><div class="lazy-img"><img src="picture/live1-0.webp" alt=""></div><div class="snum1"><span class="auther">03:20</span><div class="watch-later-trigger w-later"></div></div><div class="mask-inner"></div></div><p class="t">XQ VS RW侠 KPL秋季赛季后赛</p><p class="num"><span class="play"><i class="icon"></i>9.8万</span><span class="danmu"><i class="icon"></i>497</span></p></a></div><div class="card-live-module"><a href="javascript:;"><div class="pic"><div class="lazy-img"><img src="picture/live1-0.webp" alt=""></div><div class="snum1"><span class="auther">03:20</span><div class="watch-later-trigger w-later"></div></div><div class="mask-inner"></div></div><p class="t">XQ VS RW侠 KPL秋季赛季后赛</p><p class="num"><span class="play"><i class="icon"></i>9.8万</span><span class="danmu"><i class="icon"></i>497</span></p></a></div><div class="card-live-module"><a href="javascript:;"><div class="pic"><div class="lazy-img"><img src="picture/live1-0.webp" alt=""></div><div class="snum1"><span class="auther">03:20</span><div class="watch-later-trigger w-later"></div></div><div class="mask-inner"></div></div><p class="t">XQ VS RW侠 KPL秋季赛季后赛</p><p class="num"><span class="play"><i class="icon"></i>9.8万</span><span class="danmu"><i class="icon"></i>497</span></p></a></div><div class="card-live-module"><a href="javascript:;"><div class="pic"><div class="lazy-img"><img src="picture/live1-0.webp" alt=""></div><div class="snum1"><span class="auther">03:20</span><div class="watch-later-trigger w-later"></div></div><div class="mask-inner"></div></div><p class="t">XQ VS RW侠 KPL秋季赛季后赛</p><p class="num"><span class="play"><i class="icon"></i>9.8万</span><span class="danmu"><i class="icon"></i>497</span><
【网页设计】期末大作业html+css（B站首页 1页 带js轮播)相关推荐
- html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业——橙色的素材火资源整站(25页)
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业--橙色的素材火资源整站(25页) 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- HTML期末作业课程设计期末大作业--小米网站开发者平台首页 1页
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
- html网页设计期末大作业——生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业
html网页设计期末大作业--生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...
- HTML+CSS+JS`管理系统网站设计——学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:管理系统网站设计--学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：管理系统网站设计——学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:管理系统网站设计--学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：动漫网站设计——动漫电影《你的名字》(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:动漫网站设计--动漫电影<你的名字>(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页设计期末大作业_网页设计平时作业 常见网页 ...
- DIV+CSS进行布局 HTML+CSS+JS大作业——汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载
HTML+CSS+JS大作业--汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- HTML+CSS+JS大作业——汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载
HTML+CSS+JS大作业--汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- HTML5期末大作业：小礼品购物网站设计——小礼品购物商城网站(12页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:小礼品购物网站设计--小礼品购物商城网站(12页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业 常见网页设计作业题材有 个人. 美食. ...
最新文章
- vue父组件ajax改变数据,vue父组件传了变量给子组件，改变子组件的对象时，父组件也跟着改变...
- 图像处理之简单脸谱检测算法
- C#上位机串口软件开发--第1讲 工程创建
- 白话Elasticsearch67-不随意调节jvm和thread pool的原因jvm和服务器内存分配的最佳实践
- python messagebox一定要指定父窗体吗,为什么要使用的MessageBox.show一个所有者窗口？...
- Linux中close的用法,linux下 open() write() read() close函数
- 《Linux内核设计与实现》读书笔记（十六）- 页高速缓存和页回写
- 团队开发个人总结05
- 港中文开源基于PyTorch的多任务人脸识别框架
- mysql 创建表_每天10分钟带你学会MySQL（三）表的创建
- PyTorch实战福利从入门到精通之五——搭建ResNet
- Tomcat控制台乱码
- 推理速度快千倍！谷歌开源语言模型Transformer-XL
- 终极算法【2】——终极算法
- 别说 Python 会生成二维码，Java也会。
- python mysqldb_python MySQLdb API手册
- python帮拿王者荣耀金币
- 从零搭建vue-ssr详细介绍
- 用Acrobat无损去除PDF签名
- OpenSSL命令之算法类大全