28.响应式时尚摄影作品网页 Web前端网页制作 大学生期末大作业 html+css+js

目录

 一、前言  

二、网页文件

 三、网页效果

四、代码展示

1.HTML

2.CSS

3.JS

五 、更多推荐


 一、前言  

时尚大气的摄影作品网页实例,应用html+css+js,自适应响应式网页,图片轮翻效果,适用于个人博客网页、大学网页课程作业的设计等,供大家参考。响应式布局可以根据不同的设备屏幕大小自动调整页面布局,提高用户体验;

本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改;支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。


二、网页文件


 三、网页效果

以下为网页正文(节选示例):


四、代码展示

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. -->
版权所有 &copy;<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)
})

......


五 、更多推荐

您的支持是我创作的动力!关注作者,点赞收藏博文,获取更多源码,3Q!

Web前端网页制作、完整网页源码、期末大作业模板案例等技术内容,有兴趣的联系我交流学习!

更多优质博客文章、网页模板点击以下链接查阅:仙女网页设计-CSDN博客