仿豆瓣主页静态页面
2023年1月做的一个前端小项目。
目标
未登陆时的 豆瓣主页 静态页面模仿(细节有些出入)
著作权声明
本人模仿并展示豆瓣首页静态页面仅出于学习目的,无任何商业意图。如有侵权,请通过 tangjiayan2019@gmail.com 联络本人,我会立刻删除。
不过根据《中华人民共和国著作权法》 第二十四条:
第二十四条 在下列情况下使用作品,可以不经著作权人许可,不向其支付报酬,但应当指明作者姓名或者名称、作品名称,并且不得影响该作品的正常使用,也不得不合理地损害著作权人的合法权益: (一)为个人学习、研究或者欣赏,使用他人已经发表的作品; (二)…… ……
应该没什么问题。
CSS 代码太多了,就不介绍了,这里只简单介绍 HTML 代码。
页眉
页眉由 Logo、搜索框 和 导航栏组成。
Logo 和 搜索框 采用左浮动,导航栏 采用右浮动,涉及到浮动就要注意高度坍塌。
Logo
logo 使用 <h1>
元素,以实现 SEO 优化。logo 图片由 <a>
元素的 background
提供。
<h1>
<a href="">
<span>豆瓣网</span>
</a>
</h1>
搜索框
搜索框整体采用表单元素 <form>
,以实现回车搜索功能。它由输入框 <input>
和放大镜按钮 <button>
组成,放大镜图标采用 <img>
元素,用绝对定位放到搜索框内。
<form>
<input type="text" class="txt" placeholder="书、影、音等">
<button>
<img src="media/search.png" alt="">
</button>
</form>
导航栏
导航栏可以采用无序列表,也可以采用一系列 <a>
元素,这里采用后者,因为前者通常是用于多级导航栏的情况,这里只有一级导航栏。
<nav class="menu right clearfix">
<a href="" class="menu-book">
<span>读书</span>
</a>
...
</nav>
导航栏显示其实用的是一张精灵图和两张图片:
给相应的 <a>
元素定位相应的背景图就行了。
登录/注册区域
该区域可分为两个部分,一是右边的登录/注册框,二是其他,先说登录/注册框。
登录/注册框概览
登录/注册框其实是另一个网页,通过 <iframe>
元素嵌入,所以新建一个 loginframe.html
文件来写代码。
它分为两个表单和一个二维码登录页面。表单一是 “短信登录/注册”,表单二是 “密码登录”,二者的样式布局差不多,这里只介绍前者。
短信/密码 切换选项卡
用两个 <span>
就行了。类 selected
表示选中时的样式;left
和 right
分别表示左、右浮动。
<div class="switch-menu clearfix">
<span class="left selected">短信登录/注册</span>
<span class="right">密码登录</span>
</div>
协议声明
协议声明采用一个 <p>
元素套上一个 <a>
元素。
<p class="txt">
请仔细阅读
<a href="">豆瓣使用协议、豆瓣个人信息保护政策</a>
</p>
手机号及验证码输入框
手机号及验证码输入框用 <input>
元素;获取验证码
使用绝对定位放到验证码输入框内。
手机号限制最大字符长度 11
,验证码限制 6
。
<div class="form-item">
<input type="text" maxlength="11" placeholder="手机号" class="more-text-indent">
<div class="region-code">
<div>
+86
</div>
<div class="choose-area hidden">
</div>
</div>
</div>
<div class="form-item">
<input type="text" maxlength="6" placeholder="验证码">
<a href="" class="vertify-code">
获取验证码
</a>
</div>
选择国际区号
叉号用字母 X
,hover
时变色;国家及区号用无序列表,使用 overflow: auto
实现滚动条;单独设定选中的类样式,变色并通过背景图加个对号。
(找图标时 iconfont 刚好在维护,进不去,就随便找了一个对号图片,将就着看吧)
<div class="choose-area hidden">
<div class="center">
<div class="title">
选择国际区号
<div class="close">X</div>
</div>
<ul>
...
</ul>
</div>
</div>
登录豆瓣按钮
“登录豆瓣” 用 <button>
元素,设置 disabled
禁用伪类 css 样式;“收不到验证码” 用 <a>
元素,用绝对定位让其靠右。
<div class="form-item">
<button disabled class="btn">登录豆瓣</button>
</div>
<div class="form-item">
<span class="no-code">
<a href="">收不到验证码</a>
</span>
</div>
第三方登录
就是文字和图片。
<div class="bottom">
<span class="msg">第三方登录:</span>
<a href="">
<img src="media/wechat.png">
</a>
<a href="">
<img src="media/weibo.png">
</a>
</div>
二维码登录页面
也是文字和图片。
<div class="code-login" hidden>
<div class="title">
二维码登录
</div>
<div class="code">
<img src="media/qrcode.png" alt="">
</div>
<div class="tip">
请打开豆瓣 App 扫一扫或 <a href="">短信登录验证</a>
</div>
</div>
右上角切换图标
其实就是两张图片,通过背景图放在 <i>
元素上。
<div class="switch">
<!-- <i class="icon switch-qrcode"></i> -->
<i class="icon switch-pc"></i>
</div>
另外,切换图标在鼠标 hover
时会提示 “扫码登录” / “短信登录/注册”,用一个属性默认为 hidden
的元素,css 中通过 .switch:hover+.pointer.tip
设置 display
为 block
即可。
<div class="pointer" hidden>
<span>扫码登录</span>
<!-- <span>短信登录/注册</span> -->
</div>
其他
登录注册框以外的区域 html 代码如下。
<div class="banner">
<div class="container clearfix">
<iframe src="loginframe.html" frameborder="0" class="right login-box"></iframe>
<div class="download right">
<h1 class="title">
豆瓣
<span>7.0</span>
</h1>
<div class="download-btn left">
<button class="btn">下载豆瓣 App</button>
</div>
<div class="qrcode">
<img src="media/icon_qrcode_green.png" alt="">
<div class="image" hidden>
<img src="media/qrcode.png" alt="" >
<p>iOS / Android 扫码直接下载</p>
</div>
</div>
</div>
</div>
</div>
至此登录注册框就完事了,在 index.html
中通过 <iframe>
调用就行。
分栏
纵览之后的区域,可以发现它们都是由左/右边栏和主区域构成,因此事先大概写好统一样式,包括左/右浮动和盒子尺寸,写到各区域时用到什么就放什么。
另外,主区域为了避开左右浮动的盒子,通过 overflow: hidden
创建 BFC。
隔行变色
每一区域是灰白交替变色的。
每一区域类名为 section
,然后用 css 的 nth-child
伪类选择器即可。
.section:nth-child(even) {
background: #f7f7f7;
}
热点内容
由主区域和右边栏构成,先说右边栏。
广告内容就是图片和文字。
<div class="ad">
<a href="">
<img src="media/ad.png" alt="">
</a>
<span>广告</span>
</div>
对于广告下面的 “热门话题”,观察网页的内容会发现,这种列表样式多次被用到,因此可以写个公用的样式。
首先是热门话题的标题,需要注意的是 “去话题广场” 前后括号的添加,当然可以在 html 代码中直接添加,这里采用 .link::before
和 .link::after
来添加,通过这种方式添加需要注意不要通过 <a>
元素的类样式来添加前后括号,因为这样 hover
时括号也会变色。
“热门话题” 之后的 6 个圆点也是采用 .title::after
添加的。
<div class="section-title">
<h3 class="title">热门话题</h3>
<span class="link">
<a href="">去话题广场</a>
</span>
</div>
然后是热门话题的列表,如果想考虑万全的话可以加个 word-break: break-all
,以防止一大串英文时不换行。
<ul class="hot-list">
<li>
<div class="title">
<a href="">Lorem ipsum dolor sit.</a>
</div>
<div class="desc">
<span>XXX万次浏览</span>
</div>
</li>
...
</ul>
接着就是主区域内容了。首先是其标题,这时就可以引用上面说过的公用样式了。
<div class="section-title">
<h3 class="title">热点内容</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
主区域的内容分为两部分:左边的图像及描述,右边的文字列表。
左边的图像框为了对齐,设置为 inline-block
,并使用垂直顶部对齐 vertical-align: top
。
<div class="left">
<ul>
<li>
<div class="img">
<a href="">
<img src="media/marco.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, reprehenderit?</a>
<span>XX张照片</span>
</div>
</li>
...
</ul>
</div>
右边的文字列表用 <ul>
和 <li>
。
<div class="right">
<ul>
<li>
<a href="">Lorem.</a>
<div class="title">
Lorem的日记
</div>
<div class="desc">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, sed?
</div>
</li>
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
...
</ul>
</div>
豆瓣时间
由左边栏和主区域构成。
<div class="section">
<div class="container clearfix">
<div class="aside-left">
<h2 class="title time-title">
<a href="" class="dark-color">豆瓣时间</a>
</h2>
</div>
<div class="main ">
<div class="section-title">
<h3 class="title">热门专栏</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="time-main">
<ul>
<li>
<div class="img">
<a href="">
<img src="media/time-content.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">Lorem.</a>
<span>
音频专栏
</span>
</div>
</li>
...
</ul>
</div>
</div>
</div>
</div>
电影
由左边栏、主区域和右边栏构成。
左边栏需要注意的有两点,一是 “&” 符号用字符实体 &
书写;二是有的元素后面有个 new
的图片,这里通过 a.new::after
添加背景图。
<div class="aside-left">
<div class="title">
<h2>
<a href="">电影</a>
</h2>
</div>
<ul class="left-menu">
<li>
<a href=""> 影讯&购票 </a>
</li>
<li>
<a href="" class="new">选电影</a>
</li>
...
</ul>
</div>
右边栏中,近期热门的电影列表采用有序列表 <ol>
,但一般的重置样式表会把序号重置掉,所以要设置 list-style-type: decimal
,还有编号的位置 list-style-position: inside
。
<div class="aside-right movie-area">
<div class="section-title">
<h2 class="title">影片分类</h2>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">爱情</a></li>
<li><a href="">剧情</a></li>
...
</ul>
<div class="section-title" style="margin-top: 30px;">
<h2 class="title">近期热门</h2>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ol class="order-movie-list">
<li><a href="">瞬息全宇宙</a></li>
<li><a href="">目中无人</a></li>
...
</ol>
</div>
主区域中,评分的星星用的是精灵图,它在整个豆瓣网站中肯定是通用样式,所以写到 common.css
里。
<div class="main">
<div class="section-title">
<h2 class="title">正在热映</h2>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="movie-area">
<ul class="item-list">
<li>
<div class="img">
<a href="">
<img src="media/inception.webp" alt="">
</a>
</div>
<div class="words">
<a href="" class="dark-color">盗梦空间</a>
</div>
<div>
<span class="star star00"></span>
<span class="num">0.0</span>
</div>
<div class="button">
<a href="" class="block-link">选座购票</a>
</div>
</li>
...
</ul>
</div>
</div>
选座购票
按钮的样式在下面的 “读书” 区域中的 免费试读
也有用到,可以做个通用样式。
小组、读书
用上面写过的样式稍作修改即可,不放代码了。
对于小组主区域的文字内容,当文字很多时,为了避开浮动的图片盒子,通过 overflow: hidden
创建为 BFC。
豆瓣阅读以及之后的 app 图标用的是精灵图:
另外,图标右边和下边的阴影,涉及到 CSS3 的 box-shadow 属性。
音乐
对于右边栏的序号,如果使用 <ul>
自带的序号,会不太好调整序号垂直位置的 css 样式,所以这里直接用 <span>
元素打出来。
音乐人列表的每一项内容,为了排成一行,可以采用左右浮动,也可以采用行块盒,这里用前者。
另外,“音乐人” 的图片 hover
时会有个播放图标蒙层,这里我使用 svg 练习一下。
<svg t="1656150422962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5657" width="50" height="50">
<path d="M870.2 466.333333l-618.666667-373.28a53.333333 53.333333 0 0 0-80.866666 45.666667v746.56a53.206667 53.206667 0 0 0 80.886666 45.666667l618.666667-373.28a53.333333 53.333333 0 0 0 0-91.333334z" fill="#fff" p-id="5658"></path>
</svg>
豆品、同城 和上面差不多,略。
页脚
一个 div.left
和 一个 div.right
就完事。 两个小图标要 vertical-align: middle
。
总结
前端是个细活,有 1px 那么细。