HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)
2024-06-09 12:48:59
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 2.CSS代码
- 三、个人总结
- 四、精彩推荐
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="zxx"><head><meta charset="UTF-8"><meta name="description" content="Anime Template"><meta name="keywords" content="Anime, unica, creative, html"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>动漫 | 模板</title><!-- Css Styles --><link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"><link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"><link rel="stylesheet" href="css/elegant-icons.css" type="text/css"><link rel="stylesheet" href="css/plyr.css" type="text/css"><link rel="stylesheet" href="css/nice-select.css" type="text/css"><link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css"><link rel="stylesheet" href="css/slicknav.min.css" type="text/css"><link rel="stylesheet" href="css/style.css" type="text/css">
</head><body><!-- Page Preloder --><div id="preloder"><div class="loader"></div></div><!-- Header Section Begin --><header class="header"><div class="container"><div class="row"><div class="col-lg-2"><div class="header__logo"><a href="./index.html"><img src="img/logo.png" alt=""></a></div></div><div class="col-lg-8"><div class="header__nav"><nav class="header__menu mobile-menu"><ul><li class="积极的"><a href="./index.html">主页</a></li><li><a href="./categories.html">类别 <span class="arrow_carrot-down"></span></a><ul class="dropdown"><li><a href="./categories.html">类别</a></li><li><a href="./anime-details.html">动漫细节</a></li><li><a href="./anime-watching.html">看动漫</a></li><li><a href="./blog-details.html">博客详情</a></li><li><a href="./signup.html">注册</a></li><li><a href="./login.html">登录</a></li></ul></li><li><a href="./blog.html">我们的博客</a></li><li><a >联络</a></li></ul></nav></div></div><div class="col-lg-2"><div class="header__right"><a class="search-switch"><span class="icon_search"></span></a><a href="./login.html"><span class="icon_profile"></span></a></div></div></div><div id="mobile-menu-wrap"></div></div></header><!-- Header End --><!-- Hero Section Begin --><section class="hero"><div class="container"><div class="hero__slider owl-carousel"><div class="hero__items set-bg" data-setbg="img/hero/hero-1.jpg"><div class="row"><div class="col-lg-6"><div class="hero__text"><div class="label">冒险</div><h2>Fate / Stay Night：无限刀片作品</h2><p>经过30天的环球旅行……</p><a ><span>立即观看</span> <i class="fa fa-angle-right"></i></a></div></div></div></div><div class="hero__items set-bg" data-setbg="img/hero/hero-1.jpg"><div class="row"><div class="col-lg-6"><div class="hero__text"><div class="label">冒险</div><h2>Fate / Stay Night：无限刀片作品</h2><p>经过30天的环球旅行……</p><a ><span>立即观看</span> <i class="fa fa-angle-right"></i></a></div></div></div></div><div class="hero__items set-bg" data-setbg="img/hero/hero-1.jpg"><div class="row"><div class="col-lg-6"><div class="hero__text"><div class="label">冒险</div><h2>Fate / Stay Night：无限刀片作品</h2><p>经过30天的环球旅行……</p><a ><span>立即观看</span> <i class="fa fa-angle-right"></i></a></div></div></div></div></div></div></section><!-- Hero Section End --><!-- Product Section Begin --><section class="product spad"><div class="container"><div class="row"><div class="col-lg-8"><div class="trending__product"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><div class="section-title"><h4>现在趋势</h4></div></div><div class="col-lg-4 col-md-4 col-sm-4"><div class="btn__all"><a class="primary-btn">查看全部 <span class="arrow_right"></span></a></div></div></div><div class="row"><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-1.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >七大罪：众神之怒</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-2.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Gintama Film 2: Kanketsu-hen --Yorozuya yo Eien</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-3.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Shingeki no Kyojin Season 3 Part 2</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-4.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >钢之炼金术师：兄弟会</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-5.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >白鸟泽学园公园</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/trending/trend-6.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Code Geass：Hangyaku的鲁路修R2</a></h5></div></div></div></div></div><div class="popular__product"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><div class="section-title"><h4>热门节目</h4></div></div><div class="col-lg-4 col-md-4 col-sm-4"><div class="btn__all"><a class="primary-btn">查看全部 <span class="arrow_right"></span></a></div></div></div><div class="row"><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-1.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >千寻之神觉</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-2.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Kizumonogatari III: Reiket su-hen</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-3.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Shirogane Tamashii hen Kouhan sen</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-4.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >浪客剑心：明治剑阁罗曼丹</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-5.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Mushishi Zoku Shou 第二季</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/popular/popular-6.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >物语系列：第二季</a></h5></div></div></div></div></div><div class="recent__product"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><div class="section-title"><h4>最近添加的节目</h4></div></div><div class="col-lg-4 col-md-4 col-sm-4"><div class="btn__all"><a class="primary-btn">查看全部 <span class="arrow_right"></span></a></div></div></div><div class="row"><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-1.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >鬼冢老师</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-2.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >命运/留夜电影：天堂的感觉 - II. 丢失</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-3.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Mushishi Zoku Shou: 铃之雫</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-4.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >命运/零第二季</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-5.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Kizumonogatari II: Nekket su-hen</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/recent/recent-6.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >七大罪：众神之怒</a></h5></div></div></div></div></div><div class="live__product"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><div class="section-title"><h4>现场录制</h4></div></div><div class="col-lg-4 col-md-4 col-sm-4"><div class="btn__all"><a class="primary-btn">查看全部 <span class="arrow_right"></span></a></div></div></div><div class="row"><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-1.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >昭和元禄落语新宿</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-2.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Mushishi Zoku Shou 第二季</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-3.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Mushishi Zoku Shou: 铃之雫</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-4.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >七大罪：众神之怒</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-5.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >命运/留夜电影：天堂的感觉 - II. 丢失</a></h5></div></div></div><div class="col-lg-4 col-md-6 col-sm-6"><div class="product__item"><div class="product__item__pic set-bg" data-setbg="img/live/live-6.jpg"><div class="ep">18 / 18</div><div class="comment"><i class="fa fa-comments"></i> 11</div><div class="view"><i class="fa fa-eye"></i> 9141</div></div><div class="product__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >Kizumonogatari II：Nekketsu-hen</a></h5></div></div></div></div></div></div><div class="col-lg-4 col-md-6 col-sm-8"><div class="product__sidebar"><div class="product__sidebar__view"><div class="section-title"><h5>顶视图</h5></div><ul class="filter__controls"><li class="积极的" data-filter="*">日</li><li data-filter=".week">星期</li><li data-filter=".month">月</li><li data-filter=".years">年</li></ul><div class="filter__gallery"><div class="product__sidebar__view__item set-bg mix day years"data-setbg="img/sidebar/tv-1.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>博人：火影忍者的下一代</a></h5></div><div class="product__sidebar__view__item set-bg mix month week"data-setbg="img/sidebar/tv-2.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>七大罪：众神之怒</a></h5></div><div class="product__sidebar__view__item set-bg mix week years"data-setbg="img/sidebar/tv-3.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>刀剑神域黑道战</a></h5></div><div class="product__sidebar__view__item set-bg mix years month"data-setbg="img/sidebar/tv-4.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>Fate/stay night: Heaven's Feel I. 预兆之花</a></h5></div><div class="product__sidebar__view__item set-bg mix day"data-setbg="img/sidebar/tv-5.jpg"><div class="ep">18 / ?</div><div class="view"><i class="fa fa-eye"></i> 9141</div><h5><a>命运之夜无限之刃作品</a></h5></div></div></div><div class="product__sidebar__comment"><div class="section-title"><h5>New Comment</h5></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-1.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a >The Seven Deadly Sins: Wrath of the Gods</a></h5><span><i class="fa fa-eye"></i> 19.141 Viewes</span></div></div><div class="product__sidebar__comment"><div class="section-title"><h5>新评论</h5></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-1.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a>七大罪：众神之怒</a></h5><span><i class="fa fa-eye"></i> 9.141 次观看</span></div></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-2.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a>Shirogane Tamashii hen Kouhan sen</a></h5><span><i class="fa fa-eye"></i> 9.141 次观看</span></div></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-3.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a>Kizumonogatari III: Reiket su-hen</a></h5><span><i class="fa fa-eye"></i> 9.141 次观看</span></div></div><div class="product__sidebar__comment__item"><div class="product__sidebar__comment__item__pic"><img src="img/sidebar/comment-4.jpg" alt=""></div><div class="product__sidebar__comment__item__text"><ul><li>积极的</li><li>电影</li></ul><h5><a>物语系列：第二季</a></h5><span><i class="fa fa-eye"></i> 9.141 次观看</span></div></div></div>
</div>
</div>
</div>
</div>
</section>
<!-- Product Section End --><!-- Footer Section Begin -->
<footer class="footer"><div class="page-up"><a id="scrollToTopButton"><span class="arrow_carrot-up"></span></a></div><div class="container"><div class="row"><div class="col-lg-3"><div class="footer__logo"><a href="./index.html"><img src="img/logo.png" alt=""></a></div></div><div class="col-lg-6"><div class="footer__nav"><ul><li class="active"><a href="./index.html">主页</a></li><li><a href="./categories.html"> 类别</a></li><li><a href="./blog.html">我们的博客</a></li><li><a > 联系人</a></li></ul></div></div><div class="col-lg-3"><p>版权所有 © 保留所有权利 | 这个模板是用由Colorlib<i class="fa fa-heart" aria-hidden="true"></i> by <a target="_blank">Colorlib</a></p></div></div></div></footer><!-- Footer Section End --><!-- Search model Begin --><div class="search-model"><div class="h-100 d-flex align-items-center justify-content-center"><div class="search-close-switch"><i class="icon_close"></i></div><form class="search-model-form"><input type="text" id="search-input" placeholder="Search here....."></form></div>
</div>
<!-- Search model end --><!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/player.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script></body></html>2.CSS代码
h1 {font-size: 70px;
}h2 {font-size: 36px;
}h3 {font-size: 30px;
}h4 {font-size: 24px;
}h5 {font-size: 18px;
}h6 {font-size: 16px;
}p {font-size: 15px;font-family: "Mulish", sans-serif;color: #3d3d3d;font-weight: 400;line-height: 25px;margin: 0 0 15px 0;
}img {max-width: 100%;
}input:focus,
select:focus,
button:focus,
textarea:focus {outline: none;
}a:hover,
a:focus {text-decoration: none;outline: none;color: #ffffff;
}ul,
ol {padding: 0;margin: 0;
}/*---------------------Helper CSS
-----------------------*/.section-title {margin-bottom: 30px;
}.section-title h4,
.section-title h5 {color: #ffffff;font-weight: 600;line-height: 21px;text-transform: uppercase;padding-left: 20px;position: relative;font-family: "Oswald", sans-serif;
}.section-title h4:after,
.section-title h5:after {position: absolute;left: 0;top: -6px;height: 32px;width: 4px;background: #e53637;content: "";
}.set-bg {background-repeat: no-repeat;background-size: cover;background-position: top center;
}.spad {padding-top: 100px;padding-bottom: 100px;
}.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {color: #fff;
}/* buttons */.primary-btn {display: inline-block;font-size: 13px;font-weight: 700;text-transform: uppercase;color: #ffffff;letter-spacing: 2px;
}.primary-btn span {font-size: 18px;margin-left: 5px;position: relative;top: 3px;
}.site-btn {font-size: 13px;color: #ffffff;background: #e53637;font-weight: 700;border: none;}三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、精彩推荐
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)相关推荐
- HTML5期末大作业：电影影视网站设计——电影介绍(11页) 学生HTML个人网页作业作品下载 个人电影影视网页设计制作 大学生个人电影影视网站作业模板 简单个人电影影视
HTML5期末大作业:电影影视网站设计--电影介绍(11页) 学生HTML个人网页作业作品下载 个人电影影视网页设计制作 大学生个人电影影视网站作业模板 简单个人电影影视 常见网页设计作业题材有 个人 ...
- 23HTML5期末大作业：电影影视网站设计——电影介绍(11页) 学生HTML个人网页作业作品下载 个人电影影视网页设计制作 大学生个人电影影视网站作业模板 简单个人电影影视
HTML5期末大作业:电影影视网站设计--电影介绍(11页) 学生HTML个人网页作业作品下载 个人电影影视网页设计制作 大学生个人电影影视网站作业模板 简单个人电影影视 常见网页设计作业题材有 个人 ...
- HTML期末大作业:学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 dreamweaver简单个人网页制作...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
- 美食主题网页设计 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 dreamweaver简单个人网页制作
HTML5期末大作业--美食主题6页面带导航下拉菜单 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设计源码HTML ...
- 个人站点网页设计html,响应式网页设计的快速教程（适合个人站点）
做过wap站.做过siteApp.做过第三方,也做过独立APP,现在又做了个自适应的模板.所谓"响应式网页设计(Responsive Web Design)"也就是自适应,就是可以 ...
- 转自CSDNattilax的专栏 ：自适应网页设计 跟 响应式 设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...
- 响应式网页设计_响应式网页设计中的常用技术
响应式网页设计 在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验.和控制 ...
- 响应式网页设计_响应式网页设计–如何使网站在手机和平板电脑上看起来不错
响应式网页设计 In the rapidly evolving landscape of connected devices, responsive web design continues to b ...
- 响应式网页设计_响应式网页设计：我们从这里去哪里？
响应式网页设计 This article is part of a web development series from Microsoft. Thank you for supporting th ...
- html响应式布局是什么,什么是响应式网页设计？响应式布局的实现原理
概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
最新文章
- scala akka 修炼之路5(scala特质应用场景分析)
- Apriori算法、FP-Growth算法、顺序分析、PrefixSpan算法
- java 成绩 排名算法_Java计算成绩平均值和排名
- 学完了python能做什么-学完Python能做什么
- 电脑屏幕变黄如何调整_如何调整电脑屏幕比例
- python 2和Python3的常见区别及修改办法
- GestureDetector封装手势检測上下滑动
- BAT等大厂年薪30W+面试清单：JVM\MySQL\设计模式\分布式\微服务
- utf8编码在线转换html,utf8 gb2312编码在线转换工具
- 2020期中考试总结
- Promise优缺点
- win10便签常驻桌面_做备忘录，用win10自带的便笺工具就可以了，免费又方便
- Windows官网直接下载正版操作系统方法
- 完整的保存onetab的书签信息
- 【夜读】2022年最后10天，致自己！
- C++加载PNG图片
- 拉灌电流和短路电流测量
- 杭州职业技术学院计算机教研室主任,课题名称杭州地区农村小学教师运用现代教育技术现状调查和对策的研究.doc...
- VS 2017生成exe（msi）文件
- 爆炸的符卡洋洋洒洒题解