HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)_要求: (1)请将所提供的picturecarousel.html文件复制到自己所创建的项目下,并根-程序员宅基地
技术标签： 美食 css 前端 网页设计 html bootstrap javascript HTML网页制作
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
【作者主页——获取更多优质源码】
【学习资料/简历模板/面试资料/ 网站设计与制作】
【web前端期末大作业——毕设项目精品实战案例】
一、网页介绍
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.
以上内容技术相关问题欢迎一起交流学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
oracle 12c 集群安装后的检查_12c查看crs状态-程序员宅基地
文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下：http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态：[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态
解决jupyter notebook无法找到虚拟环境的问题_jupyter没有pytorch环境-程序员宅基地
文章浏览阅读1.3w次，点赞45次，收藏99次。我个人用的是anaconda3的一个python集成环境，自带jupyter notebook，但在我打开jupyter notebook界面后，却找不到对应的虚拟环境，原来是jupyter notebook只是通用于下载anaconda时自带的环境，其他环境要想使用必须手动下载一些库：1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境
国内安装scoop的保姆教程_scoop-cn-程序员宅基地
文章浏览阅读5.2k次，点赞19次，收藏28次。选择scoop纯属意外，也是无奈，因为电脑用户被锁了管理员权限，所有exe安装程序都无法安装，只可以用绿色软件，最后被我发现scoop，省去了到处下载XXX绿色版的烦恼，当然scoop里需要管理员权限的软件也跟我无缘了（譬如everything）。推荐添加dorado这个bucket镜像，里面很多中文软件，但是部分国外的软件下载地址在github，可能无法下载。以上两个是官方bucket的国内镜像，所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn
Element ui colorpicker在Vue中的使用_vue el-color-picker-程序员宅基地
文章浏览阅读4.5k次，点赞2次，收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了，例如：这里的:sty..._vue el-color-picker
迅为iTOP-4412精英版之烧写内核移植后的镜像_exynos 4412 刷机-程序员宅基地
文章浏览阅读640次。基于芯片日益增长的问题，所以内核开发者们引入了新的方法，就是在内核中只保留函数，而数据则不包含，由用户（应用程序员）自己把数据按照规定的格式编写，并放在约定的地方，为了不占用过多的内存，还要求数据以根精简的方式编写。boot启动时，传参给内核，告诉内核设备树文件和kernel的位置，内核启动时根据地址去找到设备树文件，再利用专用的编译器去反编译dtb文件，将dtb还原成数据结构，以供驱动的函数去调用。firmware是三星的一个固件的设备信息，因为找不到固件，所以内核启动不成功。_exynos 4412 刷机
Linux系统配置jdk_linux配置jdk-程序员宅基地
文章浏览阅读2w次，点赞24次，收藏42次。Linux系统配置jdkLinux学习教程，Linux入门教程（超详细）_linux配置jdk
随便推点
matlab(4)：特殊符号的输入_matlab微米怎么输入-程序员宅基地
文章浏览阅读3.3k次，点赞5次，收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图：_matlab微米怎么输入
C语言程序设计-文件(打开与关闭、顺序、二进制读写)-程序员宅基地
文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件，可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中，对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数，而关闭则使用fclose函数。在C语言中，可以使用fread和fwrite函数进行二进制读写。 Biaoge 于2024-03-09 23:51发布 阅读量：7 ️文章类型：【 C语言程序设计 】在C语言中，用于打开文件的函数是____，用于关闭文件的函数是____。
Touchdesigner自学笔记之三_touchdesigner怎么让一个模型跟着鼠标移动-程序员宅基地
文章浏览阅读3.4k次，点赞2次，收藏13次。跟随鼠标移动的粒子以grid（SOP）为partical（SOP）的资源模板，调整后连接【Geo组合+point spirit（MAT)】，在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in（CHOP)鼠标位置到metaball的坐标，实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动
【附源码】基于java的校园停车场管理系统的设计与实现61m0e9计算机毕设SSM_基于java技术的停车场管理系统实现与设计-程序员宅基地
文章浏览阅读178次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计
Android系统播放器MediaPlayer源码分析_android多媒体播放源码分析 时序图-程序员宅基地
文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多，会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析，后面会慢慢更新。另外，博客只作为自己学习记录的一种方式，对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图
java 数据结构与算法 ——快速排序法-程序员宅基地
文章浏览阅读2.4k次，点赞41次，收藏13次。java 数据结构与算法 ——快速排序法_快速排序法