一、简介
基于html5和css3完成包括索引页、导航页、详情页等5个页面，可进行后续扩展与修改。使用了mdb框架的栅格系统，页面开发更加方便。
二、索引页
<body>
<!-- Start your project here-->
<!--Main Navigation-->
<header>
<div class="view" id="v-intro">
<video class="video-intro" poster="" playsinline autoplay muted loop>
<source src="img/index.jpg" type="video/mp4">
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container px-md-3 px-sm-0">
<!--Grid row-->
<div class="row wow fadeIn">
<!--Grid column-->
<div class="col-md-12 mb-4 white-text text-center wow fadeIn">
<h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">光 与 影</h3>
<hr class="hr-light my-4 w-75">
<h4 class="subtext-header mt-2 mb-4">摆脱时间与空间的限制，在无边想象中追求思想的进步</h4>
<a href="Navbr.html" class="btn btn-rounded btn-outline-white">
<i class="fas fa-film "></i> 即刻开始
</a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Content -->
</div>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main class="mt-5">
</main>
<!--Main layout-->
<!--Footer-->
<footer>
</footer>
<!--Footer-->
<!-- End your project here-->
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript"></script>
</body>
三、导航页
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar mb-3 smooth-scroll">
<div class="container">
<!-- Navbar brand -->
<h2 class="text-white">光影客</h2>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto ">
<li class="nav-item">
<a class="nav-link" href="#喜剧">喜剧</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#经典">经典</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#关于">关于我们</a>
</li>
</ul>
<!-- Links -->
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link" href="#contact"><i class="fab fa-connectdevelop"></i>联系方式</a>
</li>
</ul>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
</header>
四、详情页
<div class="carousel-inner mt-5" role="listbox">
<!-- Grid column -->
<div class="carousel-item active">
<div class="col-lg-4 col-md-12">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p45667.webp" width="100%" class="img-fluid"
alt="Sample project image">
<a href="https://baike.baidu.com/item/%E5%86%AF%E5%B0%8F%E5%88%9A/113653?fr=aladdin" target="_blank">
<div class="mask rgba-white-slight"></div>
</a>
<!--Excerpt-->
<div class="card-body pb-2">
<h4 class="font-weight-bold my-3">冯小刚</h4>
<p class="grey-text">导演
</p>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-4">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p46.webp" width="100%" class="img-fluid"
alt="Sample project image">
<a href="https://baike.baidu.com/item/%E8%91%9B%E4%BC%98/335918?fr=aladdin" target="_blank">
<div class="mask rgba-white-slight"></div>
</a>
<!--Excerpt-->
<div class="card-body pb-2">
<h4 class="font-weight-bold my-3">葛优</h4>
<p class="grey-text">饰 秦奋
</p>
</div>
</div>
</div>
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p17512.webp" width="100%" class="img-fluid"
alt="Sample project image">
<a href=https://baike.baidu.com/item/%E8%88%92%E6%B7%87/316282?fr=aladdin" target="_blank">
<div class="mask rgba-white-slight"></div>
</a>
<!--Excerpt-->
<div class="card-body pb-2">
<h4 class="font-weight-bold my-3">舒淇</h4>
<p class="grey-text">饰 梁笑笑
</p>
</div>
</div>
</div>
<!-- Grid column -->
</div>
<div class="carousel-item">
<div class="col-lg-6 col-md-6">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13135.webp" width="100%" class="img-fluid"
alt="Sample project image">
<a href="https://baike.baidu.com/item/%E9%82%AC%E9%80%B8%E8%81%AA/144202?fr=aladdin" target="_blank">
<div class="mask rgba-white-slight"></div>
</a>
<!--Excerpt-->
<div class="card-body pb-2">
<h4 class="font-weight-bold my-3">邬逸聪</h4>
<p class="grey-text">饰 邬桑
</p>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-6 col-md-6">
<!--Featured image-->
<div class="view overlay rounded z-depth-1">
<img src="https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1511362485.44.webp" width="100%" class="img-fluid"
alt="Sample project image">
<a href="https://baike.baidu.com/item/%E8%8C%83%E4%BC%9F/10184?fr=aladdin" target="_blank">
<div class="mask rgba-white-slight"></div>
</a>
<!--Excerpt-->
<div class="card-body pb-2">
<h4 class="font-weight-bold my-3">范伟</h4>
<p class="grey-text">饰 范先生
</p>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
</div>
</div>
微信扫码获取
版权声明：本文为zmhDD原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。