HTML+CSS+练习静态页面+实现豆瓣首页资源-CSDN文库

共65个文件

jpg：23个

webp：19个

png：11个

html

需积分: 46 44 浏览量 2022-06-30 18:04:19 上传评论 5 收藏 1.14MB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

项目练习-豆瓣首页.zip （65个子文件）

项目练习-豆瓣首页

css

reset.css 1KB

common.css 1KB

loginframe.css 5KB

index.css 15KB

img

logo_db.png 2KB

adv2.jpg 23KB

group8.jpg 1KB

movie4.webp 21KB

group2.webp 18KB

app_icons.jpg 24KB

doupin1.jpg 66KB

movie5.webp 24KB

time2.jpg 25KB

video1.webp 24KB

jubao.jpg 5KB

sitename.png 6KB

banner-bg.jpg 167KB

city1.jpg 4KB

group1.webp 11KB

book2.jpg 73KB

doubanapp_qrcode.png 40KB

movie2.webp 23KB

group6.webp 7KB

group3.webp 12KB

book1.jpg 69KB

p2.webp 6KB

biaoshi.gif 91B

movie1.webp 16KB

music1.jpg 16KB

qrlogin_code.png 676B

new_menu.gif 74B

book3.jpg 89KB

group7.jpg 2KB

movie3.webp 16KB

icon_qrcode_green.png 233B

book4.jpg 82KB

shijian_home_nav.png 1KB

movie8.webp 12KB

p1.webp 14KB

doupin2.jpg 87KB

movie6.webp 21KB

music-player1.jpg 2KB

group4.webp 9KB

star-bg.png 2KB

city3.jpg 3KB

adv1.jpg 20KB

movie7.webp 23KB

iconfont-pc.png 1KB

p4.webp 16KB

city4.jpg 5KB

city2.jpg 4KB

group5.webp 14KB

jubao.png 3KB

group6.jpg 2KB

iconfont-qrcode.png 4KB

music2.jpg 16KB

time1.jpg 12KB

tousu.jpeg 3KB

nav_logo.png 4KB

p3.webp 15KB

index.html 85KB

注意事项.md 41B

概述.md 73B

loginframe.html 6KB

favicon.ico 6KB

<!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> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="css/index.css"> </head> <body> <header class="header"> <div class="container clearfix"> <div class="logo left"> <h1> <a href="https://www.douban.com/">豆瓣</a> </h1> </div> <div class="search left"> <form action="https://www.douban.com/search" method="get"> <input type="text" placeholder="书籍、电影、音乐、小组、小站、成员" class="txt"> <button> <i class="iconfont iconxiazai17"></i> </button> </form> </div> <nav class="menu right clearfix"> <a href="https://book.douban.com/" class="menu-read" target="_blank">豆瓣读书</a> <a href="https://movie.douban.com/" class="menu-movie" target="_blank">豆瓣电影</a> <a href="https://music.douban.com/" class="menu-music" target="_blank">豆瓣音乐</a> <a href="https://www.douban.com/group/" class="menu-group" target="_blank">豆瓣小组</a> <a href="https://douban.fm/" class="menu-fm" target="_blank">豆瓣FM</a> <a href="https://www.douban.com/location/" class="menu-city" target="_blank">豆瓣同城</a> <a href="https://time.douban.com/?dt_time_source=douban-web_anonymous_index_top_nav" class="menu-time" target="_blank">豆瓣时间</a> <a href="https://market.douban.com/?utm_campaign=anonymous_top_nav&utm_source=douban&utm_medium=pc_web/" class="menu-doupin" target="_blank">豆瓣豆品</a> </nav> </div> </header> <div class="banner"> <div class="container clearfix"> <iframe class="right loginarea" src="loginframe.html" frameborder="0"></iframe> <div class="slogan right"> <h1 class="title"> 豆瓣 <span>7.0</span> </h1> <div class="download"> <button class="btn">下载豆瓣 App</button> <a href="" class="qrcode"> <img src="./img/icon_qrcode_green.png" alt=""> </a> <div class="qrcode-img hidden"> <img src="img/doubanapp_qrcode.png" alt=""> <p>iOS / Android 扫码直接下载</p> </div> </div> </div> </div> </div>  <div>  <div class="section"> <div class="container clearfix">  <div class="aside-right"> <div class="adv"> <a href=""> <img src="./img/adv1.jpg" alt=""> </a> </div> <div class="section-title"> <h3 class="title">热门话题</h3> <span class="link"> <a href="">去话题广场</a> </span> </div> <ul class="hot-list item-list"> <li> <div class="title"> <a href="">跟着电影做美食</a> </div> <div class="desc"> <span>2.9万次浏览</span> </div> </li> <li> <div class="title"> <a href="">你理想中家是什么样的</a> </div> <div class="desc"> <span>13.1万次浏览</span> </div> </li> <li> <div class="title"> <a href="">我家自有清凉法</a> </div> <div class="desc"> <span>8.6万次浏览</span> </div> </li> <li> <div class="title"> <a href="">旅途中难忘的美食</a> </div> <div class="desc"> <span>5.3万次浏览</span> </div> </li> <li> <div class="title"> <a href="">你心中最难忘的味道是什么？</a> </div> <div class="desc"> <span>11.5万次浏览</span> </div> </li> <li> <div class="title"> <a href="">那些从小吃到大的雪糕</a> </div> <div class="desc"> <span>8.2万次浏览</span> </div> </li> </ul> </div>  <div class="main"> <div class="section-title"> <h3 class="title">热门话题</h3> <span class="link"> <a href="">更多</a> </span> </div> <div class="hot-main clearfix"> <div class="left"> <ul> <li> <div class="img"> <a href=""> <img src="./img/p1.webp" alt=""> </a> </div> <div class="words"> <a href="">一些兔子</a> <span>65张照片</span> </div> </li> <li> <div class="img"> <a href=""> <img src="./img/p2.webp" alt=""> </a> </div> <div class="words"> <a href=""> 不能进入历史的历史</a> <span>19张照片</span> </div> </li> <li> <div class="img"> <a href=""> <img src="./img/p3.webp" alt=""> </a> </div> <div class="words">