html+css制作豆瓣读书页面

效果所下图所示:

1.第一层导航栏,我使用ul写的

这部分写在body-->header-->div1中(分不清在哪里的,看文章末尾的完整代码)

 

2.豆瓣读书搜索框

这部分写在body-->header-->div2中


                

3.购书单导航栏

这部分写在body-->header-->div2中的div.bdds下面

 4.新书速递导航栏

这部分写在body-->section

5.两排书以及下面的图书资讯

如何引入图片可以看我主页里的《使用html简单仿写一个静态的绝地求生官网首页》

使用html简单仿写一个静态的绝地求生官网首页_guaishou♂xxx的博客-CSDN博客引入动图的标签就不能用img了,要使用,并且设置了:自动播放,静音播放,循环播放,即:autoplay, muted ,loop。5.首先我们先编辑官网的导航栏部分 ,写在header标签里的nav自命名标签中。将你下载好的图片,拖入上面建好的image文件夹中。这是我以前写的一个静态网页,算一个html入门的简单的教程。1.首先在vscode新建一个文件夹,点击如图所示,点击蓝笔圈起的图标(左边的是新建文件)也是将动态图保存到image里,红圈部分就是我们要用的动图,后缀是.mp4。https://blog.csdn.net/yunanxxx/article/details/129189672?spm=1001.2014.3001.5501

 

我看见无数的她

张莉

长安的荔枝

xxx

和魂

吴伟明

柠檬炸弹

基次郎

数字抑郁时代

sala

我看见无数的她

张莉

长安的荔枝

xxx

和魂

吴伟明

柠檬炸弹

基次郎

数字抑郁时代

sala

  • 图书资讯

  • 那些不经意间收集的T恤故事,和根本连载不完的T恤们——《村上T》新书后记

    文治图书

    POPEYE杂志专访村上春树;采访者:野村训市。 ——最开始穿T恤的契机是什么呢? “我开始穿T恤已经是很久以前的事了,不过在我十几岁的时候,身边还根本没有穿T恤的文化。 只有类似于汗衫、内衣之类的东西,上面没...

6.右侧的热门标签我使用的浮动定位 float: right; 

存在问题:缩小窗口这整个div会乱跑。 

7.畅销图书榜

畅销图书榜

关注我们

豆瓣小站 微博 微信

 

完整代码:





    豆瓣读书2.0
    
    
    
    
    
    



    

我看见无数的她

张莉

长安的荔枝

xxx

和魂

吴伟明

柠檬炸弹

基次郎

数字抑郁时代

sala

我看见无数的她

张莉

长安的荔枝

xxx

和魂

吴伟明

柠檬炸弹

基次郎

数字抑郁时代

sala

  • 图书资讯

  • 那些不经意间收集的T恤故事,和根本连载不完的T恤们——《村上T》新书后记

    文治图书

    POPEYE杂志专访村上春树;采访者:野村训市。 ——最开始穿T恤的契机是什么呢? “我开始穿T恤已经是很久以前的事了,不过在我十几岁的时候,身边还根本没有穿T恤的文化。 只有类似于汗衫、内衣之类的东西,上面没...

畅销图书榜

关注我们

豆瓣小站 微博 微信

你可能感兴趣的:(css,html,前端)