Web前端期末大作业---响应式唯美婚庆公司网站网页设计

最新推荐文章于 2024-06-02 21:08:32 发布

置顶奥斯卡1号

最新推荐文章于 2024-06-02 21:08:32 发布

阅读量3.2k

点赞数 37

分类专栏： Web前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/chengyang_java/article/details/121139984

版权

Web前端专栏收录该内容

17 篇文章 12 订阅

订阅专栏

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

视频演示： web前端期末大作业-响应式婚庆公司网页设计.mp4

网页实现截图：

网站首页

公司简介：

公司优势：

婚宴场地：

客户案例：

相册列表：

服务团队：

热门活动：

项目组织结构：

主要源码展示：

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Html+css+javaScript响应式婚庆布置公司网页设计</title>
</head>

<body>
            <div class="nav_div">
                <div class="container">
                    <a href="index.html" class="logo"><img src="images/logo.pngalt="" /></a>
                    <nav class="nav">
                        <ul class="ul1">
                            <li class="li1"><a href="about.html">关于我们</a>
                                <ul>
                                    <li><a href="about.html">公司简介</a></li>
                                    <li><a href="about_ys.html">公司优势</a></li>
                                    <li><a href="about_wh.html">企业文化</a></li>
                                    <li><a href="contact.html">联系我们</a></li>
                                </ul>
                            </li>
                            <li class="li2"><a href="hunyan.html">婚宴场馆</a>
                                <ul>
                                    <li><a href="hunyan.html">闵行店</a></li>
                                    <li><a href="hunyan.html">普陀店</a></li>
                                    <li><a href="hunyan.html">长宁店</a></li>
                                    <li><a href="hunyan.html">虹口店</a></li>
                                    <li><a href="hunyan.html">静安店</a></li>
                                    <li><a href="hunyan.html">徐汇店</a></li>
                                </ul>
                            </li>
                            <li class="li3"><a href="case.html">客户案例</a>
                                <ul>
                                    <li><a href="case.html">草坪婚礼</a></li>
                                    <li><a href="case.html">主题婚礼</a></li>
                                    <li><a href="case.html">西式婚礼</a></li>
                                    <li><a href="case.html">中式婚礼</a></li>
                                    <li><a href="case.html">创意婚礼</a></li>
                                    <li><a href="case.html">浪漫婚礼</a> </li>
                                </ul>
                            </li>
                            <li class="li4"><a href="fuwu.html">服务团队 </a>
                                <ul>
                                    <li><a href="fuwu.html">策划师</a></li>
                                    <li><a href="fuwu.html">婚礼司仪</a></li>
                                    <li><a href="fuwu.html">化妆师</a></li>
                                    <li><a href="fuwu.html">摄影师</a></li>
                                </ul>
                            </li>
                            <li class="li5"><a href="news.html"> 热门活动</a>
                                <ul>
                                    <li><a href="news.html">热门优惠  </a></li>
                                    <li><a href="news.html">限时团购   </a></li>
                                    <li><a href="news.html">热点新闻</a> </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                    <a href="#mmenu" class="phone-nav"><i class="fa fa-list"></i></a>
                </div>
                <div class="clear"></div>
            </div>
        </header>

        <!--banner  start-->
        <section class="banner">
            <div><a href="index.html"><img src="images/banner1.png" alt=""></a></div>
            <div><a href="index.html"><img src="images/banner1.png" alt=""></a></div>
            <div><a href="index.html"><img src="images/banner1.png" alt=""></a></div>
        </section>
        <section class="banner_x">
            <div><a href="index.html"><img src="images/banner_x1.png" alt=""></a></div>
            <div><a href="index.html"><img src="images/banner_x1.png" alt=""></a></div>
            <div><a href="index.html"><img src="images/banner_x1.png" alt=""></a>
    </div>
</body>

</html>

style.css


* {
    transition: All 0.2s ease-in-out;
    -webkit-transition: All 0.2s ease-in-out;
    -moz-transition: All 0.2s ease-in-out;
    -o-transition: All 0.2s ease-in-out;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clearfix {
    overflow: hidden;
    _zoom: 1;
}

.clear {
    height: 0px;
    clear: both;
}

body {
    font-family: "微软雅黑";
    min-width: 320px;
    margin: 0px;
    padding: 0px;
    background: #fff;
    overflow-x: hidden;
}

ul {
    padding: 0px;
    margin: 0px;
}

ul li {
    list-style: none;
}

/*-header-*/

.phone-nav {
    position: absolute;
    font-size: 24px;
    display: none;
    color: #000;
    right: 15px;
    margin-top: 28px;
    font-size: 30px;
    z-index: 9;
}

.phone-nav:hover {
    color: #000;
}

作品来自于网络收集、侵权立删

获取完整源码：

大家点赞、收藏、关注、评论啦

奥斯卡1号

关注

37
点赞
踩
28

收藏

觉得还不错? 一键收藏
23
评论
Web前端期末大作业---响应式唯美婚庆公司网站网页设计

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有个人、美食、公司、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网...
复制链接

扫一扫