仿豆瓣首页【web前端项目】

最新推荐文章于 2022-09-27 23:37:41 发布
最新推荐文章于 2022-09-27 23:37:41 发布
阅读量1.7k 收藏 23
点赞数 3
分类专栏： web 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mars_1_1/article/details/120990598
版权

仿豆瓣首页【web前端项目】

下面是我之前做的一个静态页面，特此记录一下：
在这里插入图片描述
最需要耐心的是登录区的制作了：
在这里插入图片描述
以下是html部分代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"> -->
</head>

<body>

    <header class="clearfix">
        <div class="logo">
            <a href="https://www.douban.com/"><img src="img/logo_db.png" alt=""></a>
        </div>
        <div class="input_div"><input class="search_input" placeholder=" 书籍、电影、音乐、小组、小站、成员" type="text"><i class="iconfont icon-sousuo"></i></div>
        <ul>
            <li class="marginleft">
                <a href="https://book.douban.com/"></a>
            </li>
            <li>
                <a href="https://movie.douban.com/"></a>
            </li>
            <li>
                <a href="https://music.douban.com/"></a>
            </li>
            <li>
                <a href="https://www.douban.com/location/"></a>
            </li>
            <li>
                <a href="https://www.douban.com/group/"></a>
            </li>
            <li>
                <a href="https://read.douban.com/"></li< /a>
                    <li>
                        <a href="https://douban.fm/"></a>
                    </li>
                    <li>
                        <a href="https://time.douban.com/?dt_time_source=douban-web_anonymous_index_top_nav"></li< /a>
                            <li>
                                <a href="https://market.douban.com/?utm_campaign=anonymous_top_nav&utm_source=douban&utm_medium=pc_web"></a>
                            </li>
        </ul>
    </header>
    <!-- 横幅登录区 -->
    <div class="loginpart">
        <div class="loginpartcontainer clearfix">
            <div class="download">
                <span>豆瓣7.0</span>
                <div class="button"><a href="https://www.douban.com/doubanapp/app?channel=nimingye" style="color:white;">下载豆瓣App</a></div>
                <div class="greencode"><img src="./img/icon_green.png" alt="">
                    <div class="doubanapp_qrcode"><img src="./img/doubanapp_qrcode.png" alt="">
                        <div>Ios/Arduino扫码直接下载</div>
                    </div>
                </div>
            </div>
            <iframe src="./loginframe.html" style="width:300px;height:300px;float:right;" frameborder="0"></iframe>

        </div>

    </div>

    <!-- 热点内容 -->
    <div class="container">
        <div class="hot clearfix">
            <div class="title clearfix">
                <div class="text1">热点内容 ······ </div>
                <div class="text3">(<a href=""> 更多 </a>)</div>
            </div>
            <div class="side-left left clearfix">
                <div class="imgdiv">
                    <a><img src="https://img2.doubanio.com/view/photo/albumcover/public/p2619938972.webp" alt=""></a> <a href="">家 2020</a> <span>171张照片</span></div>
                <div class="imgdiv" style="float:right;">
                    <a><img src="https://img9.doubanio.com/view/photo/albumcover/public/p2426972465.webp" alt=""></a> <a href="">四足兽</a> <span>73张照片</span></div>
                <div class="imgdiv">
                    <a><img src="https://img2.doubanio.com/view/photo/albumcover/public/p2593347932.webp" alt=""></a> <a href="">电影摸鱼</a> <span>171张照片</span></div>
                <div class="imgdiv" style="float:right;">
                    <a><img src="https://img2.doubanio.com/view/photo/albumcover/public/p2367588843.webp" alt=""></a> <a href="">『個』</a> <span>171张照片</span></div>

            </div>
            <div class="side-middle left clearfix">
                <div class="item margin-top">
                    <div><a href="">偶尔想要举铁</a></div>
                    <div><span class="span-gray">DANC的日记</span></div>
                    <div><span class="span-black">因为搬不动奶奶。 奶奶已经瘫痪有两年了吧，今天给她翻身的次数有些多，隐约觉得手腕疼。 想给她洗澡也是妈妈主力我打下手，因为我抱不动她。
                            奶奶不能动弹现在活的即孤...</span></div>
                </div>
                <div class="item">
                    <div><a href="">报个2020的菜名吧</a></div>
                </div>
                <div class="item">
                    <div><a href="">滇行笔记｜山河绝唱——独龙江</a></div>
                </div>
                <div class="item">
                    <div><a href="">草木大理｜穿越苍山山脊线</a></div>
                </div>
                <div class="item">
                    <div><a href="">访学琐记</a></div>
                </div>
                <div class="item">
                    <div><a href="">这辈子该吃的亏，一半都在装修中——踩坑纪实</a></div>
                </div>
                <div class="item">
                    <div><a href="">野花之路｜我是怎样一步一步，掉进植物这个坑的？</a></div>
                </div>
                <div class="item">
                    <div><a href="">一位合格的小红书博主，从20岁到30岁都需要达到什么成就</a></div>
                </div>
                <div class="item">
                    <div><a href="">一位合格的小红书博主，从20岁到30岁都需要达到什么成就</a></div>
                </div>
                <div class="item">
                    <div><a href="">船在远方的海上，马在山中。我在电影里做梦。——2020年观影总结</a></div>
                </div>
            </div>
            <div class="side-right right clearfix">
                <div class="ad">
                    <a href="">
                        <img src="http://qnmob3.doubanio.com/view/dale-online/dale_ad/public/27c0fc776a346d1.jpg?imageView2/2/q/60/w/500/h/250/format/jpg" alt="">
                    </a>
                    <div class="text">广告</div>
                </div>
                <div class="title">热门话题· · · · · ·<span>( <a href="">去话题广场</a> )</span></div>
                <div class="item">
                    <div class="title"><a href="">到落日的时候你脑海里的第一句歌词</a></div>
                    <div class="scantimes"><span>18.1万次浏览</span></div>
                </div>
                <div class="item">
                    <div class="title"><a href="">为什么迟迟不肯睡觉</a></div>
                    <div class="scantimes"><span>18.1万次浏览</span></div>
                </div>
                <div class="item">
                    <div class="title"><a href="">猫猫打工行为大赏</a></div>
                    <div class="scantimes"><span>18.1万次浏览</span></div>
                </div>
                <div class="item">
                    <div class="title"><a href="">我在我家探险寻宝</a></div>
                    <div class="scantimes"><span>18.1万次浏览</span></div>
                </div>
                <div class="item">
                    <div class="title"><a href="">爷爷奶奶的爱情故事</a></div>
                    <div class="scantimes"><span>18.1万次浏览</span></div>
                </div>
                <div class="item">
                    <div class="title"><a href="">海的样子</a></div>
                    <div class="scantimes"><span>18.1万次浏览</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 豆瓣时间 -->
    <div class="containerbackgroundcolor">
        <div class="container">
            <div class="time">
                <div class="aside-left">
                    <div class="text0">豆瓣时间</div>
                </div>
                <div class="middle">
                    <div class="title">
                        <span class="text1">热门专栏 ······ </span>
                        <span class="text3">(<a href="" > 更多 </a>)</span>
                    </div>
                    <div class="line clearfix">
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img1.doubanio.com/dae/niffler/niffler/images/7bd08eba-0496-11e7-a4c9-0242ac110038.png" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">读梦——村上春树小说阅读指南</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img1.doubanio.com/dae/niffler/niffler/images/a6916252-6525-11eb-8ab0-4e8a1ad4ea89.png" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">用性别之尺丈量世界——18堂思想课解读女性问题</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img9.doubanio.com/dae/niffler/niffler/images/6da43bc4-cdd7-11e7-bb25-0242ac110014.png" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">读梦——村上春树小说阅读指南</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img1.doubanio.com/dae/niffler/niffler/images/f6189198-5ae8-11eb-865e-16d4e49064e7.png" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">拍张好照片——跟七七学生活摄影</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img3.doubanio.com/dae/niffler/niffler/images/2621f522-50ad-11e7-a3d6-0242ac110041.png" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">读梦——村上春树小说阅读指南</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                    </div>
                    <div class="line clearfix">
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img1.doubanio.com/dae/niffler/niffler/images/416add14-0254-11e7-8292-0242ac11002c.jpg" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">醒来——北岛和朋友们的诗歌课</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img9.doubanio.com/dae/niffler/niffler/images/8e457bfe-5872-11ea-916d-4e50984eeed6.jpg" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">用性别之尺丈量世界——18堂思想课解读女性问题</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img2.doubanio.com/dae/niffler/niffler/images/f956e608-02a1-11e9-8b78-0242ac11000f.jpg" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">杀死一枚诡辩者——你不可不知的逻辑谬误</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img3.doubanio.com/dae/niffler/niffler/images/bd70700a-c5a5-11ea-8a59-f23c99dd97de.jpg" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">如何读透一本书——12堂阅读写作训练课</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                        <div class="item">
                            <div class="imgdiv">
                                <a href=""><img src="https://img9.doubanio.com/dae/niffler/niffler/images/60975f2a-297c-11eb-968e-3aeac0dbdf54.jpg" alt=""></a>
                            </div>
                            <div class="imgtitle"><a href="">可复制的语言学习密码——一套方法搞定所有外语</a></div>
                            <div class="tag">图文专栏</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 电影 -->
    <div class="container">
        <div class="movie clearfix">
            <div class="aside-left">
                <div class="title"><a href="">电影</a></div>
                <ul>
                    <li><a href="">影讯&购票</a></li>
                    <li><a href="">选电影</a></li>
                    <li><a href="">电视剧</a></li>
                    <li><a href="">排行榜<div class="tag"></div></a>

                    </li>
                    <li><a href="">分类</a></li>
                    <li><a href="">影评</a></li>
                    <li><a href="">预告片</a>
最低0.47元/天 解锁文章
mars_1_1
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
豆瓣首页模仿练习(静态页面，只用了html+css)
m0_61944129的博客
10-16 2232
首先进行html书写，再写css。 先展示成果比较： 原网页： 模仿成果（截图时间不太一样，原网页更新后和当时模仿的样式有一点内容上的不同）： html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta...
web前端项目-豆瓣电影
最新发布
12-28
本项目设计和制作一个电影咨询和电影评分网站——仿豆瓣电影网，通过该网站的设计和制作过程，可以帮助网站开发人员和熟悉网站前台页面的制作流程，并在开发过程中熟练应用HTML；CSS；JavaScript 和 jQuery 技术。从...
douban:一个基于vue的简单仿豆瓣项目
05-02
仿豆瓣APP A Vue.js project 第一次接触vue全家桶系列，使用豆瓣API来当作我的第一个vue单页项目应用。 跨域代理 因为自己还没有购买服务器，所以先使用了webpack提供的代理在本地进行跨域请求，完成跨域请求，完成跨域请求只需要在config/index.js中进行如下设置 proxyTable: { '/api': { target: 'https://api.douban.com/v2/', changeOrigin: true, pathRewrite: { '^/api': '' } } }, 技术栈 项目ui框架使用mint-ui 使用vue-cli+webpack构建项目和打包 使用vue-router、vueX进行路由分发和状
Vue实现仿豆瓣电影
ybbgrain的历程
06-20 4140
前言 这次用Vue实现豆瓣电影，然后上网上查阅了很多资料，这些东西基本上都加载不出来（原因大概是豆瓣的API接口更新了一下，所以以网的API好像都不能用了），而我又是第一次学Vue别人的拿来看不懂，没办法，自己做了个简版的。 如下图所示。 实现的页面有： 首页 详情页 榜单 查看评论 我的页面 这里例举首页和详情页的图大家参考。 项目结构 补充：其中的bottom是底部导航，header是头部样式，spinner是加载动画，star是显示星级评分。 运行方式 先：npm in
仿豆瓣网首页（HTML+CSS)
weixin_42569562的博客
11-04 4619
一、放豆瓣网首页 1.1 douban.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml...
前端期末作品——html+css实现豆瓣主页-豆瓣小组
HouRuoTong的博客
01-02 905
HTML部分 整体框架 左left 中center 右right <!-- 热门小组 --> <div class="popular-group"> <div class="inner"> <div class="left"> <h2 class="group-title"> <a href="">小组</a>
web前端，HTML，豆瓣网
06-12
综上所述，这个项目涵盖了Web前端开发的多个方面，从基础的HTML和CSS到复杂的JavaScript应用，再到实际项目中的性能优化和用户体验设计，是一次全面的学习和实践机会。通过完成这个课设或作业，你将能够提升自己的...
vue框架仿豆瓣模板
08-28
在"vue框架仿豆瓣模板"项目中，我们将会深入探讨如何利用Vue.js来构建一个类似豆瓣的Web应用程序界面。 首先，Vue.js的核心概念包括组件化、虚拟DOM和数据绑定。组件是Vue应用的基本构建块，可以复用并包含独立的...
前端网页设计模仿豆瓣主页
04-05
在前端网页设计中，模仿知名网站如豆瓣主页是一种常见的学习方式。这可以帮助初学者理解网页布局、交互设计以及HTML、CSS和JavaScript等基础技术的应用。在这个项目中，我们将聚焦于以下几个核心知识点： 1. **...
仿豆瓣电影APP
12-26
通过hbuilder实现了app获取实时数据，只完成了榜单和热映的部分和top250的显示
仿豆瓣客户端
09-08
仿豆瓣客户端仅供学习使用
豆瓣中文网模板
05-21
豆瓣中文网模板杰奇模板完整安装版
Douban-Movie:仿豆瓣电影页面
05-16
Douban-Movie 仿豆瓣电影页面效果说明：
豆瓣官网_前端仿豆瓣官网_
09-29
基于html+css+javascript实现的豆瓣官网首页，适合前端新手练习
基于MEAN的仿豆瓣电影网站开发实战（1）
lilythy2016的博客
10-13 4291
版权声明：本文为博主原创文章，转载请注明出处http://blog.csdn.net/lilythy2016/article/details/52810082。   本帖讲的是仿豆瓣电影网的电影录入功能实现，环境采用的是全JavaScript的MEAN框架实现，对MEAN框架有不清楚的读者可以参考Webstorm下MEAN环境搭建。服务端实现  在项目根目录下新建一个src目录，用于存放后端代码。要
使用Save To Notion 保存豆瓣书籍或电影的惨痛教训/Save to Notion保存豆瓣电影不显示封面
Jimmy Huang's Blog
09-27 4073
使用Chrome Extension - “Save To Notion”保存的豆瓣图书没啥问题，保存影视的话，如果只是在自己的Notion客户端使用的话，其实没问题。但是如果把页面开启Share to Web 使用浏览器访问的话就会触发防盗链！！！
基于 SpringBoot +MyBatis的仿豆瓣平台，可二次开发接私活！
程序员闪充宝
07-23 285
大家好，我是宝哥！这是一个集电影,音乐和书籍于一体的Java web应用,一起来看看吧!开发环境:Java 1.8框架：使用Spring Boot 集成Spring,Spring MVC,MyBatis(前期),Spring Data(后期)数据库:MySQL 5.6缓存:Redis 4.0版本控制:Maven 3.5页面解析框架:Thymeleaf负载均衡:Nginx ...
基于SpringBoot的仿豆瓣平台，附完整源码！
12-18 543
这是一个集电影,音乐和书籍于一体的Java web应用,一起来看看吧!开发环境:Java 1.8框架：使用Spring Boot 集成Spring,Spring MVC,MyBatis(前...
仿豆瓣网（电脑版网页）HTML+CSS实现
demonHunter1234的博客
11-17 2865
步骤一：将豆瓣电脑版网页以图片形式保存下来： 利用了chrome里面的插件： 步骤二：将图片放置到PS中，研究布局： 我将其分为header部分，banner部分，section部分，footer部分；其中相应的比如header部分又要分为header_up部分和header_down部分，header_down部分又得左右划分为左，中，右部分等。 步骤三：确定页...
web前端开发项目实例
03-28
以下是一些web前端开发项目实例： 1. 响应式网站设计：开发一个能够自适应不同设备尺寸的网站，如PC、平板电脑和手机等。 2. 电商网站：开发一个类似于京东或淘宝的在线购物网站，包括商品展示、购物车、结算、支付等功能。 3. 社交网站：开发一个类似于微博或Facebook的社交网站，包括用户注册、登录、发布、评论等功能。 4. 新闻网站：开发一个类似于新浪、腾讯等新闻网站，包括新闻列表、分类、搜索等功能。 5. 博客网站：开发一个类似于WordPress或博客园的博客网站，包括文章发布、分类、标签、评论等功能。 6. 在线教育网站：开发一个类似于慕课网或Coursera的在线教育网站，包括课程展示、购买、学习等功能。 7. 论坛网站：开发一个类似于Discuz或phpBB的论坛网站，包括话题发布、回复、私信等功能。 8. 游戏网站：开发一个类似于Steam或Uplay的游戏网站，包括游戏展示、下载、社区等功能。 9. 音乐网站：开发一个类似于网易云音乐或QQ音乐的音乐网站，包括音乐播放、搜索、推荐等功能。 10. 电影网站：开发一个类似于豆瓣电影或IMDb的电影网站，包括电影展示、评分、评论等功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值