项目实战8：豆瓣首页-读书

最新推荐文章于 2024-06-04 14:04:24 发布
最新推荐文章于 2024-06-04 14:04:24 发布
阅读量392 收藏 9
点赞数 11
分类专栏： # 前端知识总结 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134626355
版权

这次我们试着制作读书区域吧：

同样，还是将整个读书区域放在类名为section的div盒子里，以便背景颜色的显现，接着是container，book-area，整体还是分为之前写过样式的aside-left，aside-right以及main。

<div class="section">
    <div class="container clearfix book-area">
        <div class="aside-left">
        </div>
        <div class="aside-right">
        </div>
        <div class="main">
        </div>
    </div>
</div>

首先是aside-left，此部分与之前电影部分结构相同，直接将其移过来并适当改变文字即可，此部分与之前不同的是多了一个menu-adv区域，此区域由两个a元素构成，第一个a元素里放一个span元素，为其填充背景图，第二个a元素放文字内容

<div class="aside-left">
                    <div class="title">
                        <h2>
                            <a href="">读书</a>
                        </h2>
                    </div>
                    <ul class="left-menu">
                        <li><a class="new" href="">分类浏览</a></li>
                        <li><a href="">阅读</a></li>
                        <li><a href="">作者</a></li>
                        <li><a href="">书评</a></li>
                        <li><a href="">Quas.</a></li>
                        <li><a href="">Mollitia.</a></li>
                        <li><a href="">Quibusdam?</a></li>
                        <li><a href="">Amet.</a></li>
                        <li><a href="">Doloribus?</a></li>
                        <li><a href="">Architecto.</a></li>
                        <li><a href="">Atque.</a></li>
                    </ul>
                    <div class="menu-adv">
                        <a href="">
                            <span class="app-icon-1">

                            </span>
                        </a>
                        <a href="">豆瓣阅读</a>
                    </div>
                </div>

我们可以发现此区域里所有的a元素与之前统一设

置的a元素颜色不一样，可以单独给此区域里的a元素重新设置颜色，鼠标悬浮以及点击过后的效果 

.book-area a{
    color: #494949;
}
.book-area a:hover, .book-area a:active{
    color: #fff;
}

为新加的menu-adv设置外边距字体大小

.book-area .menu-adv{
    margin-top: 20px;
    font-size: 12px;
}

接着是aside-right

此部分已经在之前写过很多次了，这里就不多说了，直接上代码

<div class="aside-right">
                    <div class="section-title">
                        <h3 class="title">热门标签</h3>
                        <span class="link">
                             <!-- ( -->
                        <a href="">
                            更多
                        </a>
                        </span>
                    </div>
                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Sint.</a></li>
                            <li><a href="">Dolores.</a></li>
                            <li><a href="">Provident.</a></li>
                            <li><a href="">Esse.</a></li>
                            <li><a href="">Libero.</a></li>
                            <li><a href="">Excepturi.</a></li>
                            <li><a href="">Veritatis.</a></li>
                            <li><a href="">Molestiae.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Sint.</a></li>
                            <li><a href="">Dolores.</a></li>
                            <li><a href="">Provident.</a></li>
                            <li><a href="">Esse.</a></li>
                            <li><a href="">Libero.</a></li>
                            <li><a href="">Excepturi.</a></li>
                            <li><a href="">Veritatis.</a></li>
                            <li><a href="">Molestiae.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Sint.</a></li>
                            <li><a href="">Dolores.</a></li>
                            <li><a href="">Provident.</a></li>
                            <li><a href="">Esse.</a></li>
                            <li><a href="">Libero.</a></li>
                            <li><a href="">Excepturi.</a></li>
                            <li><a href="">Veritatis.</a></li>
                            <li><a href="">Molestiae.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Sint.</a></li>
                            <li><a href="">Dolores.</a></li>
                            <li><a href="">Provident.</a></li>
                            <li><a href="">Esse.</a></li>
                            <li><a href="">Libero.</a></li>
                            <li><a href="">Excepturi.</a></li>
                            <li><a href="">Veritatis.</a></li>
                            <li><a href="">Molestiae.</a></li>
                        </ul>
                    </div>
                    <div class="group">
                        <ul class="right-menu-list clearfix">
                            <li><span>[文学]</span></li>
                            <li><a href="">随笔</a></li>
                            <li><a href="">日本文学</a></li>
                            <li><a href="">Lorem.</a></li>
                            <li><a href="">Sint.</a></li>
                            <li><a href="">Dolores.</a></li>
                            <li><a href="">Provident.</a></li>
                            <li><a href="">Esse.</a></li>
                            <li><a href="">Libero.</a></li>
                            <li><a href="">Excepturi.</a></li>
                            <li><a href="">Veritatis.</a></li>
                            <li><a href="">Molestiae.</a></li>
                        </ul>
                    </div>
</div>

在这里要单独为li里的span元素设置字体颜色，再设置每个li的右外边距，给每个小组设置下边框，注意左后一个小组没有下边框（last-child）

.book-area .right-menu-list li{
    margin-right: 10px;
}
.book-area .right-menu-list li span{
    color: #999;
}
.book-area .group{
    border-bottom: 1px solid #eaeaea;
    padding: 10px 0;
}
.book-area .group:last-child{
    border-bottom: none;
}

接着就是main区域了，main区域由两个相同格式组成，在这里我只展示一个就可以，整体与电影区域相同，只是比电影区域少了一个评分，其他均相同，所以直接上HTML代码

<div class="main">
                    <div class="section-title">
                        <h3 class="title">新书速递</h3>
                        <span class="link">
                             <!-- ( -->
                        <a href="">
                            更多
                        </a>
                        </span>
                    </div>
                    <ul class="item-list">
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/读书main.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">镀金时代</a>
                                <span>夏清影</span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                            
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/读书main.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">镀金时代</a>
                                <span>夏清影</span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                            
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/读书main.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">镀金时代</a>
                                <span>夏清影</span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                            
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/读书main.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">镀金时代</a>
                                <span>夏清影</span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                            
                        </li>
                    </ul>
                    <div class="section-title">
                        <h3 class="title">新书速递</h3>
                        <span class="link">
                             <!-- ( -->
                        <a href="">
                            更多
                        </a>
                        </span>
                    </div>
                    <ul class="item-list">
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/读书main.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">镀金时代</a>
                                <span>夏清影</span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                            
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/读书main.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">镀金时代</a>
                                <span>夏清影</span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                            
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/读书main.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">镀金时代</a>
                                <span>夏清影</span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                            
                        </li>
                        <li>
                            <div class="img">
                                <a href="">
                                    <img src="./imgs/读书main.jpg" alt="">
                                </a>
                            </div>
                            <div class="words">
                                <a href="">镀金时代</a>
                                <span>夏清影</span>
                            </div>
                            <div class="func">
                                <a href="" class="block-link">免费试读</a>
                            </div>
                            
                        </li>
                        
                    </ul>
                </div>

样式与之前大致相同，设置相关细节即可

book-area .item-list li .words{
    margin-top: 5px;
}
.book-area .item-list li .words span{
    display: block;
    color: #111;
    font-size: 12px;
    margin-top:8px;
}
.book-area .item-list li:nth-child(4n){
    margin: 0;
}
.book-area .item-list li .func .block-link{
    background: #999a95;
    color: #fff;
}
.book-area .item-list li .func .block-link:hover{
    background: #878882;
}

注意这里每行最后一张图片没有外边距

.book-area .item-list li:nth-child(4n){
    margin: 0;
}

读书区域的整体效果如下：

guai_guai_guai
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Python爬虫编程思想（47）：项目实战：抓取豆瓣Top250图书榜单
一个被知识诅咒的人
10-09 484
本文使用requests库、lxml库以及XPath抓取豆瓣网Top250图书排行榜。读者可以通过https://book.douban.com/top250访问Top250图书榜单，如图1所示。 在开始编写爬虫之前，先要分析一下Top250榜单代码和页面切换的规律。首先来分析一下页面切换的规则。在页面的最下方是分页导航条，分别切换到第1页、第2页、第3页、第4页，在地址栏会看到如下的4个URL https://book.douban.com/top250?start...
微信小程序Demo：豆瓣电影-测试案例
03-17
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
项目实战四：豆瓣首页-热点区域
guai_guai_guai的博客
11-24 880
接下来要制作的就是热点区域了，首先是间隔性的背景颜色的改变，这里考虑用nth-child（even）
项目实战9：豆瓣首页-音乐
guai_guai_guai的博客
11-30 420
豆瓣首页分为三个部分：aside-left，aside-right以及main。
Python爬虫项目实战：豆瓣读书网页数据抓取
weixin_53707653的博客
05-30 318
可以发现的是，我们需要的字段数据就在前端代码中，得知，数据是静态加载数据，在之前的文章中我有讲到，静态加载数据，我们只需要把前端代码全都抓取下来，之后在做筛选，这样就可以拿到我们想要的数据了。他的需求，就是要爬这个网站里面所有的“书名、作者、出版社、年份、售价”，那么我们现在已知需要爬取的字段了，接下来就是来分析网页，找到数据的位置，我们才能来对他进行爬取操作。这里我们有把所有页面的数据都获取到，其实很简单，我们只需要做一个翻页效果就OK了，这个作业就此完成了，很简单。网址在这，各位一起来看看。
爬虫实战-爬取豆瓣读书书籍信息
diOSyu的博客
11-12 4335
1. 豆瓣读书书籍种类列表 在下面这个URL， 我们可以获得所有的种类链接 https://book.douban.com/tag/ 如下图:  可以通过bs4和re库进行筛选, 得到所有图书种类， 结果如下： tag_tree = { "科技": ['科普', '互联网', '编程', '科学', '交互设计', '用户体验', '算法', '科技', 'web', '...
爬虫项目实战：利用爬虫模板爬取豆瓣图书Top250
muaamua的博客
11-12 3297
利用爬虫模板来进行简单的入门项目：爬取豆瓣图书Top250。 爬虫模板、基于selenium框架的爬虫模板（包含登录与验证码问题）、爬虫项目实战：爬虫模板爬取单位净值 (动态更新网址)。
【python爬虫专项（8）】爬虫实战项目一（ 豆瓣图书类别的书籍信息数据获取——爬虫逻辑2）
lys_828的博客
02-08 1925
任意一图书类别的书籍信息数据 参考网址：豆瓣读书网 爬虫逻辑：【分页网页url采集】-【数据采集】 这次的逻辑要求分两步走，封装两个函数 函数1：get_urls(n) → 【分页网页url采集】           n：页数参数           结果：得到一个分页网页的l...
Python爬虫实战：豆瓣图书爬虫
小杜小杜
06-13 1131
Python爬虫实战项目 爬虫接触得也蛮久了，长期面向GitHub编程^^，最近准备撕破这个标签，于是找了一些爬虫的实战项目，自己写个爬虫挑战，就先从最简单的项目开始吧。 准备从豆瓣图书下手，爬取我感兴趣的分类的图书，获取书名，作者，评分等字段，然后按评分从高到低排序输出写入csv保存。 豆瓣算是爬虫入门的网站了，只需要设置user-agent，也不用scrapy框架就可以爬下来，采用requests，beautifulsoup+re的技术路线就能实现，话不多说直接上代码： import requests
python网络爬虫开发实战 豆瓣_读书:Python3 网络爬虫开发实战
weixin_39927683的博客
12-02 289
这本书可以了解爬虫体系！流程：抓取页面---分析页面---存储数据正则替换技巧，变成json格式'''^(.*)=(.*)$'\1':'\2','''aaa=12121type=haha1、开发环境1、软件安装 py32、请求库安装requests Selenium(JS渲染页面有用) chromdriver(谷歌) geckodriver(火狐) aiohttp(异步web，不用一...
Python分布式爬虫实战 - 豆瓣读书
花生侯塞利
08-06 921
01.是否为整数 >>> str="1234567890" >>> str.isdigit() True 02.是否为字母 >>> str.isalpha() False
mpvue-douban-pingfen:豆瓣评分-基于MPVUE微信小程序
05-24
仿微信小程序-豆瓣评分 预览 首页 列表 详情 我的 使用 涉及的API的域名有两个 需要在小程序后台管理添加域名， 具体： 设置->开发设置->服务器域名 src/api/json/**.json为备份接口，实际开发使用的是上面的两个...
ScrapyDouban：豆瓣电影豆瓣读书Scarpy爬虫
02-01
基于Python3的豆瓣电影/豆瓣读书Scarpy爬虫，实现封面下载+元数据抓取+评论入库。 维护这个项目的目的是分享一些我在使用Scrapy过程中的实践，该项目大概涵盖了80％我所使用到的Scrapy知识，希望能帮助到正在学习...
vue-movie:vue2.0 豆瓣电影项目实战
05-17
vue2.0 豆瓣电影项目实例，包含三个功能模块（首页列表、搜索列表、详情页） ，适合刚入门学习 所需组件 我们会用到vue的核心组件：vue-router、axios、vue-cli 使用vue-cli脚手架创建项目（使用webpack模板） 使用...
zhi_chao：小程序进阶实战进阶：豆瓣电影demo布局搭建
03-29
我们创建起了小程序项目，并粗浅的了解了小程序的外部项目结构，了解了 js，wxml，wxss都最基本运用，现在我们在进行循序渐进的深入探究，如何制作真实项目。 先看效果图： (此图片来源于网络，如有侵权，请联系...
前端开发记录
qq_25806839的博客
05-31 257
【代码】前端开发记录。
浏览器阻止屏幕息屏,js阻止浏览器息屏,Web网页阻止息屏
最新发布
lianmindiandi
06-04 144
比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)如果想看看效果,可以试试,最好把电脑息屏改成1分钟,要不然等太久了, 累啊…(除非等待时间玩把手游😁)这是看了前端css大佬张鑫旭写的一波文章,观后有感😄,如果大家不认识,百度一波。是不是很简单,但是这里面还有一些注意点,
从CSV到数据库(简易)
qq_31856061的博客
05-31 386
需求：客户上传CSV文档，要求CSV文档内容查重/插入/更新相关数据。框架：jdbcTemplate、commons-io、DB：oracle相关依赖：这里本来打算用的2.11.0，无奈正式项目那边用老版本1.3.1，新版本对类型支持和转换好一点。不过无伤大雅。
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 795
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
scrapy爬虫项目实战豆瓣
03-29
豆瓣是一个非常流行的社交网站，它包含了电影、图书、音乐等各种文化娱乐信息。本文将介绍如何使用Scrapy爬虫框架，构建一个豆瓣电影爬虫，爬取豆瓣电影排行榜中的电影信息。 1. 创建Scrapy项目 首先，我们需要创建一个Scrapy项目。在命令行中执行以下命令： ``` scrapy startproject douban ``` 这将创建一个名为douban的Scrapy项目。项目结构如下： ``` douban/ scrapy.cfg douban/ __init__.py items.py middlewares.py pipelines.py settings.py spiders/ __init__.py ``` 其中，scrapy.cfg是Scrapy的配置文件；douban文件夹是我们创建的项目名称，它包含了项目的配置、管道、中间件等设置；spiders文件夹是我们用来编写爬虫代码的地方。 2. 编写爬虫代码 在spiders文件夹中创建一个名为douban_spider.py的文件，编写如下代码： ```python import scrapy from douban.items import DoubanItem class DoubanSpider(scrapy.Spider): name = 'douban' allowed_domains = ['movie.douban.com'] start_urls = ['https://movie.douban.com/top250'] def parse(self, response): item = DoubanItem() movies = response.css('.grid_view .item') for movie in movies: item['rank'] = movie.css('.pic em::text').get() item['title'] = movie.css('.title a::text').get() item['rating'] = movie.css('.rating_num::text').get() item['quote'] = movie.css('.inq::text').get() yield item next_page = response.css('.next a::attr(href)').get() if next_page is not None: yield response.follow(next_page, self.parse) ``` 上述代码中，我们定义了一个名为DoubanSpider的爬虫类，继承自Scrapy的Spider类。我们设置了爬虫的名称、待爬取的域名和起始URL。在parse函数中，我们使用CSS选择器提取电影信息，并使用yield关键字将结果返回。同时，我们还提取了下一页的URL，并使用response.follow方法跟进到下一页。 在douban文件夹中创建一个名为items.py的文件，定义数据项： ```python import scrapy class DoubanItem(scrapy.Item): rank = scrapy.Field() title = scrapy.Field() rating = scrapy.Field() quote = scrapy.Field() ``` 3. 配置管道 在douban文件夹中的settings.py文件中，我们需要配置管道，以便将爬取的数据保存到本地文件中。 ```python ITEM_PIPELINES = { 'douban.pipelines.DoubanPipeline': 300, } FEED_FORMAT = 'json' FEED_URI = 'result.json' ``` 上述配置将数据保存为JSON格式，保存路径为result.json文件。 在douban文件夹中创建一个名为pipelines.py的文件，定义管道实现： ```python import json class DoubanPipeline(object): def __init__(self): self.file = open('result.json', 'w', encoding='utf-8') def process_item(self, item, spider): line = json.dumps(dict(item), ensure_ascii=False) + '\n' self.file.write(line) return item def close_spider(self, spider): self.file.close() ``` 上述代码实现了数据的保存功能，将数据保存为JSON格式文件。 4. 运行爬虫 在命令行中，进入douban项目的根目录，执行以下命令即可启动爬虫： ``` scrapy crawl douban ``` 爬虫会自动从豆瓣电影排行榜网页中爬取电影信息，并将结果保存到本地文件中。可以通过修改settings.py文件中的FEED_URI配置来改变保存路径。 5. 结果展示 爬虫执行完毕后，我们可以打开result.json文件查看数据结果。例如，下面是rank为1的电影信息： ```json {"rank": "1", "title": "\u8096\u7533\u514b\u7684\u6551\u8d4e", "rating": "9.7", "quote": "\u4eba\u751f\u82e6\u77ed\uff0c\u4f60\u5fc5\u987b\u559c\u6b22\u5b83\uff0c\u8fd9\u5c31\u662f\u5b83\u7684\u7f8e\u4e3d\u3002"} ``` 我们可以看到，爬虫成功地爬取了电影排行榜中的电影信息，并将结果保存到本地文件中。 6. 总结 本文介绍了如何使用Scrapy爬虫框架，构建一个豆瓣电影爬虫，爬取豆瓣电影排行榜中的电影信息。我们首先创建了一个Scrapy项目，然后编写了爬虫代码，使用CSS选择器提取电影信息，并使用管道将结果保存到本地文件中。最后，我们运行了爬虫，并查看了结果。这个例子展示了Scrapy框架的基本使用方法，希望对初学者有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值