89. html网页制作 时尚的摄影作品响应式网页实例 web前端期末作业 html+css+js
一、前言
时尚大气的摄影作品网页实例，应用html+css+js，自适应响应式网页，图片轮翻效果，适用于个人博客网页、大学网页课程作业的设计等，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<!doctype html>
<html class="no-js" lang="zxx">
<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="manifest" href="site.webmanifest"> -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Place favicon.ico in the root directory -->
<!-- CSS here -->
<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">
<!-- <link rel="stylesheet" href="css/responsive.css"> -->
</head>
<body>
<!-- header-start -->
<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>
<!-- header-end -->
<!-- welcome_protomedia_start -->
<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>
<!-- welcome_protomedia_end -->
<!-- photographi_area_start -->
<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 2023</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 2023</span>
<span class="catagory">灯房</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- photographi_area_end -->
<!-- photography_slider_area_start -->
<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>
<!-- photography_slider_area_end -->
<!-- most_recent_blog_start -->
<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 2023 年 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 2023 年 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 2023 年 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 2023 年 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 2023 年 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 2023 年 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>
<!-- most_recent_blog_end -->
<!-- photo_gallery_start -->
<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>
<!-- photo_gallery_end -->
<!-- subscribe_newsletter_start -->
<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>
<!-- subscribe_newsletter_end -->
<!-- instagram_media_area_start -->
<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>
<!-- instagram_media_area_end -->
<!-- footer_start -->
<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><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
版权所有 ©<script>document.write(new Date().getFullYear());</script>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</footer>
<!-- footer_end -->
<!-- JS here -->
<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>
<!--contact js-->
<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>
<script src="js/main.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
}
......
3.JS
代码如下（节选示例）：
$(document).ready(function(){
(function($) {
"use strict";
jQuery.validator.addMethod('answercheck', function (value, element) {
return this.optional(element) || /^\bcat\b$/.test(value)
}, "type the correct answer -_-");
// validate contactForm form
$(function() {
$('#contactForm').validate({
rules: {
name: {
required: true,
minlength: 2
},
subject: {
required: true,
minlength: 4
},
number: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 20
}
},
messages: {
name: {
required: "come on, you have a name, don't you?",
minlength: "your name must consist of at least 2 characters"
},
subject: {
required: "come on, you have a subject, don't you?",
minlength: "your subject must consist of at least 4 characters"
},
number: {
required: "come on, you have a number, don't you?",
minlength: "your Number must consist of at least 5 characters"
},
email: {
required: "no email, no message"
},
message: {
required: "um...yea, you have to write something to send this form.",
minlength: "thats all? really?"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"contact_process.php",
success: function() {
$('#contactForm :input').attr('disabled', 'disabled');
$('#contactForm').fadeTo( "slow", 1, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#success').fadeIn()
$('.modal').modal('hide');
$('#success').modal('show');
})
},
error: function() {
$('#contactForm').fadeTo( "slow", 1, function() {
$('#error').fadeIn()
$('.modal').modal('hide');
$('#error').modal('show');
})
}
})
}
})
})
})(jQuery)
})
......