65.html+css+js网页设计实例/“摄影”主题介绍/web前端期末大作业/

仙女网页设计

已于 2024-04-15 03:16:43 修改

阅读量529

点赞数 12

分类专栏： Web网页设计实例文章标签：前端 html css3 课程设计 javascript jquery html5

于 2024-04-06 18:16:36 首次发布

本文链接：https://blog.csdn.net/A240307/article/details/137433954

版权

Web网页设计实例专栏收录该内容

135 篇文章 0 订阅

订阅专栏

一、前言

本实例为响应式摄影主题网页，应用html+css+js，包括图片轮翻效果、视频、二级菜单、留言表单、搜索等，供大家参考。网页定制、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Photomedia</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/slicknav.css">
<link rel="stylesheet" href="css/style.css">

</head>

<body>

<header>
<div class="header-area ">
<div class="header_top">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-4 col-md-4 d-none d-md-block">
<div class="header_links ">
<ul>
<li><a> <i class="fa fa-facebook"></i> </a></li>
<li><a class="twiter" > <i class="fa fa-twitter"></i> </a></li>
<li><a class="insta"> <i class="fa fa-instagram"></i> </a></li>
</ul>
</div>
</div>
<div class="col-xl-4 col-md-4">
<div class="logo">
<a href="index.html">
<img src="img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-xl-4 col-md-4 d-none d-md-block">
<div class="login_resiter">
<p><a ><i class="flaticon-user"></i>登录</a> | <a >反抗者</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="sticky-header" class="main-header-area white-bg">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-7 col-lg-7">
<div class="main-menu d-none d-lg-block">
<nav>
<ul id="navigation">
<li><a href="index.html">家</a></li>
<li><a href="category.html">类别</a></li>
<li><a class="active" href="about.html">关于</a></li>
<li><a >页 <i class="ti-angle-down"></i></a>
<ul class="submenu">
<li><a href="elements.html">元素</a></li>
<li><a href="single-blog.html">博客</a></li>
</ul>
</li>
<li><a href="contact.html">接触</a></li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-5 col-lg-5">
<div class="get_serch">
<a id="search_1" href="javascript:void(0)"><i class="ti-search"></i></a>
</div>
</div>
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
<div class="search_input" id="search_input_box">
<div class="container ">
<form class="d-flex justify-content-between search-inner">
<input type="text" class="form-control" id="search_input" placeholder="输入地址">
<button type="submit" class="btn"></button>
<span class="ti-close" id="close_search" title="Close Search"></span>
</form>
</div>
</div>
</div>
</div>
</div>
</header>

<div class="welcome_protomedia">
<div class="container">
<div class="row">
<div class="col-xl-6 col-md-6">
<h3>欢迎来到摄影<br>
摄影博客</h3>
</div>
<div class="col-xl-6 col-md-6">
<div class="add_here">
<a >
<img src="img/add/add.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>

<div class="photographi_area">
<div class="container">
<div class="row">
<div class="col-xl-6 col-md-6">
<div class="single_photography photography_bg_1">
<div class="info">
<div class="info_inner">
<h3><a >基本摄影：后退 <br>
对焦</a></h3>
<div class="date_catagory d-flex align-items-center justify-content-between">
<span>12 jun 2019</span>
<span class="catagory">灯房</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-md-6">
<div class="single_photography photography_bg_2">
<div class="info">
<div class="info_inner">
<h3><a >智囊团照片回顾 <br> 肩</a></h3>
<div class="date_catagory d-flex align-items-center justify-content-between">
<span>12 jun 2019</span>
<span class="catagory">灯房</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="photography_slider_area">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="photoslider_active owl-carousel">
<div class="single_photography">
<img src="img/photography/single-1.jpg" alt="">
<div class="photo_title">
<h4>摄影</h4>
</div>
</div>
<div class="single_photography">
<img src="img/photography/single-2.jpg" alt="">
<div class="photo_title">
<h4>旅游拍摄</h4>
</div>
</div>
<div class="single_photography">
<img src="img/photography/single-3.jpg" alt="">
<div class="photo_title">
<h4>照片商城</h4>
</div>
</div>
<div class="single_photography">
<img src="img/photography/single-4.jpg" alt="">
<div class="photo_title">
<h4>镜片</h4>
</div>
</div>
<div class="single_photography">
<img src="img/photography/single-1.jpg" alt="">
<div class="photo_title">
<h4>摄影</h4>
</div>
</div>
<div class="single_photography">
<img src="img/photography/single-2.jpg" alt="">
<div class="photo_title">
<h4>旅行拍摄</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="most_recent_blog">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="section_title mb-33">
<h3>最近的</h3>
</div>
</div>
<div class="col-xl-8 col-md-8">
<div class="row">
<div class="col-xl-6 col-md-6">
<div class="single_blog">
<div class="blog_thumb">
<a >
<img src="img/most_recent/2.jpg" alt="">
</a>
</div>
<div class="blog_meta">
<p><a>摄影 I 2019 年 5 月 24 日</a></p>
<h3><a >
格陵兰 <br>
荒凉之美
</a></h3>
</div>
</div>
</div>
<div class="col-xl-6 col-md-6">
<div class="single_blog">
<div class="blog_thumb">
<a >
<img src="img/most_recent/1.jpg" alt="">
</a>
</div>
<div class="blog_meta">
<p><a >摄影 I 2019 年 5 月 24 日</a></p>
<h3><a >
失去只是一个四个字母的 <br>
词
</a></h3>
</div>
</div>
</div>
<div class="col-xl-6 col-md-6">
<div class="single_blog">
<div class="blog_thumb">
<a >
<img src="img/most_recent/3.jpg" alt="">
</a>
</div>
<div class="blog_meta">
<p><a>摄影 I 2019 年 5 月 24 日</a></p>
<h3><a >
突破摄影<br>
滤镜的旅行拍摄
</a></h3>
</div>
</div>
</div>
<div class="col-xl-6 col-md-6">
<div class="single_blog">
<div class="blog_thumb">
<a >
<img src="img/most_recent/4.jpg" alt="">
</a>
</div>
<div class="blog_meta">
<p><a >摄影 I 2019 年 5 月 24 日</a></p>
<h3><a>
Tank 发布新的照片 <br>
保护概念
</a></h3>
</div>
</div>
</div>
<div class="col-xl-6 col-md-6">
<div class="single_blog">
<div class="blog_thumb">
<a >
<img src="img/most_recent/5.jpg" alt="">
</a>
</div>
<div class="blog_meta">
<p><a>摄影 I 2019 年 5 月 24 日</a></p>
<h3><a>
格陵兰 <br> 荒凉之美
</a></h3>
</div>
</div>
</div>
<div class="col-xl-6 col-md-6">
<div class="single_blog">
<div class="blog_thumb">
<a >
<img src="img/most_recent/6.jpg" alt="">
</a>
</div>
<div class="blog_meta">
<p><a >摄影 I 2019 年 5 月 24 日</a></p>
<h3><a >
失去只是一个四个字母的 <br> 词
</a></h3>
</div>
</div>
</div>
<div class="col-xl-12">
<div class="btn_area text-center">
<a class="boxed-btn">阅读更多</a>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4">
<div class="blog_right_side">
<div class="section_title mb-33">
<h3>跟着我们</h3>
</div>
<div class="foollow_links">
<ul class="d-flex align-items-center justify-content-between">
<li>
<a >
<i class="fa fa-facebook"></i>
<h2>142K</h2>
<p>追随者</p>
</a>
</li>
<li>
<a class="insta" >
<i class="fa fa-instagram"></i>
<h2>142K</h2>
<p>追随者</p>
</a>
</li>
<li>
<a class="twitter">
<i class="fa fa-twitter"></i>
<h2>142K</h2>
<p>追随者</p>
</a>
</li>
</ul>
</div>
<div class="add_here text-center">
<a >
<img src="img/most_recent/googleAdd.jpg" alt="">
</a>
</div>
<div class="section_title mb-33">
<h3>标签</h3>
</div>
<div class="tags">
<ul>
<li><a >相机</a></li>
<li><a >摄影</a></li>
<li><a>镜片</a></li>
<li><a >博客</a></li>
<li><a >杂志</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="photo_gallery">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="section_title mb-33">
<h3>照片库</h3>
</div>
</div>
<div class="col-xl-12">
<div class="photo_gallery_active owl-carousel">
<div class="single_photo_gallery gallery_bg_1">
<div class="photo_caption">
<h3>旅行露营</h3>
</div>
</div>
<div class="single_photo_gallery gallery_bg_2">
<div class="photo_caption">
<h3>旅行露营</h3>
</div>
</div>
<div class="single_photo_gallery gallery_bg_1">
<div class="photo_caption">
<h3>旅行露营</h3>
</div>
</div>
<div class="single_photo_gallery gallery_bg_2">
<div class="photo_caption">
<h3>旅行露营</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="subscribe_newsletter">
<div class="container">
<div class="black_bg">
<div class="row">
<div class="col-xl-6">
<div class="newsletter_text">
<h3>

订阅通讯

</h3>
<p>获取我们的时事通讯和新文章的更新</p>
</div>
</div>
<div class="col-xl-6">
<div class="newsform">
<form >
<input type="email" placeholder="输入你的电子邮箱">
<button type="submit">报名</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="instagram_media_area">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="instagram_title text-center">
<i class="fa fa-instagram"></i>
<h3>@摄影</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-md-3">
<div class="single_instragram">
<img src="img/instagram/1.png" alt="">
</div>
</div>
<div class="col-xl-3 col-md-3">
<div class="single_instragram">
<img src="img/instagram/2.png" alt="">
</div>
</div>
<div class="col-xl-3 col-md-3">
<div class="single_instragram">
<img src="img/instagram/3.png" alt="">
</div>
</div>
<div class="col-xl-3 col-md-3">
<div class="single_instragram">
<img src="img/instagram/4.png" alt="">
</div>
</div>
</div>
</div>
</div>

<footer class="footer">
<div class="footer_area">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="footer_info text-center">
<div class="footer_logo text-center">
<a >
<img src="img/footer-logo.png" alt="">
</a>
</div>
<p class="footer_text">

探索摄影媒体博客，丰富您的摄影知识

</p>
<div class="header_links">
<ul>
<li><a > <i class="fa fa-facebook"></i> </a></li>
<li><a class="twiter"> <i class="fa fa-twitter"></i> </a></li>
<li><a class="insta" > <i class="fa fa-instagram"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer_bottom ">
<div class="container">
<div class="footer_border">
<div class="row">
<div class="col-xl-12">
<div class="footer_links text-center">
<ul>
<li><a href="index.html">家</a></li>
<li><a href="catagory.html">类别</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="contact.html">接触</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="copyright_text text-center">
<p>
版权所有 ©<script>document.write(new Date().getFullYear());</script>
</p>
</div>
</div>
</footer>

<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/ajax-form.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/scrollIt.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/nice-select.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/plugins.js"></script>

<script src="js/contact.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/mail-script.js"></script>

</body>

</html>

......

2.CSS

代码如下（节选示例）：

:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*,
::after,
::before {
box-sizing: border-box
}

html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent
}

@-ms-viewport {
width: device-width
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff
}

[tabindex="-1"]:focus {
outline: 0!important
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: .5rem
}

p {
margin-top: 0;
margin-bottom: 1rem
}

abbr[data-original-title],
abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0
}

address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit
}

dl,
ol,
ul {
margin-top: 0;
margin-bottom: 1rem
}

ol ol,
ol ul,
ul ol,
ul ul {
margin-bottom: 0
}

dt {
font-weight: 700
}

dd {
margin-bottom: .5rem;
margin-left: 0
}

blockquote {
margin: 0 0 1rem
}

dfn {
font-style: italic
}

b,
strong {
font-weight: bolder
}

small {
font-size: 80%
}

sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}

sub {
bottom: -.25em
}

sup {
top: -.5em
}

a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects
}

a:hover {
color: #0056b3;
text-decoration: underline
}

a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none
}

a:not([href]):not([tabindex]):focus {
outline: 0
}

code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}

pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar
}

figure {
margin: 0 0 1rem
}

img {
vertical-align: middle;
border-style: none
}

svg:not(:root) {
overflow: hidden
}

table {
border-collapse: collapse
}

caption {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom
}

th {
text-align: inherit
}

label {
display: inline-block;
margin-bottom: .5rem
}

button {
border-radius: 0
}

button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color
}

button,
input,
optgroup,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit
}

button,
input {
overflow: visible
}

button,
select {
text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
-webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
padding: 0;
border-style: none
}

input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
padding: 0
}

input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time] {
-webkit-appearance: listbox
}

textarea {
overflow: auto;
resize: vertical
}

fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0
}

legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal
}

progress {
vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}

[type=search] {
outline-offset: -2px;
-webkit-appearance: none
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}

::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button
}

output {
display: inline-block
}

summary {
display: list-item;
cursor: pointer
}

template {
display: none
}

[hidden] {
display: none!important
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: .5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
color: inherit
}

.h1,
h1 {
font-size: 2.5rem
}

.h2,
h2 {
font-size: 2rem
}

.h3,
h3 {
font-size: 1.75rem
}

.h4,
h4 {
font-size: 1.5rem
}

.h5,
h5 {
font-size: 1.25rem
}

.h6,
h6 {
font-size: 1rem
}

.lead {
font-size: 1.25rem;
font-weight: 300
}

.display-1 {
font-size: 6rem;
font-weight: 300;
line-height: 1.2
}

.display-2 {
font-size: 5.5rem;
font-weight: 300;
line-height: 1.2
}

.display-3 {
font-size: 4.5rem;
font-weight: 300;
line-height: 1.2
}

.display-4 {
font-size: 3.5rem;
font-weight: 300;
line-height: 1.2
}

hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, .1)
}

.small,
small {
font-size: 80%;
font-weight: 400
}

.mark,
mark {
padding: .2em;
background-color: #fcf8e3
}

.list-unstyled {
padding-left: 0;
list-style: none
}

.list-inline {
padding-left: 0;
list-style: none
}

.list-inline-item {
display: inline-block
}

.list-inline-item:not(:last-child) {
margin-right: .5rem
}

.initialism {
font-size: 90%;
text-transform: uppercase
}

.blockquote {
margin-bottom: 1rem;
font-size: 1.25rem
}

.blockquote-footer {
display: block;
font-size: 80%;
color: #6c757d
}

.blockquote-footer::before {
content: "\2014 \00A0"
}

.img-fluid {
max-width: 100%;
height: auto
}

.img-thumbnail {
padding: .25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: .25rem;
max-width: 100%;
height: auto
}

.figure {
display: inline-block
}

.figure-img {
margin-bottom: .5rem;
line-height: 1
}

.figure-caption {
font-size: 90%;
color: #6c757d
}

code,
kbd,
pre,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

code {
font-size: 87.5%;
color: #e83e8c;
word-break: break-word
}

a>code {
color: inherit
}

kbd {
padding: .2rem .4rem;
font-size: 87.5%;
color: #fff;
background-color: #212529;
border-radius: .2rem
}

kbd kbd {
padding: 0;
font-size: 100%;
font-weight: 700
}

pre {
display: block;
font-size: 87.5%;
color: #212529
}

pre code {
font-size: inherit;
color: inherit;
word-break: normal
}

.pre-scrollable {
max-height: 340px;
overflow-y: scroll
}

.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}

@media (min-width:576px) {
.container {
max-width: 540px
}
}

@media (min-width:768px) {
.container {
max-width: 720px
}
}

@media (min-width:992px) {
.container {
max-width: 960px
}
}

@media (min-width:1200px) {
.container {
max-width: 1140px
}
}

.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}

.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px
}

.no-gutters {
margin-right: 0;
margin-left: 0
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
padding-right: 0;
padding-left: 0
}

......

3.JS

代码如下（节选示例）：

......

仙女网页设计

关注

12
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
65.html+css+js网页设计实例/“摄影”主题介绍/web前端期末大作业/

本实例为响应式摄影主题网页，应用html+css+js，包括图片轮翻效果、视频、二级菜单、留言表单、搜索等，供大家参考。网页定制、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
复制链接

扫一扫