⛵ 源码获取 文末联系 ✈
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 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>
<