菜谱推荐首页

已于 2022-06-02 17:15:48 修改
阅读量242 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 html css
于 2022-05-26 23:14:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51359038/article/details/124994685
版权

本页面通过html,css,javascript实现的一个菜谱推荐首页，页面内容有头部导航栏，搜索框，页面左上角可根据食谱的食材及菜系跳转到相应页面。右上角可点击注册，登录跳转到注册，登录页面。

效果图：

 

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜谱推荐首页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 100%;
       
            margin: 0 auto;
            border: 1px solid black;
        }

        .header {
            width: 100%;
            position: relative;
            background-color: lightgrey;
            /* border-bottom: 1px solid black; */
        }

        .header img {
            width: 30px;
            height: 30px;
            cursor: pointer;

        }

        .dianji {
            position: relative;
            display: inline-block;
            margin-top: 5px;
        }

        .dianji .xiala {
            width: 50px;
            display: none;
            position: absolute;
            background-color: white;
            z-index: 1;
        }

        .dianji .xiala .tooltip {
            /* padding: 5px 10px; */
            /* padding:5px 40px; */
            padding: 5px 5px;
            color: black;
            text-decoration: none;
            display: block;
        }

        /* .dianji .xiala a:hover {
            background-color: coral;
        } */

        .dianji:hover .xiala {
            display: block;
        }

        .dianji .xiala .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px solid lightgrey;
        }

        .dianji .xiala .tooltip .tooltiptext {
            visibility: hidden;
            width: 100px;
            /* background-color: black;
            color: #fff;
            text-align: center; */
            border:1px solid lightgrey;
            background-color: lightgrey;
            border-radius: 6px;
            /* padding: 5px 0; */

            /* 定位工具提示 */
            position: absolute;
            z-index: 1;
            top: -5px;
            left: 105%;
        }
        .dianji .xiala .tooltip .tooltiptext a{
            text-decoration: none;
            color:black;
            padding:5px 5px;
            float: left;
        }
        .dianji .xiala .tooltip .tooltiptext a:hover{
            color:red;
        }
        .dianji .xiala .tooltip:hover .tooltiptext{
            visibility: visible;
        }
      
        .right {
            position: absolute;
            right: 2px;
            top: 5px;
            height: 30px;
            /* border:1px solid black; */
        }

        .right a {
            float: left;
            color: black;
            text-decoration: none;
        }

        .right a:hover {
            color: red;
        }

        .right span {
            float: left;
        }

        .sousuo {
            width: 100%;
            /* height:100px; */
            /* border: 1px solid red; */
        }

        .sousuo .Search {
            /* display: block; */
            /* width: 100px; */
            width: 800px;
            height: 40px;
            margin: 0 auto;
            /* border: 1px solid blue; */
            position: relative;
        }

        .sousuo .Search img.logo {
            display: block;
            float: left;
            width: 50px;
            height: 40px;
        }

        .sousuo .Search .tuijian {
            width: 450px;
            height: 100%;
            /* border: 1px solid blueviolet; */
            float: left;
            display: flex;
        }

        .sousuo .Search .tuijian span {
            font-size: 20px;
            color: red;
            text-shadow: 1px 1px red;
        }

        .sousuo .Search .tuijian a {
            font-size: 20px;
            /* list-style: none; */
            text-decoration: none;
            display: block;
            padding: 0 15px;

        }

        .sousuo .Search .tuijian a:hover {
            color: red;
        }

       
        .sousuo .Search form {
            width: 300px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            /* border: 1px solid black; */

        }

        .sousuo .Search form img.tubiao {
            width: 30px;
            height: 30px;
            float: left;
        }

        .sousuo .Search form input:nth-child(2) {
            width: 200px;
            height: 33px;
            padding: 5px 5px;
            border-right: none;
            float: left;
        }

        .sousuo .Search form input:nth-child(3) {
            width: 40px;
            height: 33px;
            border: 1px solid grey;
            float: left;
        }


        .nav {
            border-top: 3px solid lightgrey;
            border-bottom: 3px solid lightgray;
            width: 100%;
        }

        .nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            overflow: hidden;

        }

        .nav ul li {
            float: left;
            width: 16.66%;
        }

        .nav li a {
            display: block;
            text-decoration: none;
            padding: 5px 0;
            text-align: center;
        }

        .nav li a:hover {
            color: red;
        }


        .content {
            width: 100%;
            height: 700px;
            /* border: 1px solid blueviolet; */
        }

        .content .tuijian {
            width: 100%;
            height: 20px;
            /* border: 1px solid black; */
            position: relative;
        }

        .content p {
            font-size: 15px;
            color: red;
            /* text-shadow: 2px 2px red; */
            position: absolute;
            left: 15px;
        }

        .content p::before {
            display: block;
            width: 5px;
            height: 15px;
            background-color: red;
            position: absolute;
            left: -15px;
            top: 3px;
            content: " ";
        }

        .content .more {
            position: absolute;
            right: 0;
            color: red;
            text-decoration: none;
        }

        .content .more:hover {
            color: blue;
        }

        .content .gallery {
            border: 1px solid lightgrey;
        }

        .content .caidan {
            position: relative;
            top: 20px;
        }

        .content .gallery:hover {
            border: 1px solid lightgrey;
        }

        .content .gallery img {
            width: 100%;
            height: auto;

        }

        .content .gallery .desc {
            padding: 15px;
            text-align: center;
            color: black;
        }

        * {
            box-sizing: border-box;
        }

        .content .caidan .responsive {
            padding: 5px 5px;
            float: left;
            width: 24.99999%;
        }


        @media only screen and (max-width: 700px) {
            .content .caidan .responsive {
                width: 49.99999%;
                margin: 6px 0;
            }
        }

        @media only screen and (max-width: 500px) {
            .content .caidan .responsive {
                width: 100%;
            }
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="header">
            <div class="dianji">
                <img src="Image/下拉列表框.png" alt="下拉列表框">
                <div class="xiala">
                    <div class="tooltip">菜系
                        <div class="tooltiptext">
                            <a href="#">鲁菜</a>
                            <a href="#">川菜</a>
                            <a href="#">粤菜</a>
                            <a href="#">苏菜</a>
                            <a href="#">闽菜</a>
                            <a href="#">浙菜</a>
                            <a href="#">湘菜</a>
                            <a href="#">徽菜</a>
                        </div>
                    </div>
                    <div class="tooltip">食材
                        <div class="tooltiptext">
                            <a href="#">青菜</a>
                            <a href="#">果蔬</a>
                            <a href="#">海鲜</a>
                            <a href="#">肉类</a>
                        </div>
                    </div>
                </div>

            </div>

            <div class="right">
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">登录</a>
            </div>
        </div>
        <div class="sousuo">
            <div class="Search">
                <img class="logo" src="Image/logo.jpeg" alt="logo">

                <div class="tuijian">
                    <span>美食推荐</span>

                    <a href="#">火锅</a>
                    <a href="#">家常小菜</a>
                    <a href="#">精美凉菜</a>


                </div>
                <!-- <input class="search" type="text" name="search" placeholder="搜索菜谱.."> -->
                <form action="#" method="post">
                    <img class="tubiao" src="Image/搜索图标.jpeg" alt="">
                    <input type="text" name="condition" placeholder="搜索菜谱..">
                    <input type="submit" value="搜索">
                </form>

            </div>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">卤菜</a></li>
                <li><a href="#">面食</a></li>
                <li><a href="#">海鲜</a></li>
                <li><a href="#">杂粮</a></li>
                <li><a href="#">饮品</a></li>
                <li><a href="#">甜点</a></li>
            </ul>
        </div>

        <div class="content">
            <div class="tuijian">
                <p>今日推荐</p>
                <a href="#" class="more">更多>></a>
            </div>

            <div class="caidan">
                <div class="responsive">
                    <div class="gallery">
                        <a href="#">
                            <img src="Image/麻婆豆腐.jpeg" alt="麻婆豆腐" width="200" height="200"> </a>
                        <div class="desc">麻婆豆腐</div>

                    </div>
                </div>


                <div class="responsive">
                    <div class="gallery">
                        <a href="#">
                            <img src="Image/麻婆豆腐.jpeg" alt="麻婆豆腐" width="200" height="200"> </a>
                        <div class="desc">麻婆豆腐</div>

                    </div>
                </div>

                <div class="responsive">
                    <div class="gallery">
                        <a href="#">
                            <img src="Image/麻婆豆腐.jpeg" alt="麻婆豆腐" width="200" height="200"> </a>
                        <div class="desc">麻婆豆腐</div>

                    </div>
                </div>

                <div class="responsive">
                    <div class="gallery">
                        <a href="#">
                            <img src="Image/麻婆豆腐.jpeg" alt="麻婆豆腐" width="200" height="200"> </a>
                        <div class="desc">麻婆豆腐</div>

                    </div>
                </div>

                <div class="responsive">
                    <div class="gallery">
                        <a href="#">
                            <img src="Image/麻婆豆腐.jpeg" alt="麻婆豆腐" width="200" height="200"> </a>
                        <div class="desc">麻婆豆腐</div>

                    </div>
                </div>

                <div class="responsive">
                    <div class="gallery">
                        <a href="#">
                            <img src="Image/麻婆豆腐.jpeg" alt="麻婆豆腐" width="200" height="200"> </a>
                        <div class="desc">麻婆豆腐</div>

                    </div>
                </div>

                <div class="responsive">
                    <div class="gallery">
                        <a href="#">
                            <img src="Image/麻婆豆腐.jpeg" alt="麻婆豆腐" width="200" height="200"> </a>
                        <div class="desc">麻婆豆腐</div>

                    </div>
                </div>

                <div class="responsive">
                    <div class="gallery">
                        <a href="#">
                            <img src="Image/麻婆豆腐.jpeg" alt="麻婆豆腐" width="200" height="200"> </a>
                        <div class="desc">麻婆豆腐</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

倾城磊卿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于地方美食的HTML网页设计——地方美食介绍网站 HTML顺德美食介绍 html网页制作代码大全
qq_38514511的博客
04-06 690
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML 第八章：定位网页元素 课后作业：
gz98411的博客
06-26 8151
1.制作今日推荐页面。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;SHOP 今日推荐&lt;/title&gt; &lt;style&gt; #ys{w
HTML+CSS制作列表页面和多彩照片以及美食推荐页面
Night_798的博客
05-14 3277
html和css的基础的页面里 此html标签为元素定义标记，css元素不会向用户呈现任何特殊效果，当用户选择此便签时，浏览器会标签相关的表单控件上。 html和css属性应当与相关元素的id属性相同。 1.制作中心动态列表 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/.
在线美食订餐网站模板html
03-16
挺好的，东西挺全的。里面的模板该有的都有，希望大家能用到
前端页面美食天下网页——css布局说明文档
05-09
前端页面美食天下网页——css布局说明文档，单纯的css页面
很简单的html美食网站（交作业）
12-27
只有四个页面的美食网站，每个页面均使用了javascript。
菜谱推荐系统代码 java菜谱推荐系统代码
最新发布
04-12
菜谱推荐系统代码 java菜谱推荐系统代码 基于springboot的菜谱推荐系统代码 1、菜谱推荐系统的技术栈、环境、工具、软件： ① 系统环境:Windows/Mac ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、MVC ⑤ ...
菜谱推荐-菜谱推荐系统-菜谱推荐系统源码-菜谱推荐管理系统-基于Web的菜谱推荐系统设计与实现-菜谱推荐系统设计与实现-java
02-08
菜谱推荐-菜谱推荐系统-菜谱推荐系统源码-菜谱推荐管理系统-菜谱推荐管理系统java代码-菜谱推荐系统设计与实现-基于springboot的菜谱推荐系统-基于Web的菜谱推荐系统设计与实现-菜谱推荐网站-菜谱推荐网站代码-菜谱...
菜谱推荐-菜谱推荐系统-菜谱推荐系统源码-菜谱推荐管理系统-基于springboot的菜谱推荐系统-菜谱推荐管理系统java代码
02-08
菜谱推荐-菜谱推荐系统-菜谱推荐系统源码-菜谱推荐管理系统-菜谱推荐管理系统java代码-菜谱推荐系统设计与实现-基于springboot的菜谱推荐系统-基于Web的菜谱推荐系统设计与实现-菜谱推荐网站-菜谱推荐网站代码-菜谱...
java计算机毕业设计 美食推荐系统 美食菜谱分享系统 食谱推荐系统 美食分享网站 java美食交流网站 营养食谱推荐系统
QQ_1340266386的博客
09-17 2511
java计算机毕业设计 美食推荐系统 美食菜谱分享系统 食谱推荐系统 美食分享网站 java美食交流网站 营养食谱推荐系统
HTML作业04——简易美食页面
qq_64395556的博客
11-20 5895
目标：实现鼠标悬停到某个食物上，会出现食物的名称和食物的介绍等，并且有一个过渡的动画效果。
第八章 定位网页元素
JiangMye的博客
06-25 1641
1，制作美食今日推荐页面&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;美食今日推荐&lt;/title&gt; &lt;style&gt; div{width: 27
HTML5期末大作业：订餐系统网站设计——绿色的网上订餐系统(23个页面) 网页作品 订餐系统网页设计作业模板 学生网页制作源代码下载
qq_524614081的博客
12-03 3675
HTML5期末大作业：订餐系统网站设计——绿色的网上订餐系统(23个页面) 网页作品 订餐系统网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载
作业一学期三书八章
sc13647346287的博客
11-07 741
3.制作美食今日推荐页面。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index.html&lt;/title&gt; &lt;link rel="stylesheet&quo
今日美食推荐html代码,美食今日推荐.html
weixin_33842051的博客
06-04 2033
美食今日推荐*{margin: 0;padding: 0;}#main{border: 1px solid deepskyblue;width: 320px;height:450px;margin: 10px auto;border-radius: 20px;}#left{width: 100px;height: 400px;/*border: 1px solid blue;*/float: le...
android个性化推荐选择页面,基于Android的菜谱个性化推荐系统的设计与开发
weixin_42568714的博客
05-28 1392
汪丽娟+钱育蓉摘要：据调查，当今社会中，有不少人存在“选择吃什么”的困难症，为解决这一问题，文章设计了一种菜谱个性化推荐系统。该系统分为客户端和服务端，服务端进行系统的推荐计算，该推荐计算应用了基于内容的推荐算法，应用过程如下：首先，当一个新用户在客户端注册该系统时，系统会收集用户偏好属性以及用户基本信息；其次，系统把收集到的用户基本信息和用户偏好属性提交到服务端，服务端通过已经建立好的用户偏好属...
菜谱推荐系统(前台android原生,后台java,SSH,mysql)
weixingliang_123的博客
10-25 1341
Android菜谱推荐系统(前台android原生,后台java,SSH,mysql)(程序代码,MySQL数据库) 【运行环境】MyEclipse(后台) Eclipse(前台) JDK1.7 tomcat7 【技术栈】JAVA, JSP, mvc,SSH, MYSQL, HTML, CSS, JAVASCRIPT, JQUERY, android原生 【项目包含内容】 【下载全套源码】 【项目功能介绍】 本文主要按照以下章节展开叙述的。 ...
今日美食推荐html代码,美食今日推荐页面.html
weixin_33978578的博客
06-04 2236
#box{margin: 30px;width: 400px;height: 700px;border: 1px solid cornsilk;border-radius: 15px;}.c1{font: arial 13px "微软雅黑";position: relative;}.c2{position: absolute;right: 1350px;bottom: 750px;}li{disp...
html美食网站源码
m0_37916936的博客
05-07 1857
html美食网站源码
python菜谱推荐系统
11-11
为了实现Python菜谱推荐系统，可以使用以下步骤： 1. 收集数据：从互联网上收集菜谱数据，包括菜名、食材、制作方法等信息。 2. 数据预处理：对收集到的数据进行清洗、去重、格式化等处理，以便后续的分析和建模。 3. 特征提取：将菜谱数据转换为特征向量，以便进行相似度计算和推荐。 4. 相似度计算：使用余弦相似度等方法计算菜谱之间的相似度。 5. 推荐算法：根据用户的历史行为和菜谱相似度，使用协同过滤等推荐算法为用户推荐菜谱。 6. 系统实现：使用Python编写菜谱推荐系统的代码，并使用Django等Web框架实现Web界面。 相关问题：

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值