前端页面豆瓣首页HTMLCSS图片2024最新下载
HTML代码：
<!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>
<h1>
<a href="https://www.douban.com/">豆瓣</a>
</h1>
<div class="head-div">
<div class="container clearfix">
<div class="head-logo fl" title="豆瓣网">
<h1>豆瓣网</h1>
</div>
<div class="head-search fl">
<form action="" method="post">
<input
type="text"
name="search"
id="search"
placeholder="书籍、电影、音乐、小组、小站、成员"
maxlength="60"
size="12"
autocomplete="off"
/>
<button><i class="iconfont icon-search"></i></button>
</form>
</div>
<nav class="head-nav fr clearfix">
<a target="_blank" href="https://book.douban.com/" class="link-book"
>豆瓣读书</a
>
<a
target="_blank"
href="https://movie.douban.com/"
class="link-movie"
>豆瓣电影</a
>
<a
target="_blank"
href="https://music.douban.com/"
class="link-music"
>豆瓣音乐</a
>
<a
target="_blank"
href="https://www.douban.com/location/"
class="link-location"
>豆瓣同城</a
>
<a
target="_blank"
href="https://www.douban.com/group/"
class="link-group"
>豆瓣小组</a
>
<a target="_blank" href="https://read.douban.com/" class="link-read"
>豆瓣阅读</a
>
<a target="_blank" href="https://douban.fm/" class="link-fm"
>豆瓣FM</a
>
<a
target="_blank"
href="https://time.douban.com/?dt_time_source=douban-web_anonymous_index_top_nav"
class="link-time"
>豆瓣时间</a
>
<a
target="_blank"
href="https://market.douban.com/?utm_campaign=anonymous_top_nav&utm_source=douban&utm_medium=pc_web"
class="link-market"
>豆瓣豆品</a
>
</nav>
</div>
</div>
</header>
<!-- 登录注册 -->
<div class="sign-div">
<div class="container clearfix">
<div class="download-div clearfix">
<h3>豆瓣 7.0</h3>
<button>下载豆瓣 App</button>
<div class="app-qrcode fr">
<a href="" class="qrcode-small">
<img src="img/icon-qr-small.png" alt="qrcode small" />
</a>
<div class="qrcode-big">
<img src="img/qrcode.png" alt="qrcode big" />
<p>iOS / Android 扫码直接下载</p>
</div>
</div>
</div>
<div class="sign-form-div fr clearfix">
<img
id="sign_form_icon"
src="img/icon-qrcode.png"
alt="icon qrcode"
class="corner-icon active"
/>
<img
id="sign_code_icon"
src="img/icon-pc.png"
alt="icon pc"
class="corner-icon"
/>
<!-- 登录表单 -->
<div id="sign_form" class="clearfix">
<div class="sign-mode clearfix">
<a id="sign_msg" href="" class="active"
>短信登录 / 注册</a
>
<a id="sign_pwd" href="" class="">密码登录</a>
</div>
<!-- 短信登录表单 -->
<form id="sign_msg_form" action="" class="sign-form clearfix">
<p class="sign-tips">
请仔细阅读
<a href="" target="_blank"
>豆瓣使用协议、豆瓣个人信息保护政策</a
>
</p>
<div class="form-item">
<span class="select" id="prefix">+86</span>
<input
type="text"
name="number"
autocomplete="off"
id="number"
placeholder="手机号"
/>
</div>
<div class="form-item">
<input
type="text"
name="code"
autocomplete="off"
id="code"
placeholder="验证码"
/>
<a href="">获取验证码</a>
</div>
<button type="submit" id="submit" disabled>登录豆瓣</button>
<p class="sign-tips fr">
<a href="" target="_blank">收不到验证码</a>
</p>
</form>
<!-- 密码登录表单 -->
<form id="sign_pwd_form" action="" class="sign-form clearfix">
<p class="sign-tips fr">
<a href="" target="_blank">找回密码</a>
</p>
<div class="form-item fl">
<input
type="text"
name="username"
autocomplete="off"
id="username"
placeholder="手机号 / 邮箱"
/>
</div>
<div class="form-item fl">
<input
type="password"
name="password"
autocomplete="off"
id="password"
placeholder="密码"
/>
</div>
<button type="submit" id="submit" disabled>登录豆瓣</button>
<p class="sign-tips fr">
<a href="" target="_blank">海外手机登录</a>
</p>
</form>
<div class="third-sign fl">
<span>第三方登录：</span>
<button><i class="iconfont icon-imagewechat"></i></button>
<button><i class="iconfont icon-weibo"></i></button>
</div>
</div>
<!-- 登录二维码 -->
<div id="sign_code">
<h3>二维码登录</h3>
<img src="img/qrcode.png" alt="sign code" />
<div class="sign-tips-code">
请打开豆瓣 App 扫一扫 或
<a href="">短信登录验证</a>
</div>
</div>
</div>
</div>
</div>
<!-- 主区域，隔开.section的div，否则nth-child计算时会受到前面div数量的影响 -->
<div>
<!-- 热点内容 -->
<div class="section">
<div class="container clearfix">
<div class="right">
<div class="ads">
<img src="img/adv1.jpg" alt="adv1" />
<span>广告</span>
</div>
<div class="link-list">
<h2 class="more-title">
<span class="main-title">热门话题</span>
<span class="more">
<a href="" class="block-a">去话题广场</a>
</span>
</h2>
<ul>
<li>
<a href="" class="block-a">你那里的核酸亭怎么样了</a>
<span>29.4万次浏览</span>
</li>
<li>
<a href="" class="block-a">纪念沈从文</a>
<span>沈从文逝世30周年 · 63.6万次浏览</span>
</li>
<li>
<a href="" class="block-a">学生观察日记</a>
<span>新话题 · 91.1万次浏览</span>
</li>
<li>
<a href="" class="block-a">分享看过的电影中最触动你的台词</a>
<span>4.7万次浏览</span>
</li>
<li>
<a href="" class="block-a">旅行途中的惊人发现</a>
<span>4.9万次浏览</span>
</li>
<li>
<a href="" class="block-a">你为反对性骚扰做出的努力</a>
<span>329.4万次浏览</span>
</li>
</ul>
</div>
</div>
<div class="main">
<h2 class="more-title">
<span class="main-title">热点内容</span>
<span class="more">
<a href="" class="block-a">更多</a>
</span>
</h2>
<div class="pics-div clearfix">
<ul class="fl">
<li class="pic-item">
<a href="">
<img src="img/photo1.png" alt="photo1" />
</a>
<p>
<a href="" class="block-a">花痴</a>
<span>207张照片</span>
</p>
</li>
<li class="pic-item">
<a href="">
<img src="img/photo2.png" alt="photo2" />
</a>
<p>
<a href="" class="block-a">一些兔子</a>
<span>72张照片</span>
</p>
</li>
<li class="pic-item">
<a href="">
<img src="img/photo3.png" alt="photo3" />
</a>
<p>
<a href="" class="block-a">辣团和南山の漫画</a>
<span>34张照片</span>
</p>
</li>
<li class="pic-item">
<a href="">
<img src="img/photo4.png" alt="photo4" />
</a>
<p>
<a href="" class="block-a">不能进入历史的历史</a>
<span>19张照片</span>
</p>
</li>
</ul>
<ul class="fr">
<li class="hot-link expand">
<a class="block-a" href="">媒介蒙太奇 之 观看奥运</a>
<h4 class="author">王璞一零一的日记</h4>
<p>
媒介蒙太奇·观看奥运 I
2000年9月某天，我刚下课，经过北大某老教学楼旁的某老食堂，里面突然爆出剧烈的欢呼声。那大约是悉尼奥运某场乒乓球或羽毛球决赛，学生们...
</p>
</li>
<li class="hot-link">
<a class="block-a" href=""
>两个月108公里，业余游泳爱好者路在何方</a
>
</li>
<li class="hot-link">
<a class="block-a" href="">一名平凡读者的买书总结</a>
</li>
<li class="hot-link">
<a class="block-a" href=""
>根据真实案件改编的悬疑小说：死去的人，真的会为了复仇而活过来吗</a
>
</li>
<li class="hot-link">
<a class="block-a" href="">叶芝和他的拜占庭诗篇</a>
</li>
<li class="hot-link">
<a class="block-a" href="">实习记者的一天</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 豆瓣时间 -->
<div class="section">
<div class="container clearfix">
<div class="left">
<h3 class="left-title"><a href="" class="block-a">豆瓣时间</a></h3>
</div>
<div class="main">
<h2 class="more-title">
<span class="main-title">热门专栏</span>
<span class="more">
<a href="" class="block-a">更多</a>
</span>
</h2>
<ul class="time-div">
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time1.jpg" alt="time1" />
<i class="iconfont icon-video"></i>
</a>
<a href="" class="block-a time-title"
>构筑新东方美学——奥斯卡得主叶锦添教你用视觉讲故事</a
>
<span>视频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time2.jpg" alt="time2" />
<i class="iconfont icon-yinpin"></i>
</a>
<a href="" class="block-a time-title"
>艺术的慰藉——央美名师精讲中国艺术史</a
>
<span>音频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time1.jpg" alt="time1" />
<i class="iconfont icon-video"></i>
</a>
<a href="" class="block-a time-title"
>构筑新东方美学——奥斯卡得主叶锦添教你用视觉讲故事</a
>
<span>视频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time2.jpg" alt="time2" />
<i class="iconfont icon-yinpin"></i>
</a>
<a href="" class="block-a time-title"
>艺术的慰藉——央美名师精讲中国艺术史</a
>
<span>音频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time1.jpg" alt="time1" />
<i class="iconfont icon-video"></i>
</a>
<a href="" class="block-a time-title"
>构筑新东方美学——奥斯卡得主叶锦添教你用视觉讲故事</a
>
<span>视频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time2.jpg" alt="time2" />
<i class="iconfont icon-yinpin"></i>
</a>
<a href="" class="block-a time-title"
>艺术的慰藉——央美名师精讲中国艺术史</a
>
<span>音频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time1.jpg" alt="time1" />
<i class="iconfont icon-video"></i>
</a>
<a href="" class="block-a time-title"
>构筑新东方美学——奥斯卡得主叶锦添教你用视觉讲故事</a
>
<span>视频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time2.jpg" alt="time2" />
<i class="iconfont icon-yinpin"></i>
</a>
<a href="" class="block-a time-title"
>艺术的慰藉——央美名师精讲中国艺术史</a
>
<span>音频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time1.jpg" alt="time1" />
<i class="iconfont icon-video"></i>
</a>
<a href="" class="block-a time-title"
>构筑新东方美学——奥斯卡得主叶锦添教你用视觉讲故事</a
>
<span>视频专栏</span>
</li>
<li class="time-item">
<a href="" class="time-cover">
<img src="img/time2.jpg" alt="time2" />
<i class="iconfont icon-yinpin"></i>
</a>
<a href="" class="block-a time-title"
>艺术的慰藉——央美名师精讲中国艺术史</a
>
<span>音频专栏</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 电影 -->
<div class="section">
<div class="container clearfix">
<div class="left">
<h3 class="left-title movie-title">
<a href="" class="block-a">电影</a>
</h3>
<ul>
<li class="left-list">
<a href="" class="block-a">影讯&购票</a>
</li>
<li class="left-list">
<a href="" class="block-a">选电影</a>
</li>
<li class="left-list">
<a href="" class="block-a">电视剧</a>
</li>
<li class="left-list">
<a href="" class="block-a">排行榜</a>
</li>
<li class="left-list">
<a href="" class="block-a">影评</a>
</li>
<li class="left-list">
<a href="" class="block-a">预告片</a>
</li>
<li class="left-list">
<a href="" class="block-a">问答</a>
</li>
</ul>
</div>
<div class="right">
<h2 class="more-title">
<span class="main-title">近期热门</span>
<span class="more">
<a href="" class="block-a">更多</a>
</span>
</h2>
<ol class="number-list">
<li>
<a href="" class="block-a">Lorem, ipsum dolor.</a>
</li>
<li>
<a href="" class="block-a">Repellendus, maxime iusto?</a>
</li>
<li>
<a href="" class="block-a">Voluptates, et molestiae.</a>
</li>
<li>
<a href="" class="block-a">In, voluptates incidunt.</a>
</li>
<li>
<a href="" class="block-a"
>Nesciunt, voluptatem. Consequuntur.</a
>
</li>
<li>
<a href="" class="block-a">Voluptatem, error architecto!</a>
</li>
<li>
<a href="" class="block-a">Illo, ullam commodi.</a>
</li>
<li>
<a href="" class="block-a">Eos, at qui.</a>
</li>
<li>
<a href="" class="block-a">Architecto, ex iure!</a>
</li>
<li>
<a href="" class="block-a">Consectetur, iure id?</a>
</li>
</ol>
</div>
<div class="main">
<h2 class="more-title">
<span class="main-title">正在热映</span>
<span class="more">
<a href="" class="block-a">更多</a>
</span>
</h2>
<ul class="movie-list">
<li>
<a href=""><img src="img/movie1.webp" alt="movie1" /></a>
<a href="" class="block-a">银河护卫队3</a>
<span class="stars star5">8.5</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie2.webp" alt="movie2" /></a>
<a href="" class="block-a">长空之王</a>
<span class="stars star4">6.6</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie1.webp" alt="movie1" /></a>
<a href="" class="block-a">银河护卫队3</a>
<span class="stars star5">8.5</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie2.webp" alt="movie2" /></a>
<a href="" class="block-a">长空之王</a>
<span class="stars star4">6.6</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie1.webp" alt="movie1" /></a>
<a href="" class="block-a">银河护卫队3</a>
<span class="stars star5">8.5</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie2.webp" alt="movie2" /></a>
<a href="" class="block-a">长空之王</a>
<span class="stars star4">6.6</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie1.webp" alt="movie1" /></a>
<a href="" class="block-a">银河护卫队3</a>
<span class="stars star5">8.5</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie2.webp" alt="movie2" /></a>
<a href="" class="block-a">长空之王</a>
<span class="stars star4">6.6</span>
<button>选座购票</button>
</li>
</ul>
</div>
</div>
</div>
<!-- 电影 -->
<div class="section">
<div class="container clearfix">
<div class="left">
<h3 class="left-title movie-title">
<a href="" class="block-a">电影</a>
</h3>
<ul>
<li class="left-list">
<a href="" class="block-a">影讯&购票</a>
</li>
<li class="left-list">
<a href="" class="block-a">选电影</a>
</li>
<li class="left-list">
<a href="" class="block-a">电视剧</a>
</li>
<li class="left-list">
<a href="" class="block-a">排行榜</a>
</li>
<li class="left-list">
<a href="" class="block-a">影评</a>
</li>
<li class="left-list">
<a href="" class="block-a">预告片</a>
</li>
<li class="left-list">
<a href="" class="block-a">问答</a>
</li>
</ul>
</div>
<div class="right">
<h2 class="more-title">
<span class="main-title">近期热门</span>
<span class="more">
<a href="" class="block-a">更多</a>
</span>
</h2>
<ol class="number-list">
<li>
<a href="" class="block-a">Lorem, ipsum dolor.</a>
</li>
<li>
<a href="" class="block-a">Repellendus, maxime iusto?</a>
</li>
<li>
<a href="" class="block-a">Voluptates, et molestiae.</a>
</li>
<li>
<a href="" class="block-a">In, voluptates incidunt.</a>
</li>
<li>
<a href="" class="block-a"
>Nesciunt, voluptatem. Consequuntur.</a
>
</li>
<li>
<a href="" class="block-a">Voluptatem, error architecto!</a>
</li>
<li>
<a href="" class="block-a">Illo, ullam commodi.</a>
</li>
<li>
<a href="" class="block-a">Eos, at qui.</a>
</li>
<li>
<a href="" class="block-a">Architecto, ex iure!</a>
</li>
<li>
<a href="" class="block-a">Consectetur, iure id?</a>
</li>
</ol>
</div>
<div class="main">
<h2 class="more-title">
<span class="main-title">正在热映</span>
<span class="more">
<a href="" class="block-a">更多</a>
</span>
</h2>
<ul class="movie-list">
<li>
<a href=""><img src="img/movie1.webp" alt="movie1" /></a>
<a href="" class="block-a">银河护卫队3</a>
<span class="stars star5">8.5</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie2.webp" alt="movie2" /></a>
<a href="" class="block-a">长空之王</a>
<span class="stars star4">6.6</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie1.webp" alt="movie1" /></a>
<a href="" class="block-a">银河护卫队3</a>
<span class="stars star5">8.5</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie2.webp" alt="movie2" /></a>
<a href="" class="block-a">长空之王</a>
<span class="stars star4">6.6</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie1.webp" alt="movie1" /></a>
<a href="" class="block-a">银河护卫队3</a>
<span class="stars star5">8.5</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie2.webp" alt="movie2" /></a>
<a href="" class="block-a">长空之王</a>
<span class="stars star4">6.6</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie1.webp" alt="movie1" /></a>
<a href="" class="block-a">银河护卫队3</a>
<span class="stars star5">8.5</span>
<button>选座购票</button>
</li>
<li>
<a href=""><img src="img/movie2.webp" alt="movie2" /></a>
<a href="" class="block-a">长空之王</a>
<span class="stars star4">6.6</span>
<button>选座购票</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer>
<div class="container">
<p>© 2005－2023 douban.com, all rights reserved 北京豆网科技有限公司</p>
<div>
<a href="" class="block-a"> aaa </a> |
<a href="" class="block-a"> aaa </a> |
<a href="" class="block-a"> aaa </a> |
<a href="" class="block-a"> aaa </a> |
<a href="" class="block-a"> aaa </a>
</div>
<p>
京网文[2021]2980-826号
<a href="" class="block-a">新出发京批字第直160029号</a>
（署）网出证（京）字第120号
</p>
<p>
违法和不良信息/涉未成年人有害信息投诉：<a href="" class="block-a"
>tousu@douban.com</a
>
</p>
<p>违法和不良信息投诉电话：4008353331-9</p>
<p>
网络从业者不良行为举报：<a href="" class="block-a"
>jubao@douban.com</a
>
</p>
<div>
<img src="img/jubao.png" alt="jubao" />
<a href="" class="block-a">中国互联网举报中心</a>
<span>电话：12377</span>
<img src="img/biaoshi.gif" alt="biaoshi" />
<a href="" class="block-a">京公网安备11010502000728</a>
</div>
<div class="fr">
<a href="" class="block-a"> aaa </a> ·
<a href="" class="block-a"> aaa </a> ·
<a href="" class="block-a"> aaa </a> ·
<a href="" class="block-a"> aaa </a> ·
<a href="" class="block-a"> aaa </a> ·
<a href="" class="block-a"> aaa </a> ·
<a href="" class="block-a"> aaa </a>
</div>
</div>
</footer>
</body>
</html>
CSS：
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button {
border: none;
background: none;
cursor: pointer;
}
a {
text-decoration: none;
color: inherit;
}
input {
background-color: transparent;
outline: none;
border: none;
}
@import "reset.css";
@import "//at.alicdn.com/t/c/font_4057600_lvlmk9thdb.css";
/* =============== 页面通用样式 =============== */
:root {
--black: #111111;
--gray: #c3c3c3;
--gray-border: #e4e6e5;
--green-bg: #edf4ec;
--green-main: #00b51d;
--green-disabled: #42bd5680;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #111;
}
.container {
width: 950px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.block-a {
color: #3377aa;
font-size: 12px;
}
.block-a:hover {
background-color: #3377aa;
color: #fff !important;
}
.block-a:active {
background-color: #f93;
color: #fff !important;
}
.more-title {
width: 100%;
margin-bottom: 20px;
font-size: 15px;
color: #007722;
}
.more-title .main-title::after {
content: " · · · · · · ";
}
.more-title .more::before {
content: "(";
}
.more-title .more::after {
content: ")";
}
.section {
background-color: #fff;
}
.section:nth-child(2n) {
background-color: #f7f7f7;
}
.section .left {
float: left;
margin-right: 30px;
}
.section .right {
float: right;
margin-left: 30px;
}
.section .main {
/* 创建BFC */
overflow: hidden;
}
.section .container {
padding: 40px 0 20px;
}
.section .left h3 {
font-size: 24px;
margin-bottom: 12px;
}
@import "common.css";
/* =============== 制作页面头部 =============== */
header {
width: 100%;
background-color: var(--green-bg);
}
header > h1 {
width: 102px;
height: 20px;
margin: 7px 13px;
display: inline-block;
}
header > h1 a {
display: block;
width: 100%;
height: 0;
padding-top: 20px;
overflow: hidden;
background: url(../img/logo_db.png) no-repeat left top/contain;
}
header .head-div {
width: 100%;
padding: 30px 0 24px;
background-color: #fff;
}
/* logo */
.head-div .container {
width: 1080px;
}
.head-div .container .head-logo {
width: 73px;
height: 24px;
margin: 4px 24px 0 0;
}
.head-div .container .head-logo h1 {
height: 0;
padding-top: 24px;
overflow: hidden;
background: url(../img/sitename.png) no-repeat left top/contain;
}
/* search */
.head-div .container .head-search {
width: 270px;
border: 1px solid var(--gray-border);
box-sizing: border-box;
vertical-align: middle;
position: relative;
}
.head-div .container .head-search input {
width: 240px;
height: 30px;
padding: 5px 0 5px 5px;
font-size: 13px;
display: inline-block;
box-sizing: border-box;
}
.head-div .container .head-search input::-webkit-input-placeholder {
color: var(--gray);
}
.head-div .container .head-search button {
width: 30px;
height: 30px;
color: var(--gray);
position: absolute;
top: 0;
right: 0;
}
/* nav */
.head-div .container .head-nav {
font-size: 0;
margin-top: 5px;
}
.head-div .container .head-nav a {
display: inline-block;
width: 40px;
height: 20px;
margin-right: 18px;
text-indent: -4em;
overflow: hidden;
vertical-align: middle;
background: url(../img/nav_logo@2x.png) no-repeat 100% 100%;
background-image: -webkit-image-set(
url(../img/nav_logo@1x.png) 1x,
url(../img/nav_logo@2x.png) 2x
);
background-image: image-set(
url(../img/nav_logo@1x.png) 1x,
url(../img/nav_logo@2x.png) 2x
);
}
.head-div .container .head-nav a.link-book {
background-position: 0 0;
}
.head-div .container .head-nav a.link-movie {
background-position: -60px 0;
}
.head-div .container .head-nav a.link-music {
background-position: -120px 0;
}
.head-div .container .head-nav a.link-location {
background-position: -299px 0;
}
.head-div .container .head-nav a.link-group {
background-position: -180px 0;
}
.head-div .container .head-nav a.link-read {
background-position: -360px 0;
}
.head-div .container .head-nav a.link-fm {
background-position: -241px 0;
}
.head-div .container .head-nav a.link-time {
background-position: -360px 0;
}
/* =============== 登录注册 =============== */
.sign-div {
height: 304px;
position: relative;
background: var(--green-bg) url(../img/banner-bg.jpg) no-repeat left top/auto
100%;
background-position: 25%;
}
.sign-div .container {
height: 100%;
}
/* app */
.sign-div .download-div {
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0 auto 475px;
}
.sign-div .download-div h3 {
font-size: 25px;
color: var(--black);
margin-bottom: 22px;
}
.sign-div .download-div button {
height: 30px;
background-color: var(--green-main);
color: #fff;
font-size: 12px;
text-align: center;
padding: 9px 21px;
margin-right: 5px;
border-radius: 2px;
box-sizing: border-box;
line-height: 1;
}
.sign-div .download-div .app-qrcode {
height: 30px;
position: relative;
z-index: 1;
}
.sign-div .download-div .app-qrcode .qrcode-small img {
width: 30px;
height: 30px;
border: 1px solid var(--green-main);
border-radius: 2px;
box-sizing: border-box;
display: block;
}
.sign-div .download-div .app-qrcode:hover .qrcode-big {
display: block;
}
.sign-div .download-div .app-qrcode .qrcode-big {
width: 200px;
height: 226px;
box-sizing: border-box;
background-color: #fff;
padding: 20px;
position: absolute;
top: 0;
left: 0;
border-radius: 2px;
display: none;
}
.sign-div .download-div .app-qrcode .qrcode-big img {
width: 100%;
box-sizing: border-box;
}
.sign-div .download-div .app-qrcode .qrcode-big p {
font-size: 13px;
text-align: center;
margin-top: 10px;
color: #666;
}
/* form */
.sign-div .sign-form-div {
width: 300px;
height: 100%;
padding: 40px 10px 10px;
box-sizing: border-box;
position: relative;
}
.sign-div .sign-form-div .corner-icon {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
display: none;
}
.sign-div .sign-form-div .corner-icon.active {
display: block;
}
.sign-div .sign-form-div .sign-mode {
width: 280px;
height: 26px;
margin-bottom: 10px;
}
.sign-div .sign-form-div .sign-mode a {
float: left;
width: 50%;
height: 22px;
line-height: 1;
text-align: center;
font-size: 12px;
color: var(--gray);
border-bottom: 1px solid var(--gray);
box-sizing: border-box;
}
.sign-div .sign-form-div .sign-mode a.active {
font-weight: bold;
color: var(--black);
border-bottom: 1px solid var(--black);
}
/* input form */
.sign-div .sign-form-div .sign-form {
width: 100%;
box-sizing: border-box;
position: relative;
display: none;
}
.sign-mode:has(#sign_msg.active) ~ #sign_msg_form,
.sign-mode:has(#sign_pwd.active) ~ #sign_pwd_form,
#sign_form_icon.active ~ #sign_form,
#sign_code_icon.active ~ #sign_code {
display: block;
}
.sign-mode:has(#sign_msg.active) ~ #sign_pwd_form,
.sign-mode:has(#sign_pwd.active) ~ #sign_msg_form,
#sign_form_icon.active ~ #sign_code,
#sign_code_icon.active ~ #sign_form {
display: none;
}
.sign-div .sign-form .sign-tips {
margin-bottom: 10px;
font-size: 12px;
color: var(--gray);
}
.sign-div .sign-form .sign-tips a {
color: var(--green-main);
}
.sign-div .sign-form .sign-tips.fr {
margin: 10px 0;
}
.sign-div .sign-form .form-item {
width: 280px;
height: 33px;
padding: 5px;
margin-bottom: 10px;
border-radius: 2px;
border: 1px solid var(--gray-border);
background-color: #fff;
box-sizing: border-box;
position: relative;
}
.sign-div .sign-form .form-item input {
width: 100%;
height: 100%;
padding: 0 0 0 50px;
box-sizing: border-box;
}
.sign-div .sign-form .form-item input:first-child {
padding: 0 70px 0 5px;
}
.sign-div .sign-form .form-item .select {
border: none;
outline: none;
position: absolute;
left: 0;
top: 50%;
display: inline-block;
width: 50px;
line-height: 1.5;
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 0 3px;
margin-top: -10px;
cursor: pointer;
border-right: 1px solid var(--gray-border);
box-sizing: border-box;
}
.sign-div .sign-form .form-item a {
display: inline-block;
line-height: 1.8;
position: absolute;
right: 0;
top: 50%;
padding-right: 5px;
margin-top: -10px;
font-size: 12px;
color: var(--green-main);
}
.sign-div .sign-form button[type="submit"] {
background-color: var(--green-disabled);
width: 280px;
height: 34px;
border-radius: 2px;
text-align: center;
line-height: 1;
padding: 5px;
font-size: 15px;
box-sizing: border-box;
cursor: not-allowed;
color: #fff;
}
/* third */
.sign-div .sign-form-div .third-sign {
width: 280px;
height: 33px;
padding-top: 10px;
border-top: 1px solid var(--gray-border);
color: var(--gray);
font-size: 12px;
}
.sign-div .sign-form-div .third-sign button {
padding: 0;
width: 22px;
margin-left: 10px;
}
.sign-div .sign-form-div .third-sign .iconfont {
font-size: 22px;
vertical-align: middle;
}
.sign-div .sign-form-div .third-sign .iconfont.icon-imagewechat {
color: #64c574;
}
.sign-div .sign-form-div .third-sign .iconfont.icon-weibo {
color: #f27272;
}
/* 二维码 */
#sign_code h3 {
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid var(--gray-border);
padding-bottom: 5px;
margin-bottom: 20px;
}
#sign_code img {
display: block;
width: 170px;
height: 170px;
margin: 0 auto;
}
#sign_code .sign-tips-code {
font-size: 14px;
color: var(--black);
border-radius: 20px;
text-align: center;
padding: 5px;
margin: 10px auto 0;
background-color: #dae1da;
}
#sign_code .sign-tips-code a {
color: var(--green-main);
}
/* =============== 热点内容 =============== */
/* left */
.pics-div .fl {
display: inline-block;
width: 360px;
}
.pics-div .fr {
display: inline-block;
width: 275px;
}
.pics-div .pic-item {
width: 170px;
margin: 0 5px 10px 0;
display: inline-block;
vertical-align: top;
}
.pics-div .pic-item > a,
.pics-div .pic-item img {
display: inline-block;
width: 100%;
height: 100%;
}
.pics-div .pic-item p {
font-size: 12px;
color: #999;
text-align: left;
word-break: break-all;
line-height: 1.2;
}
.pics-div .hot-link {
margin-bottom: 10px;
line-height: 1.2;
}
.pics-div .hot-link .author {
color: #999;
font-size: 12px;
margin: 5px 0;
}
.pics-div .hot-link p {
font-size: 12px;
color: #666;
text-align: left;
line-height: 1.5;
}
/* right */
.ads {
width: 250px;
height: 125px;
margin-bottom: 20px;
position: relative;
}
.ads > img {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.ads > span {
position: absolute;
right: 0;
bottom: 0;
width: 32px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
}
.link-list > ul li {
width: 100%;
margin-bottom: 15px;
}
.link-list > ul li a {
display: block;
margin-bottom: 5px;
font-size: 14px;
}
.link-list > ul li span {
font-size: 12px;
color: #aaa;
}
/* =============== 豆瓣时间 =============== */
.left-title a {
color: #494949;
font-size: 24px;
}
.time-div .time-item {
width: 100px;
margin: 0 60px 30px 0;
display: inline-block;
vertical-align: top;
text-align: center;
}
.time-div .time-item .time-cover {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
margin-bottom: 10px;
}
.time-div .time-item .time-cover img {
width: 100%;
height: 100%;
}
.time-div .time-item .time-cover > .iconfont {
font-size: 12px;
position: absolute;
right: 10px;
bottom: 10px;
color: #fff;
}
.time-div .time-item a {
font-size: 13px;
width: 100%;
color: #333;
line-height: 1.5;
}
.time-div .time-item span {
font-size: 12px;
color: #999;
display: block;
margin-top: 10px;
}
/* =============== 电影 =============== */
/* left */
.movie-title .block-a {
color: #2277aa;
}
.left > ul {
margin-top: 30px;
}
.left-list {
width: 100px;
margin-top: 15px;
text-align: left;
}
.left-list:nth-child(2)::after {
content: "";
display: inline-block;
width: 17px;
height: 0;
padding-top: 7px;
margin-bottom: 5px;
background: url(../img/new_menu.gif) no-repeat center center;
}
.left-list .block-a {
display: inline-block;
width: fit-content;
height: 100%;
font-size: 14px;
}
/* right */
.number-list {
list-style: numeric;
font-size: 12px;
list-style-position: inside;
}
.number-list > li {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-bottom: 1px solid #eaeaea;
box-sizing: border-box;
}
/* main */
.movie-list > li {
width: 100px;
margin: 0 30px 30px 0;
display: inline-block;
text-align: center;
vertical-align: top;
}
.movie-list > li img {
width: 100%;
margin-bottom: 10px;
}
.movie-list .block-a {
color: #333;
font-size: 14px;
}
.movie-list .stars {
width: 50%;
display: block;
color: #e09015;
padding-left: 80px;
background: url(../img/star-bg.png) no-repeat left top / 75% auto;
box-sizing: border-box;
font-size: 12px;
margin-top: 10px;
}
.movie-list .stars.star5 {
background-position: 10px -12px;
}
.movie-list .stars.star4 {
background-position: 10px -36px;
}
.movie-list button {
width: 68px;
height: 24px;
line-height: 24px;
color: #fff;
background-color: #1c8bd0;
border-radius: 2px;
margin: 10px auto 0;
}
/* =============== 页脚 =============== */
footer .container {
padding: 40px 0;
font-size: 12px;
color: #999;
}
footer .container::before {
content: "";
display: block;
width: 100%;
height: 0;
border-bottom: 1px dashed #999;
margin-bottom: 20px;
}
footer .container p,
footer .container div {
margin-bottom: 5px;
}
footer .container div > a {
margin: 0 5px;
}
footer .container div > a:first-child {
margin-left: 0;
}
footer .container div > a:last-child {
margin-right: 0;
}
footer .container div > img {
width: 15px;
margin-bottom: 2px;
margin-right: -5px;
vertical-align: middle;
}
图片地址请进入我的博客 前端君哥 下载
// 前端君哥： https://www.yanjun202.com/post/100.html``
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
