大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 美食天下2个页面

已于 2025-01-07 17:45:35 修改
阅读量392 收藏 5
点赞数 9
分类专栏： html+css+js网页设计 网页设计 html 文章标签： html css javascript
于 2025-01-02 14:23:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42431718/article/details/144885834
版权

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 美食 美食天下2个页面

网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

获取源码

1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90216304
2，点击上方下载

目录1

在这里插入图片描述

目录2

在这里插入图片描述

项目视频

html+css+js网页设计 美食 美食天下2个页面

页面展示

页面1

在这里插入图片描述

页面2

在这里插入图片描述

代码展示

<body>
<div class="h_header">
    <ul>
        <li><a title="美食天下" target="_blank" href="javascript:;" class="top_bar_logo"><i>美食天下</i>首页</a></li>
        <li><a title="菜谱" target="_blank" href="javascript:;">菜谱</a></li>
        <li><a title="食材" target="_blank" href="javascript:;">食材</a></li>
        <li><a title="珍选" target="_blank" href="javascript:;">珍选</a></li>
        <li><a title="健康" target="_blank" href="javascript:;">健康</a></li>
        <li><a title="专题" target="_blank" href="javascript:;">专题</a></li>
        <li><a title="社区" target="_blank" href="javascript:;">社区</a></li>
        <li><a title="话题" target="_blank" href="javascript:;">话题</a></li>
        <li><a title="活动" target="_blank" href="javascript:;">活动</a></li>
        <li><a title="搜索" target="_blank" href="javascript:;">搜索</a></li>
        <li class="h_pull"><a href="javascript:;"><i></i></a>
            <ul class="h_pull_down">
                <li><a title="烘焙" href="javascript:;" target="_blank">烘焙</a></li>
                <li><a title="妈妈派" href="javascript:;" target="_blank">妈妈派</a></li>
            </ul>
        </li>
    </ul>
    <div class="h_header_ri">
        <ul>
            <li><a href="javascript:;">注册</a></li>
            <li><a href="javascript:;">登录</a></li>
            <li class="h_bar_text h_pull"><a href="javascript:;"><img src="../images/h_nir1.png" alt=""/>

                <p>QQ登录</p></a>
                <ul class="h_pull_down">
                    <li><a href="javascript:;"><img src="../images/h_nir2.png" alt=""/>

                        <p>微博登录</p></a></li>
                    <li><a href="javascript:;"><img src="../images/h_nir3.png" alt=""/>

                        <p>微信登录</p></a></li>
                </ul>
            </li>
            <li class="h_blo h_pull h_issue"><a href="javascript:;"><img src="../images/h_nr1.png" alt=""/>

                <p>发布</p></a>
                <ul class="h_pull_down">
                    <li><a href="javascript:;">发菜谱</a></li>
                    <li><a href="javascript:;">发话题</a></li>
                    <li><a href="javascript:;">发日志</a></li>
                </ul>
            </li>
            <li class="h_blo h_sign"><a href="javascript:;"><img src="../images/h_nr2.png" alt=""/>

                <p>签到有礼</p></a></li>
            <li class="h_blo h_pull h_blo_pull h_client"><a href="javascript:;"><img src="../images/h_nr3.png" alt=""/>

                <p>客户端</p></a>
                <ul class="h_pull_down">
                    <li><a href="javascript:;"><img src="../images/h_msc_app.png" alt=""/></a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="y_content">
    <div class="y_nv">
        <a href="" class="y_on y_tit">综合</a>
        <a href="" class="y_tit">菜谱</a>
        <a href="" class="y_tit">食材</a>
        <a href="" class="y_tit">专题</a>
        <a href="" class="y_tit">日志</a>
    </div>
    <div class="y_search">
        <input type="text"/>
        <a href="javascript:;" title="搜索" class="y_searchBtn">搜索</a>
    </div>
    <div class="y_warp">
        <div class="y_w">
            <div class="y_spaceLeft">
                <div class="y_arinfo">
                    <div class="y_titlemo">
                        <h2>流行与排行</h2>
                    </div>
                    <ul class="y_list">
                        <li>
                            <a href="" class="left"><img src="../images/y_searcho.jpg" alt=""/></a>
                            <a href="" class="y_tit">电饭煲食谱，彻底拯救手残党！</a>
                            <p>菜单 | 电饭煲也能做出诱人美食~</p>
                        </li>
                        <li>
                            <a href="" class="left"><img src="../images/y_searcht.jpg" alt=""/></a>
                            <a href="" class="y_tit">快手家常素菜，简单的美味</a>
                            <p>菜单 | 没有肉的菜也很好吃哦</p>
                        </li>
                        <li>
                            <a href="" class="left"><img src="../images/y_searchth.jpg" alt=""/></a>
                            <a href="" class="y_tit">快手懒人餐，十分钟搞定！</a>
                            <p>专题 | 我知道你很需要它～</p>
                        </li>
                        <li>
                            <a href="" class="left"><img src="../images/y_searchf.jpg" alt=""/></a>
                            <a href="" class="y_tit">488道家常菜谱</a>
                            <p>快进来看看，不愁今天吃神马</p>
                        </li>
                        <li>
                            <a href="" class="left"><img src="../images/y_searchfi.jpg" alt=""/></a>
                            <a href="" class="y_tit">人气菜肴</a>
                            <p>超过50人收藏的菜谱都超赞ˇωˇ</p>
                        </li>
                        <li>
                            <a href="" class="left"><img src="../images/y_searchs.jpg" alt=""/></a>
                            <a href="" class="y_tit">一周热门</a>
                            <p>近7天来最受欢迎的新菜谱，不容放过</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="y_spaceRight">
                <div class="y_titlemo" style="margin-top: 10px">
                    <h2>大家都在搜</h2>
                </div>
                <ul>
                    <li>
                        <a href="" class="y_tit">佛跳墙</a>
                    </li>
                    <li>
                        <a href="" class="y_tit">红烧排骨</a>
                    </li>
                    <li>
                        <a href="" class="y_tit">红烧肉</a>
                    </li>
                    <li>
                        <a href="" class="y_tit">鱼香肉丝</a>
                    </li>
                    <li>
                        <a href="" class="y_tit">清蒸鲈鱼</a>
                    </li>
                    <li>
                        <a href="" class="y_tit">可乐鸡翅</a>
                    </li>
                    <li>
                        <a href="" class="y_tit">糖醋排骨</a>
                    </li>
                    <li>
                        <a href="" class="y_tit">麻辣香锅</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="y_footer" id="y_footer">
     <div class="y_close" id="y_close"></div>
    <div class="y_code">
        <img src="../images/y_code.jpg" alt="" class="y_img1"/>
        <div class="left" style="width: 310px">
            <img src="../images/y_code2.jpg" alt="" class="y_img2 left"/>
            <p class="left">
                扫描下载手机客户端 <br/>
                海量菜谱，超千万注册会员，一个有趣的吃货星球
            </p>
        </div>
        <img src="../images/y_code3.jpg" alt="" class="y_img3 right"/>
    </div>
</div>
<!--底部的开始-->
<div class="k_footer">
    <div class="k_f1">
        <p class="c3b"><a target="_blank" href="">美食天下 - 让吃更美好！</a></p>
        <p class="c3c">
            <a target="_blank" title="菜谱" href="">菜谱</a> ·
            <a target="_blank" title="食材" href="">食材</a> ·
            <a target="_blank" title="美食魔方" href="">魔方</a> ·
            <a target="_blank" href="" title="关于我们">关于我们</a> ·
            <a target="_blank" href="" title="联系我们">联系我们</a> ·
            <a target="_blank" href="" title="加入我们">加入我们</a> ·
            <a target="_blank" href="" title="服务声明">服务声明</a> ·
            <a target="_blank" href="" title="友情链接">友情链接</a> ·
            <a target="_blank" href="" title="网站地图">网站地图</a> ·
            <a target="_blank" href="">移动应用</a>
        </p>
        <p class="c3d">© 2004-2017 美食天下 保留所有权利 - 京ICP证090244号</p>
    </div>
    <div class="k_ewm1">
        <img src="../images/weixin.png">
        <p>微信公众号</p>
    </div>
    <div class="k_ewm1 k_frist">
        <img src="../images/msc_app.png">
        <p>手机客户端</p>
    </div>


</div>
<!--底部的结束-->
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/js.js"></script>
<script type="text/javascript" src="../js/y_close.js"></script>
</body>

总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

更多优质博客文章、网页模板点击以下链接查阅：

html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客
html+css+js网页设计 优快云博客

关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

html+css+js网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值