HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)
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>
<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>
<div id="preloder">
<div class="loader">div>
div>
<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>
<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>
<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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
div>
<div class="product__item__text">
<ul>
<li>积极的li>
<li>电影li>
ul>
<h5><a >Gintama Film 2: Kanketsu-hen --Yorozuya yo Eiena>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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
div>
<div class="product__item__text">
<ul>
<li>积极的li>
<li>电影li>
ul>
<h5><a >Shingeki no Kyojin Season 3 Part 2a>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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
div>
<div class="product__item__text">
<ul>
<li>积极的li>
<li>电影li>
ul>
<h5><a >Code Geass：Hangyaku的鲁路修R2a>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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
div>
<div class="product__item__text">
<ul>
<li>积极的li>
<li>电影li>
ul>
<h5><a >Kizumonogatari III: Reiket su-hena>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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
div>
<div class="product__item__text">
<ul>
<li>积极的li>
<li>电影li>
ul>
<h5><a >Shirogane Tamashii hen Kouhan sena>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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
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 / 18div>
<div class="comment"><i class="fa fa-comments">i> 11div>
<div class="view"><i class="fa fa-eye">i> 9141div>
div>