-
静态web页面网站课程设计
一、简介
基于html5和css3完成包括索引页、导航页、详情页等5个页面，可进行后续扩展与修改。使用了mdb框架的栅格系统，页面开发更加方便。
二、索引页
<body> <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> <div class="mask rgba-gradient d-flex justify-content-center align-items-center"> <div class="container px-md-3 px-sm-0"> <div class="row wow fadeIn"> <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> div> div> div> header> <main class="mt-5"> main> <footer> footer> <script type="text/javascript" src="js/jquery.min.js">script> <script type="text/javascript" src="js/popper.min.js">script> <script type="text/javascript" src="js/bootstrap.min.js">script> <script type="text/javascript" src="js/mdb.min.js">script> <script type="text/javascript">script> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
三、导航页
<header> <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar mb-3 smooth-scroll"> <div class="container"> <h2 class="text-white">光影客h2> <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> <div class="collapse navbar-collapse" id="basicExampleNav"> <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> <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> div> nav> header>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
四、详情页
<div class="carousel-inner mt-5" role="listbox"> <div class="carousel-item active"> <div class="col-lg-4 col-md-12"> <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> <div class="card-body pb-2"> <h4 class="font-weight-bold my-3">冯小刚h4> <p class="grey-text">导演 p> div> div> div> <div class="col-md-6 col-lg-4"> <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> <div class="card-body pb-2"> <h4 class="font-weight-bold my-3">葛优h4> <p class="grey-text">饰 秦奋 p> div> div> div> <div class="col-lg-4 col-md-6"> <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"> <div class="mask rgba-white-slight">div> a> <div class="card-body pb-2"> <h4 class="font-weight-bold my-3">舒淇h4> <p class="grey-text">饰 梁笑笑 p> div> div> div> div> <div class="carousel-item"> <div class="col-lg-6 col-md-6"> <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> <div class="card-body pb-2"> <h4 class="font-weight-bold my-3">邬逸聪h4> <p class="grey-text">饰 邬桑 p> div> div> div> <div class="col-lg-6 col-md-6"> <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> <div class="card-body pb-2"> <h4 class="font-weight-bold my-3">范伟h4> <p class="grey-text">饰 范先生 p> div> div> div> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
微信扫码获取
-
相关阅读:
java计算机毕业设计社区人员管理系统源码+mysql数据库+系统+lw文档+部署
力扣hot100——第4天：19删除链表的倒数第N个节点、20有效的括号、21合并两个有序链表
IPFoxy：什么是数据中心代理IP？好用吗？
一站式在线订货功能详解，B2B电子商务交易平台高效解决企业订单管理痛点
XmlDocument.SelectNodes 不起作用
servlet
Kubernetes 节点异常检测
【RV1103】RTL8723bs (SD卡形状模块)驱动开发
Python学习DAY14_文档处理_Excel
剑指Offer04. 二维数组中的查找【中等】
- 原文地址：https://blog.csdn.net/zmhDD/article/details/126138978