1. 编程号首页

web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】

编程小号 • • 未分类

web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有

这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的酷炫响应式网络科技公司模网页设计制作，画面精明，非常适合初学者学习使用。

 网页实现截图：

网站首页  ​web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】

关于我们

汽车制造公司以人性化为原点的匠人理念，在细微之处也需考虑到使用者体验

在物与 人的每一个接触点追求形之极致，细微之处却有严苛标准。

汽车制造公司深谙用户体验之所在，以消费者五感为匠人五感，想你所想，察你所不察。

在严格的品质把关过程中，修行敏锐五感。

web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】

新闻资讯：

什么是伪静态？伪静态有何作用?哪种好？伪静态是相对真实静态来讲的，真实静态会生成一个html或htm后缀的文件，访客能够访问到真实存在的静态页面，而伪静态则没有生成实体静态页面文件，而仅仅是以.html一类的静态页面…

web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】

产品展示：

​web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】

客户案例：

web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】

 联系我们：

web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】

项目组织结构：

web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】 ​> ## 主要源码展示：

index.html

<head>
scalable=0, minimal-ui">
    <meta name="generator" content="dede58 5.3.9" data-variable="" />
    <title>HTML5高端大气响应式网络科技公司网站模板 - </title>
    <link rel="stylesheet" href="css/3af1bf1fa0061831.css">
</head>
<body>
    <nav class="navbar navbar-default met-nav " role="navigation">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle hamburger collapsed" data-target="#example-navbar-default-collapse" data-toggle="collapse">
                            <span class="sr-only">
                                Toggle navigation
                            </span>
                            <span class="hamburger-bar">
                            </span>
                        </button>
                        </div>
                    </a>
                </div>
                <div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-default-collapse">
                    <ul class="nav navbar-nav navbar-right navlist">
                        <li>
                            <a href="index.html" title="网站首页" class="link">
                                    网站首页
                                </a>
                        </li>
                        <li class="dropdown margin-left-20">
                            <a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="about.html" aria-expanded="false" role="button" title="关于我们">
                                    关于我们
                                    <i class="fa fa-angle-down small">
                                    </i>
                                </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
                                <li>
                                    <a href="gaikuang.html" title="公司概况">
                                            公司概况
                                        </a>
                                </li>
                                <li>
                                    <a href="wenhua.html" title="企业文化">
                                            企业文化
                                        </a>
                                </li>
                                <li>
                                    <a href="fankui.html" title="在线反馈">
                                            在线反馈
                                        </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown margin-left-20">
                            <a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="news.html" aria-expanded="false" role="button" title="新闻资讯">
                                    新闻资讯
                                    <i class="fa fa-angle-down small">
                                    </i>
                                </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
                                <li>
                                    <a href="#" title="优化推广">
                                            优化推广
                                        </a>
                                </li>
                                <li>
                                    <a href="#" title="公司动态">
                                            公司动态
                                        </a>
                                </li>
                                <li>
                                    <a href="#" title="建站经验">
                                            建站经验
                                        </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown margin-left-20">
                            <a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="product.html" aria-expanded="false" role="button" title="产品展示">
                                    产品展示
                                    <i class="fa fa-angle-down small">
                                    </i>
                                </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
                                <li>
                                    <a href="#" title="营销型网站">
                                            营销型网站
                                        </a>
                                </li>
                                <li>
                                    <a href="#" title="响应式网站">
                                            响应式网站
                                        </a>
                                </li>
                                <li>
                                    <a href="#" title="电子商务型网站">
                                            电子商务型网站
                                        </a>
                                </li>
                                <li>
                                    <a href="#" title="外贸型网站">
                                            外贸型网站
                                        </a>
                                </li>
                                <li>
                                    <a href="#" title="企业型网站">
                                            企业型网站
                                        </a>
                                </li>
                            </ul>
                        </li>
                        <li class="margin-left-20">
                            <a href="case.html" title="客户案例" class="link ">
                                    客户案例
                                </a>
                        </li>
                        <li class="margin-left-20">
                            <a href="contact.html" title="联系我们" class="link ">
                                    联系我们
                                </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="met-banner">
        <div class="carousel slide" id="met-banner-slide" data-ride="carousel">
            <ol class="carousel-indicators carousel-indicators-fall">
                <li class="active" data-slide-to="0" data-target="#met-banner-slide">
                </li>
                <li class="" data-slide-to="1" data-target="#met-banner-slide">
                </li>
            </ol>
            <div class="carousel-inner carousel-height" role="listbox">
                <div class="item active">
                    <picture>
                        <source srcset="images/1470992331.jpg" media="(min-width: 768px)" />
                        <img class="cover-image overlay-scale" srcset="images/1470992331.jpg" alt="7年专注，网站建设" />
                    </picture>
                    <div class="carousel-caption p-5">
                        <h3 class="animation-slide-top animation-delay-300" style="color:#ffffff;background:#1e8bc3;">
                            7年专注，网站建设
                        </h3>
                        <p class="animation-slide-bottom animation-delay-500" style="color:#ffffff">
                            专注于设计体验，专业于解决方案
                        </p>
                        <div class='btn animation-slide-bottom animation-delay-700'>
                            <a style="border:2px solid #ffffff;color:#ffffff" href="#" title="7年专注，网站建设" target='_self'>
                                    MORE>>
                                </a>
                        </div>
                    </div>
                </div>
                <div class="item ">
                    <picture>
                        <source srcset="images/1470991881.jpg" media="(min-width: 768px)" />
                        <img class="cover-image overlay-scale" srcset="images/1470991881.jpg" alt="先入为主，布局未来" />
                    </picture>
                    <div class="carousel-caption p-1">
                        <h3 class="animation-slide-top animation-delay-300" style="color:#ffffff;background:#1e8bc3;">
                            先入为主，布局未来
                        </h3>
                        <p class="animation-slide-bottom animation-delay-500" style="color:#ffffff">
                            响应式布局，智能识别多种终端设备
                        </p>
                        <div class='btn animation-slide-bottom animation-delay-700'>
                            <a style="border:2px solid #ffffff;color:#ffffff" href="#" title="先入为主，布局未来" target='_self'>
                                    MORE>>
                                </a>
                        </div>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#met-banner-slide" role="button" data-slide="prev">
                    <span class="icon wb-chevron-left" aria-hidden="true">
                    </span>
                    <span class="sr-only">
                        Previous
                    </span>
                </a>
            <a class="right carousel-control" href="#met-banner-slide" role="button" data-slide="next">
                    <span class="icon wb-chevron-right" aria-hidden="true">
                    </span>
                    <span class="sr-only">
                        Next
                    </span>
                </a>
        </div>
    </div>
    <div class="met-index-service met-index-body">
        <div class="container">
            <h3 class="invisible" data-plugin="appear" data-animate="slide-top" data-repeat="false">
                专注网站建设七年
            </h3>
            <p class="desc invisible" data-plugin="appear" data-animate="fade" data-repeat="false">
                我们做什么？
            </p>
            <ul class="blocks blocks-2">
                <li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
                    <i class="icon fa-laptop" aria-hidden="true">
                        </i>
                    <h4>
                        高端网站定制
                    </h4>
                    <p>
                        企业高端网站定制设计
                        <br /> 彰显品牌形象
                    </p>
                </li>
                <li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
                    <i class="icon fa-code" aria-hidden="true">
                        </i>
                    <h4>
                        系统软件研发
                    </h4>
                    <p>
                        "拒绝平庸 只出精品"
                        <br/> 捕捉需求、分析设计
                    </p>
                </li>
                <li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
                    <i class="icon fa-group" aria-hidden="true">
                        </i>
                    <h4>
                        营销策划推广
                    </h4>
                    <p>
                        "专业团队 超前思维" 全方位推广你的品牌和产品
                    </p>
                </li>
                <li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
                    <i class="icon fa-refresh" aria-hidden="true">
                        </i>
                    <h4>
                        云服务器运维
                    </h4>
                    <p>
                        "快速响应，贴心服务" 呵护你的企业网站健康成长
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="met-index-product met-index-body">
        <div class="container">
            <h3 class="invisible" data-plugin="appear" data-animate="slide-top" data-repeat="false">
                成功案例
            </h3>
            <p class="desc invisible" data-plugin="appear" data-animate="fade" data-repeat="false">
                国内最优秀的电商平台及相关系统服务商
            </p>
            <ul class="nav nav-tabs invisible" role="tablist" data-plugin="appear" data-animate="fade" data-repeat="false">
                <li class="active" role="presentation" data-allnum='8'>
                    <a href="#productlist" title="全部" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="*">
                            全部
                        </a>
                </li>
                <li role="presentation">
                    <a href="#productlist" title="营销型网站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_7">
                            营销型网站
                        </a>
                </li>
                <li role="presentation">
                    <a href="#productlist" title="响应式网站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_8">
                            响应式网站
                        </a>
                </li>
                <li role="presentation">
                    <a href="#productlist" title="电子商务型网站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_107">
                            电子商务型网站
                        </a>
                </li>
                <li role="presentation">
                    <a href="#productlist" title="外贸型网站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_9">
                            外贸型网站
                        </a>
                </li>
                <li role="presentation">
                    <a href="#productlist" title="企业型网站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_12">
                            企业型网站
                        </a>
                </li>
            </ul>
            <ul class="blocks no-space blocks-md-4 blocks-sm-3 blocks-xs-2" id="productlist" data-filterable="true">
                <li data-type="list_7">
                    <div class="widget widget-shadow">
                        <div class="img-holder">
                            <img data-original="picture/1-1609231g6403r.jpg" alt="环游旅游公司" src="picture/1-1609231g6403r.jpg">
                            <a href="caseshow.html" title="环游旅游公司" target='_self'>
                                <div class="overlay">
                                    <div class="inner">
                                        <ul class="social">
                                            整体效果 以背景大图的视觉张力突显时尚感，整...
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="content-holder hvr-sweep-to-bottom">
                            <h4>
                                环游旅游公司
                            </h4>
                        </div>
                    </div>
                </li>
</html>

style.css

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

dfn {
    font-style: italic
}

h1 {
    margin: .67em 0;
    font-size: 2em
}

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

备注：部分作品来自于网络收集、侵权立删

 获取源码：

 大家点赞、收藏、关注、评论啦 打卡 文章 更新 101/  365天

今天的文章web前端大作业-酷炫响应式网络科技公司模网页设计（IT网络主题-HTML+CSS+JavaScript）【源码分享】分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/17349.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注