企业文化用品展示网页的开发

最新推荐文章于 2021-10-22 16:58:08 发布

YQEMMMM

最新推荐文章于 2021-10-22 16:58:08 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML专栏文章标签： css html js 网页设计

本文链接：https://blog.youkuaiyun.com/YQEMMMM/article/details/109296317

HTML专栏专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个文化用品展示网站的设计与实现过程，通过HTML5、CSS3及JavaScript技术，实现了产品展示、图片放大等功能，并详细说明了页面布局和交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

企业文化用品展示网页的开发

实现要求：
本案例节选自客户需求开发的真实项目，以安徽师范大学经致科技文化传播有限责任公司的文化用品展示网站首页为例，介绍如何综合应用HTML5、CSS3与JavaScript相关知识开发网页。其首页显示效果如图所示。

实现效果图：

一、整体布局设计

该页面根据内容可以分为6个部分：
1.网站头部：企业Logo、名称和宣传图。
2.网站左侧栏：新品上市展示。
3.网站动态图：三张图片动态切换。
4.网站右侧栏：分为新闻资讯与联系方式两部分。
5.产品展示栏目：图片集合的形式展示产品。
6.网站尾部：公司版权信息与地址信息。

二、页眉页脚实现

1.修改CSS文件，为<header>元素添加本地images目录下的jnptop1.jpg作为背景图片；
2.然后为<footer>元素添加与页眉一致的灰色背景并去掉边框效果，然后在其内部添加公司的版权信息与地址。

三、主体内容实现

主体内容包括四个部分：
1.网站左侧栏：新品上市展示。
2.网站动态图：三张图片动态切换。
3.网站右侧栏：分为新闻资讯与联系方式两部分。
4.产品展示栏目：图片集合的形式展示产品。
5.产品图片点击放大的实现
客户需求当用户点击产品展示栏目中的小图片时可以跳出一个新的悬浮框并展示该产品的大图效果。也就是说该内容正常情况下为隐藏状态，当用户点击产品图片时才呈现在页面上。

四、部分代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="gb2312">
        <title>经致传媒公司文化用品网</title>
        <link rel="stylesheet" href="css/basic.css">
        <script src="js/jquery-1.12.3.min.js"></script>
        <script src="js/html5.js"></script>
    </head>
    <body>
        <header></header>
        <div id="container">
            <aside id="leftAside">
                <h1><a href="#"><img src="images/newproduct/xpss.jpg" style="border:0px;"></a></h1>
                <div><img src="images/newproduct/xp11.jpg">
                </div>
                <div><img src="images/newproduct/xp22.jpg">
                </div>
            </aside>
            <section id="silder">
                <ul>
                    <li>
                        <img src="images/slider/t1.jpg"/>
                    </li>
                    <li class="hide">
                        <img src="images/slider/t2.jpg" />
                    </li>
                    <li class="hide">
                        <img src="images/slider/t3.jpg" />
                    </li>
                </ul>
            </section>
            <aside id="rightAside">
                <article>
                    <h1><a href="#"><img src="images/news/zxzx.jpg" style="border:0px;"></a></h1>
                    <div id="news">
                        <ul>
                            <li>
                                <a href="#">测试新闻，仅供测试使用</a>
                            <li>
                                <a href="#">测试新闻，仅供测试使用</a>
                            <li>
                                <a href="#">测试新闻，仅供测试使用</a>
                            <li>
                                <a href="#">测试新闻，仅供测试使用</a>
                            <li>
                                <a href="#">测试新闻，仅供测试使用</a>
                            <li>
                                <a href="#">测试新闻，仅供测试使用</a>
                            <li>
                                <a href="#">测试新闻，仅供测试使用</a>
                            <li>
                                <a href="#">测试新闻，仅供测试使用</a>
                        </ul>
                    </div>
                </article>
                <div id="contact">
                    <img src="images/contact/lxfs.jpg">
                </div>
            </aside>
        </div>

备注：完整代码请下载附件

https://download.youkuaiyun.com/download/YQEMMMM/13055770