HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆瓣</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="header">
<div class="container clear-fix">
<div class="logo left">
<h1>
<a href="">
豆瓣
</a>
</h1>
</div>
<div class="search left">
<form action="">
<input type="text" class="text" placeholder="电影、音乐、书籍">
<button>
<i class="iconfont iconsousuo"></i>
</button>
</form>
</div>
<div class="menu right">
<a href="" class="menu-read"></a>
<a href="" class="menu-movie"></a>
<a href="" class="menu-music"></a>
<a href="" class="menu-group"></a>
<a href="" class="menu-city"></a>
<a href="" class="menu-fm"></a>
<a href="" class="menu-time"></a>
<a href="" class="menu-doupin"></a>
</div>
</div>
</header>
<div class="banner">
<div class="container clear-fix">
<iframe class="right loginarea" scrolling="no" src="loginframe.html" frameborder="0"></iframe>
<div class="slogan right">
<h1 class="title">
豆瓣
<span>6.0</span>
</h1>
<div class="download">
<button class="btn">下载豆瓣 APP</button>
</div>
<div class="qrcode">
<img src="img/downloadcode.png" alt="">
<div class="pccode hidden">
<img src="img/bigpccode.png" alt="">
<p>iOS / Android 扫码直接下载</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="section">
<div class="container clear-fix">
<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">
<li>
<div class="title">
<a href="" class="adv-tag">我们时代青年的精神浪漫</a>
</div>
<div class="desc">
<span>379728人浏览</span>
<span>新话题</span>
</div>
</li>
<li>
<div class="title">
<a href="">我们时代青年的精神浪漫</a>
</div>
<div class="desc">
<span>379728人浏览</span>
<span>新话题</span>
</div>
</li>
<li>
<div class="title">
<a href="">我们时代青年的精神浪漫</a>
</div>
<div class="desc">
<span>379728人浏览</span>
<span>新话题</span>
</div>
</li>
<li>
<div class="title">
<a href="">我们时代青年的精神浪漫</a>
</div>
<div class="desc">
<span>379728人浏览</span>
<span>新话题</span>
</div>
</li>
<li>
<div class="title">
<a href="">我们时代青年的精神浪漫</a>
</div>
<div class="desc">
<span>379728人浏览</span>
<span>新话题</span>
</div>
</li>
<li>
<div class="title">
<a href="">我们时代青年的精神浪漫</a>
</div>
<div class="desc">
<span>379728人浏览</span>
<span>新话题</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 clear-fix">
<div class="left">
<ul>
<li>
<div class="img">
<a href="">
<img src="img/hot1.webp" alt="">
</a>
</div>
<div class="words">
<a href="">「墟墓之間」──法國</a>
<span>
205张照片
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/hot2.webp" alt="">
</a>
</div>
<div class="words">
<a href=""> 废弃剧院</a>
<span>
39张照片
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/hot3.webp" alt="">
</a>
</div>
<div class="words">
<a href="">「墟墓之間」──華東</a>
<span>
161张照片
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/hot4.webp" alt="">
</a>
</div>
<div class="words">
<a href=""> 新涂鸦</a>
<span>
62张照片
</span>
</div>
</li>
</ul>
</div>
<div class="right">
<ul>
<li>
<a href="">新西兰行吟记 - 食物是我对世界的热爱（一）</a>
<div class="title">
沈知更的日记
</div>
<div class="desc">
武汉解禁，为武汉高兴。 宅家两周整。和大部分国内经历封城的人一样，我开始苦心研...
</div>
</li>
<li><a href="">Lorem ipsum dolor sit amet consectetur.</a></li>
<li><a href="">Doloribus, dolore accusantium. Blanditiis, aperiam praesentium!</a></li>
<li><a href="">Accusantium magnam soluta quae voluptatum voluptatibus?</a></li>
<li><a href="">Nam sequi rerum eum sint facilis?</a></li>
<li><a href="">Dolorum velit molestiae officiis. Doloribus, aut?</a></li>
<li><a href="">Reiciendis debitis iste distinctio quam soluta.</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="aside-left">
<h2 class="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>
<ul class="time-db">
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/timedb.jpg" alt="">
</a>
</div>
<div class="time-words">
<a href="">罪恶的背后——人人必修的60堂犯罪心理学</a>
</div>
<div class="time-side">
<span>音频专栏</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="movie-a" class="section">
<div class="container clear-fix">
<div class="aside-left">
<div class="title">
<h2 class="dark-movie">
<a href="">电影</a>
</h2>
</div>
<ul class="movie-list">
<li><a href="">影讯&购票</a></li>
<li>
<a href="">选电影 </a>
<img src="img/movie.gif" alt="">
</li>
<li><a href="">电视剧</a></li>
<li><a href="">排行榜</a></li>
<li><a href="">分类</a></li>
<li><a href="">影评</a></li>
<li><a href="">预告片</a></li>
<li><a href="">问答</a></li>
</ul>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">
影片分类
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="mv-tags">
<ul>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
<li><a href="">爱情</a></li>
</ul>
</div>
<div class="recent-runk">
<div class="section-title">
<h3 class="title">
近期热门
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="runk">
<li><span>1.</span><a href="">惊天营救</a></li>
<li><span>2.</span><a href="">惊天营救</a></li>
<li><span>3.</span><a href="">惊天营救</a></li>
<li><span>4.</span><a href="">惊天营救</a></li>
<li><span>5.</span><a href="">惊天营救</a></li>
<li><span>6.</span><a href="">惊天营救</a></li>
<li><span>7.</span><a href="">惊天营救</a></li>
<li><span>8.</span><a href="">惊天营救</a></li>
<li><span>9.</span><a href="">惊天营救</a></li>
<li><span>10.</span><a href="">惊天营救</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">
正在热映
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="mv-list">
<li>
<div class="img">
<a href="">
<img src="img/lirenchuqiao.webp" alt="">
</a>
</div>
<div class="mv-title">
<a href="">利刃出鞘</a>
</div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.2</i>
</div>
<div class="choose-seat">
<a href="">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/lirenchuqiao.webp" alt="">
</a>
</div>
<div class="mv-title">
<a href="">利刃出鞘</a>
</div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.2</i>
</div>
<div class="choose-seat">
<a href="">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/lirenchuqiao.webp" alt="">
</a>
</div>
<div class="mv-title">
<a href="">利刃出鞘</a>
</div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.2</i>
</div>
<div class="choose-seat">
<a href="">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/lirenchuqiao.webp" alt="">
</a>
</div>
<div class="mv-title">
<a href="">利刃出鞘</a>
</div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.2</i>
</div>
<div class="choose-seat">
<a href="">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/lirenchuqiao.webp" alt="">
</a>
</div>
<div class="mv-title">
<a href="">利刃出鞘</a>
</div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.2</i>
</div>
<div class="choose-seat">
<a href="">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/lirenchuqiao.webp" alt="">
</a>
</div>
<div class="mv-title">
<a href="">利刃出鞘</a>
</div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.2</i>
</div>
<div class="choose-seat">
<a href="">选座购票</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="team-hot" class="section">
<div class="container clear-fix">
<div class="aside-left">
<div class="title">
<h2 class="team-title">
<a href="">小组</a>
</h2>
</div>
<ul class="team-pj">
<li>
<a href="">精选</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">
小组分类
</h3>
</div>
<ul class="group">
<li>
<a href="">兴趣»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">生活»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">购物»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">社会»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">艺术»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">学术»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">情感»</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">闲聊»</a>
</li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">
热门小组
</h3>
<a href="" class="link">更多</a>
</div>
<div class="hot-team">
<ul>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
<li>
<div class="img">
<img src="img/pic.webp" alt="">
</div>
<div class="title">
<div class="group-title">
<a href="">我爱三毛</a>
</div>
<span>47621个成员</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="section hot-read">
<div class="container">
<div class="aside-left">
<div class="title">
<h2 class="read-title">
<a href="">读书</a>
</h2>
</div>
<ul class="read-pj">
<li>
<a href="">分类浏览</a>
</li>
<li>
<a href="" class="new">阅读</a>
</li>
<li><a href="">作者</a></li>
<li><a href="">书评</a></li>
<li><a href="" class="new">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li class="pj-look">
<a href="">
<i class="look-bd"></i>
</a>
<a href="" class="pj-header">豆瓣阅读</a>
</li>
</ul>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">
热门标签
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="read-tag">
<div class="pages">
<ul>
<li>[文学]</li>
<li>
<a href="">小说</a>
</li>
<li><a href="">随笔</a></li>
<li><a href="">日本文学</a></li>
<li><a href="">散文</a></li>
<li><a href="">诗歌</a></li>
<li><a href="">童话</a></li>
<li><a href="">名著</a></li>
<li><a href="">港台</a></li>
<li><a href="">更多</a></li>
</ul>
</div>
<div class="pages">
<ul>
<li>[文学]</li>
<li>
<a href="">小说</a>
</li>
<li><a href="">随笔</a></li>
<li><a href="">日本文学</a></li>
<li><a href="">散文</a></li>
<li><a href="">诗歌</a></li>
<li><a href="">童话</a></li>
<li><a href="">名著</a></li>
<li><a href="">港台</a></li>
<li><a href="">更多</a></li>
</ul>
</div>
<div class="pages">
<ul>
<li>[文学]</li>
<li>
<a href="">小说</a>
</li>
<li><a href="">随笔</a></li>
<li><a href="">日本文学</a></li>
<li><a href="">散文</a></li>
<li><a href="">诗歌</a></li>
<li><a href="">童话</a></li>
<li><a href="">名著</a></li>
<li><a href="">港台</a></li>
<li><a href="">更多</a></li>
</ul>
</div>
<div class="pages">
<ul>
<li>[文学]</li>
<li>
<a href="">小说</a>
</li>
<li><a href="">随笔</a></li>
<li><a href="">日本文学</a></li>
<li><a href="">散文</a></li>
<li><a href="">诗歌</a></li>
<li><a href="">童话</a></li>
<li><a href="">名著</a></li>
<li><a href="">港台</a></li>
<li><a href="">更多</a></li>
</ul>
</div>
<div class="pages">
<ul>
<li>[文学]</li>
<li>
<a href="">小说</a>
</li>
<li><a href="">随笔</a></li>
<li><a href="">日本文学</a></li>
<li><a href="">散文</a></li>
<li><a href="">诗歌</a></li>
<li><a href="">童话</a></li>
<li><a href="">名著</a></li>
<li><a href="">港台</a></li>
<li><a href="">更多</a></li>
</ul>
</div>
<div class="pages">
<ul>
<li>[文学]</li>
<li>
<a href="">小说</a>
</li>
<li><a href="">随笔</a></li>
<li><a href="">日本文学</a></li>
<li><a href="">散文</a></li>
<li><a href="">诗歌</a></li>
<li><a href="">童话</a></li>
<li><a href="">名著</a></li>
<li><a href="">港台</a></li>
<li><a href="">更多</a></li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="main-pj">
<div class="section-title">
<h2 class="title">
新书速递
</h2>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="new-read">
<ul>
<li>
<div class="img">
<a href="">
<img src="img/new-read.jpg" alt="">
</a>
</div>
<div class="read-title">
<a href="">绝对不在场证明...</a>
</div>
<div class="read-author">〔日〕大山诚一...</div>
<a href="" class="free-read">免费试读</a>
</li>
<li>
<div class="img">
<a href="">
<img src="img/new-read.jpg" alt="">
</a>
</div>
<div class="read-title">
<a href="">绝对不在场证明...</a>
</div>
<div class="read-author">〔日〕大山诚一...</div>
<a href="" class="free-read">免费试读</a>
</li>
<li>
<div class="img">
<a href="">
<img src="img/new-read.jpg" alt="">
</a>
</div>
<div class="read-title">
<a href="">绝对不在场证明...</a>
</div>
<div class="read-author">〔日〕大山诚一...</div>
<a href="" class="free-read">免费试读</a>
</li>
<li>
<div class="img">
<a href="">
<img src="img/new-read.jpg" alt="">
</a>
</div>
<div class="read-title">
<a href="">绝对不在场证明...</a>
</div>
<div class="read-author">〔日〕大山诚一...</div>
<a href="" class="free-read">免费试读</a>
</li>
</ul>
</div>
</div>
<div class="main-pj">
<div class="section-title">
<h2 class="title">
原创数字作品
</h2>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="new-read">
<ul>
<li>
<div class="img">
<a href="">
<img src="img/new-read.jpg" alt="">
</a>
</div>
<div class="read-title">
<a href="">绝对不在场证明...</a>
</div>
<div class="read-author">〔日〕大山诚一...</div>
<a href="" class="free-read">免费试读</a>
</li>
<li>
<div class="img">
<a href="">
<img src="img/new-read.jpg" alt="">
</a>
</div>
<div class="read-title">
<a href="">绝对不在场证明...</a>
</div>
<div class="read-author">〔日〕大山诚一...</div>
<a href="" class="free-read">免费试读</a>
</li>
<li>
<div class="img">
<a href="">
<img src="img/new-read.jpg" alt="">
</a>
</div>
<div class="read-title">
<a href="">绝对不在场证明...</a>
</div>
<div class="read-author">〔日〕大山诚一...</div>
<a href="" class="free-read">免费试读</a>
</li>
<li>
<div class="img">
<a href="">
<img src="img/new-read.jpg" alt="">
</a>
</div>
<div class="read-title">
<a href="">绝对不在场证明...</a>
</div>
<div class="read-author">〔日〕大山诚一...</div>
<a href="" class="free-read">免费试读</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section hot-music">
<div class="container clear-fix">
<div class="aside-left">
<div class="title">
<h2 class="music-title">
<a href="">音乐</a>
</h2>
</div>
<ul class="music-pj">
<li>
<a href="">音乐人</a>
</li>
<li>
<a href="">潮潮豆瓣音乐周</a>
</li>
<li><a href="">金羊毛计划</a></li>
<li><a href="">专题</a></li>
<li><a href="" >排行榜</a></li>
<li><a href="">分类浏览</a></li>
<li><a href="">乐评</a></li>
<li><a href="" >豆瓣FM</a></li>
<li><a href="">歌单</a></li>
<li class="pj-little"><a href="">阿比鹿音乐奖</a></li>
<li class="pj-look">
<a href="">
<i class="look-bd"></i>
</a>
<a href="" class="pj-header">豆瓣FM</a>
</li>
<li class="pj-look">
<a href="">
<i class="look-bd bd-move"></i>
</a>
<a href="" class="pj-header">豆瓣音乐人</a>
</li>
</ul>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">
本周流行音乐人
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="fashion-ms">
<li>
<span>1.</span>
<a href>
<div class="ms-pic">
<img src="img/fashion.jpg" alt="">
<i class="Mongolia"></i>
<i class="player"></i>
</div>
</a>
<div class="desc">
<a class="theader" href="">Odding</a>
<div class="sect">
<div> 流派: 民谣 Folk</div>
<i>815人关注</i>
</div>
</div>
</li>
<li>
<span>2.</span>
<a href>
<div class="ms-pic">
<img src="img/fashion.jpg" alt="">
<i class="Mongolia"></i>
<i class="player"></i>
</div>
</a>
<div class="desc">
<a class="theader" href="">Odding</a>
<div class="sect">
<div> 流派: 民谣 Folk</div>
<i>815人关注</i>
</div>
</div>
</li>
<li>
<span>3.</span>
<a href>
<div class="ms-pic">
<img src="img/fashion.jpg" alt="">
<i class="Mongolia"></i>
<i class="player"></i>
</div>
</a>
<div class="desc">
<a class="theader" href="">Odding</a>
<div class="sect">
<div> 流派: 民谣 Folk</div>
<i>815人关注</i>
</div>
</div>
</li>
<li>
<span>4.</span>
<a href>
<div class="ms-pic">
<img src="img/fashion.jpg" alt="">
<i class="Mongolia"></i>
<i class="player"></i>
</div>
</a>
<div class="desc">
<a class="theader" href="">Odding</a>
<div class="sect">
<div> 流派: 民谣 Folk</div>
<i>815人关注</i>
</div>
</div>
</li>
<li>
<span>5.</span>
<a href>
<div class="ms-pic">
<img src="img/fashion.jpg" alt="">
<i class="Mongolia"></i>
<i class="player"></i>
</div>
</a>
<div class="desc">
<a class="theader" href="">Odding</a>
<div class="sect">
<div> 流派: 民谣 Folk</div>
<i>815人关注</i>
</div>
</div>
</li>
</ul>
</div>
<div class="main">
<div>
<div class="section-title">
<h3 class="title">
豆瓣新碟榜
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="music-list">
<ul>
<li>
<div class="img"><a href=""><img src="img/musician.jpg" alt=""></a></div>
<div class="mu-name"><a href="">1.Future Nostalgia</a></div>
<div class="mu-man"><a href="">Dua Lipa</a></div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.4</i>
</div>
</li>
<li>
<div class="img"><a href=""><img src="img/musician.jpg" alt=""></a></div>
<div class="mu-name"><a href="">2.Future Nostalgia</a></div>
<div class="mu-man"><a href="">Dua Lipa</a></div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.4</i>
</div>
</li>
<li>
<div class="img"><a href=""><img src="img/musician.jpg" alt=""></a></div>
<div class="mu-name"><a href="">3.Future Nostalgia</a></div>
<div class="mu-man"><a href="">Dua Lipa</a></div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.4</i>
</div>
</li>
<li>
<div class="img"><a href=""><img src="img/musician.jpg" alt=""></a></div>
<div class="mu-name"><a href="">4.Future Nostalgia</a></div>
<div class="mu-man"><a href="">Dua Lipa</a></div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.4</i>
</div>
</li>
<li>
<div class="img"><a href=""><img src="img/musician.jpg" alt=""></a></div>
<div class="mu-name"><a href="">5.Future Nostalgia</a></div>
<div class="mu-man"><a href="">Dua Lipa</a></div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.4</i>
</div>
</li>
<li>
<div class="img"><a href=""><img src="img/musician.jpg" alt=""></a></div>
<div class="mu-name"><a href="">6.Future Nostalgia</a></div>
<div class="mu-man"><a href="">Dua Lipa</a></div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.4</i>
</div>
</li>
<li>
<div class="img"><a href=""><img src="img/musician.jpg" alt=""></a></div>
<div class="mu-name"><a href="">7.Future Nostalgia</a></div>
<div class="mu-man"><a href="">Dua Lipa</a></div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.4</i>
</div>
</li>
<li>
<div class="img"><a href=""><img src="img/musician.jpg" alt=""></a></div>
<div class="mu-name"><a href="">8.Future Nostalgia</a></div>
<div class="mu-man"><a href="">Dua Lipa</a></div>
<div class="score-runk">
<div class="mv-score"></div>
<i>8.4</i>
</div>
</li>
</ul>
</div>
<div class="section-title">
<h3 class="title">
热门歌单
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="sing-hot">
<ul>
<li>
<a href=""><div class="img iconfont iconbofang"><img src="img/hot-sing.jpg" alt=""></div></a>
<div class="mu-desc">陷入爱情｜相爱的感觉真好</div>
</li>
<li>
<a href=""><div class="img iconfont iconbofang"><img src="img/hot-sing.jpg" alt=""></div></a>
<div class="mu-desc">陷入爱情｜相爱的感觉真好</div>
</li>
<li>
<a href=""><div class="img iconfont iconbofang"><img src="img/hot-sing.jpg" alt=""></div></a>
<div class="mu-desc">陷入爱情｜相爱的感觉真好</div>
</li>
<li>
<a href=""><div class="img iconfont iconbofang"><img src="img/hot-sing.jpg" alt=""></div></a>
<div class="mu-desc">陷入爱情｜相爱的感觉真好</div>
</li>
<li>
<a href=""><div class="img iconfont iconbofang"><img src="img/hot-sing.jpg" alt=""></div></a>
<div class="mu-desc">陷入爱情｜相爱的感觉真好</div>
</li>
<li>
<a href=""><div class="img iconfont iconbofang"><img src="img/hot-sing.jpg" alt=""></div></a>
<div class="mu-desc">陷入爱情｜相爱的感觉真好</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section taste">
<div class="container">
<div class="aside-left">
<div class="title">
<h2 class="taste-bean">
<a href="">豆品</a>
</h2>
</div>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">
热门活动
</h3>
</div>
<div>
<a href="">
<div class="bean-adv"></div>
</a>
<p class="what-have">
<a href="">我的豆瓣收藏夹里有什么</a>
</p>
</div>
<div class="section-title">
<h3 class="title">
官方小组
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">
热卖商城
</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="taste-pj">
<li>
<a href="">
<div class="img">
<img src="img/taste-img.jpg" alt="">
</div>
</a>
<div class="taste-name clear-fix">
<span class="left">
<a href="">豆瓣冻顶乌龙茶</a>
</span>
<span class="right">￥59</span>
</div>
</li>
<li>
<a href="">
<div class="img">
<img src="img/taste-img.jpg" alt="">
</div>
</a>
<div class="taste-name clear-fix">
<span class="left">
<a href="">豆瓣冻顶乌龙茶</a>
</span>
<span class="right">￥59</span>
</div>
</li>
<li>
<a href="">
<div class="img">
<img src="img/taste-img.jpg" alt="">
</div>
</a>
<div class="taste-name clear-fix">
<span class="left">
<a href="">豆瓣冻顶乌龙茶</a>
</span>
<span class="right">￥59</span>
</div>
</li>
<li>
<a href="">
<div class="img">
<img src="img/taste-img.jpg" alt="">
</div>
</a>
<div class="taste-name clear-fix">
<span class="left">
<a href="">豆瓣冻顶乌龙茶</a>
</span>
<span class="right">￥59</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="section common-city">
<div class="container clear-fix">
<div class="aside-left">
<div class="title">
<h2 class="common-title">
<a href="">同城</a>
</h2>
</div>
<ul>
<li><a href="">近期活动</a></li>
<li><a href="">主办方</a></li>
<li><a href="">舞台剧</a></li>
</ul>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">
活动标签
</h3>
</div>
<ul class="group">
<li>
<a href="">音乐»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">戏剧»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">购物»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">社会»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">艺术»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">学术»</a>
</li>
<li>
<a href="">影视</a>
</li>
<li>
<a href="">文化</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">情感»</a>
</li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
<ul class="group">
<li>
<a href="">闲聊»</a>
</li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
<li><a href="">行摄</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">时尚</a></li>
<li><a href="">生活</a></li>
<li><a href="">科技</a></li>
</ul>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">杭州 · 本周热门活动</h3>
<span class="link"><a href="">更多</a></span>
</div>
<ul class="city-pj">
<li>
<div class="img">
<a href=""><img src="img/sky.jpg" alt=""></a>
</div>
<div class="activity-word">
<div class="title">
<a href="">天空之城-久石让宫崎骏作品主题音乐会</a>
</div>
<div class="activity-time">5月16日 周六 19:30 - 21:00</div>
<div class="address" title="杭州大剧院(歌剧院) 杭州市江干区新业路39号">杭州大剧院(歌剧院) 杭州市...</div>
<span>15人关注</span>
</div>
</li>
<li>
<div class="img">
<a href=""><img src="img/sky.jpg" alt=""></a>
</div>
<div class="activity-word">
<div class="title">
<a href="">天空之城-久石让宫崎骏作品主题音乐会</a>
</div>
<div class="activity-time">5月16日 周六 19:30 - 21:00</div>
<div class="address" title="杭州大剧院(歌剧院) 杭州市江干区新业路39号">杭州大剧院(歌剧院) 杭州市...</div>
<span>15人关注</span>
</div>
</li>
<li>
<div class="img">
<a href=""><img src="img/sky.jpg" alt=""></a>
</div>
<div class="activity-word">
<div class="title">
<a href="">天空之城-久石让宫崎骏作品主题音乐会</a>
</div>
<div class="activity-time">5月16日 周六 19:30 - 21:00</div>
<div class="address" title="杭州大剧院(歌剧院) 杭州市江干区新业路39号">杭州大剧院(歌剧院) 杭州市...</div>
<span>15人关注</span>
</div>
</li>
<li>
<div class="img">
<a href=""><img src="img/sky.jpg" alt=""></a>
</div>
<div class="activity-word">
<div class="title">
<a href="">天空之城-久石让宫崎骏作品主题音乐会</a>
</div>
<div class="activity-time">5月16日 周六 19:30 - 21:00</div>
<div class="address" title="杭州大剧院(歌剧院) 杭州市江干区新业路39号">杭州大剧院(歌剧院) 杭州市...</div>
<span>15人关注</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container clear-fix">
<div class="left">
<p>© 2005－2020 douban.com, all rights reserved 北京豆网科技有限公司</p>
<p><a href=""> 京ICP备11027288号 网络视听许可证 </a>京ICP备11027288号 网络视听许可证<a href="">0110418</a>号</p>
<p>京网文[2015]2026-368号 <img src="img/tips.gif" alt=""><a href=" 京公网安备11010502000728"></a> 新出网证(京)字129号</p>
<p>违法和不良信息举报电话：4008353331-9 <img class="tips" src="img/@.com.jpg" alt=""></p>
<p><img class="footer-icon" src="img/footer-icon.png" alt=""><a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a></p>
</div>
<div class="right">
<p>
<a href="">关于豆瓣</a> ·
<a href="">在豆瓣工作</a> ·
<a href="">联系我们</a> ·
<a href="">法律声明</a> ·
<a href="">帮助中心</a> ·
<a href="">移动应用</a> ·
<a href="">豆瓣广告</a>
</p>
<div class="harmful">
<a href=""><img src="img/harmful.jpg" alt=""></a>
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
@import "../css/common.css";
button {
cursor: pointer;
}
a:link{
color: #37a;
}
a:visited{
color: #669;
}
a:hover{
color: #fff ;
background: #37a;
}
a:active{
color: #fff;
background: #f93;
}
ul{
word-break: break-all;
}
.container {
width: 950px;
margin: 0 auto;
}
.section{
padding: 35px 0;
}
.section:nth-of-type(even){
background: #f7f7f7;
}
.aside-left{
float: left;
width: 100px;
margin-right: 20px;
}
.aside-left .title{
font-size: 24px;
margin-bottom: 12px;
}
.section .container{
line-height: 1.62;
}
.section .container .aside-left ul li{
margin-top: 5px;
font-size: 14px;
}
.aside-right{
float: right;
width: 265px;
}
.aside-right .adv img{
width: 100%;
display: block;
margin-bottom: 20px;
}
.section-title{
margin-bottom: 12px;
line-height: 1.5;
}
.section-title .title{
display: inline;
color: #072;
font-size: 15px;
}
.section-title .title::after{
content: " · · · · · · ";
}
.section-title .link{
font-size: 12px;
color: #666;
}
.section-title .link::before{
content:"(";
}
.section-title .link::after{
content: ")";
}
.section-title a:hover{
background: #37a;
color: #fff;
}
.adv-tag::after{
content: "广告";
font-size: 13px;
color: #c9c9c9;
}
.main{
overflow: hidden;
}
.container li .img{
overflow: hidden;
}
.container li .img img{
width: 100px;
display: block;
margin: 0 auto;
}
.section .container a:hover{
color: #fff;
}
.header {
height: 90px;
padding-top: 30px;
box-sizing: border-box;
}
.header .container {
margin-top: 30px;
}
.header .logo a {
width: 154px;
height: 0;
padding-top: 30px;
overflow: hidden;
display: block;
background: url("../img/logo.png") no-repeat left top/100%;
}
.header .search {
width: 270px;
height: 30px;
border: 1px solid #c3c3c3;
margin-left: 20px;
position: relative;
}
.header .search .text {
width: 240px;
height: 20px;
padding: 5px;
font-size: 13px;
}
.header .search .text::placeholder {
color: #ccc;
}
.header .search button {
position: absolute;
width: 30px;
height: 30px;
top: 0;
right: 0;
color: #c3c3c3;
}
.header .menu a {
background: url("../img/canvas.png") no-repeat left top/463px 20px;
width: 40px;
height: 20px;
float: left;
margin-left: 20px;
margin-top: 6px;
}
.header .menu .menu-read {
background-position: 0 0;
}
.header .menu .menu-movie {
background-position: -60px 0;
}
.header .menu .menu-music {
background-position: -120px 0;
}
.header .menu .menu-city {
background-position: -180px 0;
}
.header .menu .menu-group {
background-position: -240px 0;
}
.header .menu .menu-fm {
background-position: -300px 0;
}
.header .menu .menu-time {
background-position: -360px 0;
}
.header .menu .menu-doupin {
background-position: -420px 0;
width: 44px;
}
.banner {
height: 304px;
background: url("../img/bannerBJ.jpg") no-repeat left top/contain;
margin: 25px 0;
background-color: #edf4ed;
}
.banner .container .loginarea {
width: 300px;
height: 300px;
}
.banner .container .slogan {
margin-top: 88px;
margin-right: 32px;
position: relative;
width: 150px;
height: 120px;
}
.banner .container .slogan .title {
color: #111;
font-size: 25px;
}
.banner .container .slogan .title span{
margin-left: 10px;
}
.banner .container .slogan .download .btn{
width: 115px;
height: 30px;
line-height: 30px;
background: #00B51D;
font-size: 12px;
margin-top: 16px;
border-radius: 2px;
}
.banner .container .slogan .qrcode{
display: inline-block;
position: absolute;
right: 0;
top: 41px;
width: 28px;
height: 28px
}
.banner .container .slogan .qrcode img{
width: 28px;
height: 28px;
border: 1px solid #48aa0d;
border-radius: 2px;
}
.banner .container .slogan .qrcode img:hover+.pccode{
display: block;
}
.banner .container .slogan .pccode{
padding: 20px 20px 5px;
border-radius: 2px;
color: #666;
font-size: 13px;
text-align: center;
background: #fff;
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
}
.banner .container .slogan .pccode img{
width: 160px;
height: 160px;
border: none;
}
.section .container .aside-right{
margin-left: 30px;
}
.section .container .aside-right .adv{
margin-top: 13px;
}
.hot-list{
line-height: 1.5;
}
.hot-list li{
margin-bottom: 10px;
}
.hot-list li .title{
font-size: 14px;
}
.hot-list li .desc span{
color: #aaa;
font-size: 13px;
margin-right: 3px;
}
.hot-main{
font-size: 12px;
}
.hot-main .left{
width: 350px;
}
.hot-main ul{
text-align: justify;
line-height: 1.5;
}
.hot-main ul::after{
content: "";
display: inline-block;
width: 100%;
}
.section .container .hot-main .left li{
display: inline-block;
margin-bottom: 10px;
vertical-align: top;
width: 170px;
}
.hot-main .left li .img img{
width: 100%;
}
.hot-main .left li .words span{
color: #999;
}
.hot-main .right{
width: 275px;
font-size: 12px;
}
.hot-main .right li .title{
color: #999;
}
.hot-main .right li .desc{
color: #666;
}
.hot-main .right li{
margin-bottom: 12px;
}
.section .container .aside-left .title .dark-color{
color: #494949;
}
.section .container .aside-left .title .dark-color:hover{
color: #fff;
}
.section .container .main .time-db li{
width: 100px;
display: inline-block;
text-align: center;
margin-right: 60px;
margin-bottom: 30px;
vertical-align: top;
}
.section .container .main .time-db li .img{
margin-bottom: 10px;
}
.section .container .main .time-db li .time-side{
margin-top: 10px;
font-size: 12px;
color: #999;
}
.section .container .main .time-db li .time-words a{
font-size: 13px;
line-height: 1.38;
color: #333;
}
.section .container .main .time-db li .time-words a:hover{
color: #fff;
}
#movie-a a:visited,#movie-a a:link{
color: #27a;
}
#movie-a a:hover{
color: #fff;
}
.section .container .aside-left .title .dark-movie{
margin-bottom: 12px;
}
.section .container .aside-left .movie-list li:nth-child(2) img{
position: relative;
top: -5px;
}
.section .container .aside-right .mv-tags {
font-size: 12px;
margin-bottom: 30px;
}
.section .container .aside-right .mv-tags li{
display: inline-block;
width: 4em;
}
.section .container .aside-right .recent-runk .runk li{
font-size: 12px;
margin-bottom: 6px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 5px;
}
.section .container .aside-right .recent-runk .runk li span{
margin-right: 10px;
}
.section .container .main .mv-list {
font-size: 12px;
}
.section .container .main li{
width: 130px;
display: inline-block;
text-align: center;
vertical-align: top;
margin-bottom: 20px;
}
.section .container .main .mv-list .img{
margin-bottom: 10px;
height: 145px;
overflow: hidden;
}
#movie-a .container .main .mv-list .mv-title{
font-size: 13px;
margin-bottom: 4px;
}
#movie-a .container .main .mv-list .choose-seat a{
padding: 2px 10px;
border-radius: 2px;
}
#movie-a .container .main .mv-list .choose-seat a:link,#movie-a .container .main .mv-list .choose-seat a:visited{
background: #1c8bd0;
color: #fff;
}
#movie-a .container .main .mv-list .choose-seat a:hover{
background: #047fcb;
}
#movie-a .container .main .mv-list .mv-title a:link,#movie-a .container .main .mv-list .mv-title a:visited{
color: #333;
}
#movie-a .container .main .mv-list .mv-title a:hover{
color: #fff;
}
.container .main .score-runk i{
color: #e09015;
}
#movie-a .container .main .mv-list .score-runk .mv-score{
background: url("../img/score-runk.png") no-repeat 0 -22px/100% ;
width: 55px;
height: 11px;
display: inline-block;
}
#team-hot a:link,#team-hot a:visited{
color: #017a85;
}
#team-hot a:hover{
color: #fff;
}
#team-hot .container .aside-left .title .team-title a:link,#team-hot .container .aside-left .title .team-title a:visited{
color: #007982;
}
#team-hot .container .aside-left .title .team-title a:hover{
color: #fff;
}
.section .container .aside-right .group{
margin-bottom: 10px;
}
.section .container .aside-right .group li:nth-child(1){
width: 100%;
font-size: 14px;
}
#team-hot .container .aside-right .group li:nth-child(1) a:visited,#team-hot .container .aside-right .group li:nth-child(1) a:link{
color: #333;
}
#team-hot .container .aside-right .group li:nth-child(1) a:hover{
color: #fff;
}
.section .container .aside-right .group li{
display: inline-block;
font-size: 12px;
margin-right: 10px;
}
.section .container .main .hot-team li{
display: inline-block;
width: 248px;
margin-top: 30px;
vertical-align: top;
}
.section .container .main .hot-team li .img{
float: left;
margin-right: 15px;
}
.section .container .main .hot-team li .img img{
width: 48px;
}
.section .container .main .hot-team li .title{
float: left;
font-size: 13px;
}
.section .container .main .hot-team li .title span{
color: #999;
}
.section .container .aside-left .title .read-title a:link,.aside-left .title .read-title a:visited{
color: #4a2f14;
}
.hot-read a:link,.hot-read a:visited{
color: #614e3c;
}
.section .container .aside-left li a.new{
position: relative;
}
.section .container .aside-left li a.new::after{
content: "";
background: url("../img/movie.gif") no-repeat;
width: 17px;
height: 7px;
position: absolute;
top: 0;
}
.section .container .aside-left .pj-little{
margin-bottom: 30px;
}
.section .container .aside-left .pj-look{
margin-top: 15px;
}
.section .container .aside-left .pj-look .look-bd{
background: url("../img/look-pj.jpg") no-repeat;
width: 50px;
height: 50px;
display: block;
box-shadow: 1px 1px 2px 0px #999 ;
border-radius: 10px;
}
.section .container .aside-left .pj-look .pj-header{
font-size: 12px;
}
.section .container .aside-right .read-tag .pages{
border-bottom: 1px solid #eaeaea;
padding: 10px 0;
}
.section .container .aside-right .read-tag .pages:last-child{
border-bottom: none;
}
.section .container .aside-right .read-tag .pages li{
font-size: 12px;
display: inline-block;
margin-right: 10px;
}
.section .container .aside-right .read-tag .pages li:first-child{
color: #999;
}
.section .container .main .main-pj{
margin-bottom: 30px;
}
.section .container .main .new-read li{
display: inline-block;
text-align: center;
vertical-align: top;
font-size: 12px;
}
.section .container .main .new-read li .img{
font-size: 0;
height: 148px;
width: 130px;
}
.section .container .main .new-read .read-title{
font-size: 13px;
margin-top: 10px;
margin-bottom: 4px;
}
.section .container .main .new-read .free-read{
background: #999a95;
padding: 2px 10px;
border-radius: 2px;
color: #fff;
}
.section .container .main .new-read .free-read:hover{
background: #878882;
}
.section .container .aside-left .title .music-title a:link,.aside-left .title .music-title a:visited{
color: #f38c00;
}
.section .container .aside-left .title .music-title a:hover{
color: #fff;
}
.hot-music a:link,.hot-music a:visited{
color: #555d53;
}
.section .container .aside-left .music-pj .pj-look .look-bd{
background-position: -250px 0;
}
.section .container .aside-left .music-pj .pj-look .look-bd.bd-move{
background-position: -50px 0;
}
.section .container .aside-right .fashion-ms li{
font-size: 12px;
margin-bottom: 16px;
}
.section .container .aside-right .fashion-ms span,.section .container .aside-right .fashion-ms .ms-pic{
float: left;
margin-right: 10px;
}
.section .container .aside-right .fashion-ms .ms-pic{
font-size: 0;
position: relative;
}
.section .container .aside-right .fashion-ms .ms-pic:hover .Mongolia,.section .container .aside-right .fashion-ms .ms-pic:hover .player{
display: block;
}
.section .container .aside-right .fashion-ms .ms-pic .Mongolia,.section .container .aside-right .fashion-ms .ms-pic .player{
position: absolute;
display: none;
}
.section .container .aside-right .fashion-ms .ms-pic .Mongolia{
background-color: rgba(34, 34, 34,.85);
left: 0;
top: 0;
width: 48px;
height: 49px;
}
.section .container .aside-right .fashion-ms .ms-pic .player{
background: url(../img/play.png) no-repeat 0 0;
left: 50%;
top: 50%;
margin: -6px 0 0 -5px;
width: 9px;
height: 11px;
}
.section .container .aside-right .fashion-ms .desc{
overflow: hidden;
}
.section .container .aside-right .fashion-ms .desc .sect{
margin-top: 4px;
color: #999;
}
.section .container .main .music-list {
font-size: 12px;
}
.container .main .music-list li,.section .container .main .sing-hot li{
margin-bottom: 4px;
}
.section .container .main .music-list li .img img{
width: 80px;
}
.section .container .main .music-list li .mu-name{
margin: 10px 0 4px 0;
}
.section .container .main .sing-hot li .mu-desc{
margin: 10px 0 4px 0;
font-size: 13px;
color: #111
}
.section .container .main .music-list .score-runk .mv-score{
background: url("../img/score-runk.png") no-repeat 0 -11px/100% ;
width: 55px;
height: 11px;
display: inline-block;
}
.section .container .main .sing-hot li .img{
position: relative;
}
.section .container .main .sing-hot li .img::before{
position: absolute;
width: 40px;
height: 40px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 35px;
color: #fff;
text-align: center;
line-height: 40px;
opacity: 0.8;
border: 1px solid rgba(85, 93, 83,.2);
background: rgba(85, 93, 83,.2);
border-radius: 50%;
}
.section .container .main .sing-hot li .img img{
width: 80px;
}
.taste .container a:link,.taste .container a:visited{
color: #3377A9;
}
.taste .container a:hover{
color: #fff;
}
.section .container .aside-left .taste-bean a:link,.section .container .aside-left .taste-bean a:visited{
color: #1f9432;
}
.section .container .aside-left .taste-bean a:hover{
color: #fff;
}
.section .container .aside-right .bean-adv{
background: url("../img/taste-bean.jpg") no-repeat left top/100%;
width: 100%;
height: 95px;
}
.section .container .aside-right .what-have{
font-size: 14px;
margin: 5px 0 30px 0;
}
.section .container .main .taste-pj li{
width: 240px;
margin: 0 20px 30px 0;
}
.section .container .main .taste-pj img{
height: 220px;
width: 100%;
}
.section .container .main .taste-pj .taste-name{
font-size: 16px;
margin-top: 10px;
line-height: 22px
}
.section .container .main .taste-pj .taste-name .right{
color: #E55457;
}
.section .container .aside-left .title .common-title a:link,.section .container .aside-left .title .common-title a:visited{
color: #ec5303;
}
.section .container .aside-left .title .common-title a:hover{
color: #fff;
}
.common-city a:link,.common-city a:visited{
color: #643;
}
.section .container .main .city-pj li{
width: 248px;
margin: 0 20px 20px 0;
font-size: 12px;
color: #666;
text-align: left;
line-height: 1.45;
display: inline-block;
}
.section .container .main .city-pj li:nth-child(even){
margin-right: 0;
}
.section .container .main .city-pj .activity-word{
overflow: hidden;
}
.section .container .main .city-pj .activity-word .title{
font-size: 13px;
margin-bottom: 4px;
}
.section .container .main .city-pj .img {
margin: 0 10px 10px 0;
float: left;
}
.section .container .main .city-pj .img img{
width: 70px;
}
.footer .container{
line-height: 1.62;
padding: 14px 0;
margin-top: 30px;
border-top: 1px dashed #dcdcdc;
font-size: 12px;
}
.footer .container .left p{
color: #999;
}
.footer .container .left p img{
vertical-align: middle;
}
.footer .container .left p .tips{
height: 16px;
vertical-align: top;
}
.footer .container .left p .footer-icon{
width: 15px;
}
.footer .container .right .harmful{
width: 150px;
margin-top: 20px;
}
common.css
@import "../css/reset.css";
@import "//at.alicdn.com/t/font_1765361_6epqfg10p2p.css";
.left{
float: left;
}
.right{
float: right;
}
.clear-fix::after{
content: "";
display: block;
clear: both;
}
body{
font-family: Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
.hidden{
display: none;
}
.btn{
background: #41ac52;
cursor: pointer;
color: #fff;
text-align: center;
border-radius: 4px;
}
.btn:disabled{
background-color: rgba(66,189,86,.5);
cursor: not-allowed;
}
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录/注册</title>
<link rel="stylesheet" href="css/loginframe.css">
</head>
<body>
<div class="container">
<div class="login">
<div class="switch-menu clear-fix">
<span class="left">
短信登录/注册
</span>
<span class="right selected">
密码登录
</span>
</div>
<form action="" class="form">
<div class="hidden">
<div class="form-item">
<p class="txt">
请仔细阅读
<a href="">豆瓣使用协议、隐私政策</a>
</p>
</div>
<div class="form-item">
<input type="text" class="more-text-indent" placeholder="手机号">
<div class="country-code">
<div>
+86
</div>
<div class="choose-area hidden">
<div class="center">
<div class="title">
选择国际区号
</div>
<ul>
<li class="clearfix"><span class="left">国家1</span><span class="right">+1</span></li>
<li class="clearfix selected">
<span class="left">国家2</span>
<span class="left iconfont iconV"></span>
<span class="right">+2</span>
</li>
<li class="clearfix"><span class="left">国家3</span><span class="right">+3</span></li>
<li class="clearfix"><span class="left">国家4</span><span class="right">+4</span></li>
<li class="clearfix"><span class="left">国家5</span><span class="right">+5</span></li>
<li class="clearfix"><span class="left">国家6</span><span class="right">+6</span></li>
<li class="clearfix"><span class="left">国家7</span><span class="right">+7</span></li>
<li class="clearfix"><span class="left">国家8</span><span class="right">+8</span></li>
<li class="clearfix"><span class="left">国家9</span><span class="right">+9</span></li>
<li class="clearfix"><span class="left">国家10</span><span class="right">+10</span></li>
<li class="clearfix"><span class="left">国家11</span><span class="right">+11</span></li>
<li class="clearfix"><span class="left">国家12</span><span class="right">+12</span></li>
<li class="clearfix"><span class="left">国家13</span><span class="right">+13</span></li>
<li class="clearfix"><span class="left">国家14</span><span class="right">+14</span></li>
<li class="clearfix"><span class="left">国家15</span><span class="right">+15</span></li>
<li class="clearfix"><span class="left">国家16</span><span class="right">+16</span></li>
<li class="clearfix"><span class="left">国家17</span><span class="right">+17</span></li>
<li class="clearfix"><span class="left">国家18</span><span class="right">+18</span></li>
<li class="clearfix"><span class="left">国家19</span><span class="right">+19</span></li>
<li class="clearfix"><span class="left">国家20</span><span class="right">+20</span></li>
<li class="clearfix"><span class="left">国家21</span><span class="right">+21</span></li>
<li class="clearfix"><span class="left">国家22</span><span class="right">+22</span></li>
<li class="clearfix"><span class="left">国家23</span><span class="right">+23</span></li>
<li class="clearfix"><span class="left">国家24</span><span class="right">+24</span></li>
<li class="clearfix"><span class="left">国家25</span><span class="right">+25</span></li>
<li class="clearfix"><span class="left">国家26</span><span class="right">+26</span></li>
<li class="clearfix"><span class="left">国家27</span><span class="right">+27</span></li>
<li class="clearfix"><span class="left">国家28</span><span class="right">+28</span></li>
<li class="clearfix"><span class="left">国家29</span><span class="right">+29</span></li>
<li class="clearfix"><span class="left">国家30</span><span class="right">+30</span></li>
<li class="clearfix"><span class="left">国家31</span><span class="right">+31</span></li>
<li class="clearfix"><span class="left">国家32</span><span class="right">+32</span></li>
<li class="clearfix"><span class="left">国家33</span><span class="right">+33</span></li>
<li class="clearfix"><span class="left">国家34</span><span class="right">+34</span></li>
<li class="clearfix"><span class="left">国家35</span><span class="right">+35</span></li>
<li class="clearfix"><span class="left">国家36</span><span class="right">+36</span></li>
<li class="clearfix"><span class="left">国家37</span><span class="right">+37</span></li>
<li class="clearfix"><span class="left">国家38</span><span class="right">+38</span></li>
<li class="clearfix"><span class="left">国家39</span><span class="right">+39</span></li>
<li class="clearfix"><span class="left">国家40</span><span class="right">+40</span></li>
<li class="clearfix"><span class="left">国家41</span><span class="right">+41</span></li>
<li class="clearfix"><span class="left">国家42</span><span class="right">+42</span></li>
<li class="clearfix"><span class="left">国家43</span><span class="right">+43</span></li>
<li class="clearfix"><span class="left">国家44</span><span class="right">+44</span></li>
<li class="clearfix"><span class="left">国家45</span><span class="right">+45</span></li>
<li class="clearfix"><span class="left">国家46</span><span class="right">+46</span></li>
<li class="clearfix"><span class="left">国家47</span><span class="right">+47</span></li>
<li class="clearfix"><span class="left">国家48</span><span class="right">+48</span></li>
<li class="clearfix"><span class="left">国家49</span><span class="right">+49</span></li>
<li class="clearfix"><span class="left">国家50</span><span class="right">+50</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-item">
<input type="text" placeholder="验证码">
<a href="" class="ab-right">
获取验证码
</a>
</div>
<div class="form-item">
<button class="btn">登录豆瓣</button>
</div>
<div class="form-item tip clearfix">
<label class="left">
<input type="checkbox" name="" id="">
下次自动登录
</label>
<span class="right">
<a href="">收不到验证码</a>
</span>
</div>
</div>
<div>
<div class="form-item tip clear-fix">
<a href="" class="right">找回密码</a>
</div>
<div class="form-item">
<input type="text" class="text" placeholder="手机号 / 邮箱">
</div>
<div class="form-item">
<input type="text" class="password" placeholder="密码">
</div>
<div class="form-item">
<button class="btn" disabled>登录豆瓣</button>
</div>
<div class="form-item tip clear-fix">
<label class="left">
<input type="checkbox" name="" id="">
下次自动登录
</label>
<span class="right">
<a href="">海外手机登录</a>
</span>
</div>
</div>
</form>
<div class="bottom">
<span class="msg">
第三方登录:
</span>
<i class="iconfont iconweixin"></i>
<i class="iconfont iconweibo"></i>
</div>
</div>
<div class="two-bar-codes hidden">
<div class="title">
二维码登录
</div>
<div class="code">
<img src="img/two-bar-codes.png" alt="">
</div>
<div class="tip">
请打开豆瓣客户端扫一扫
</div>
</div>
<div class="change">
<i class="icon icon-qrcode"></i>
</div>
<div>
<div class="pointer hidden">
扫码登录
</div>
</div>
</div>
</body>
</html>
login.css
@import "../css/common.css";
a{
color: #41ac52;
}
input[type="text"],input[type="password"]{
width: 100%;
border: 1px solid #e4e6e5;
box-sizing: border-box;
height: 34px;
padding-left: 10px;
border-radius: 5px;
font-size: 13px;
}
input[type="text"].more-text-indent{
padding-left: 60px;
}
.container{
width: 300px;
height: 300px;
line-height: 2;
padding: 30px 10px 10px 10px;
color: #9b9b9b;
box-sizing: border-box;
position: relative;
}
.container .login .switch-menu{
border-bottom: 1px solid #ececec;
font-size: 13px;
margin-bottom: 10px;
}
.container .login .switch-menu span{
width: 50%;
text-align: center;
cursor: pointer;
}
.container .login .switch-menu span.selected{
font-weight: bold;
color: #333;
border-bottom: 1px solid #494949;
margin-bottom: -1px;
}
.container .login .form .form-item{
margin-bottom: 10px;
position: relative;
font-size: 12px;
}
.container .login .form .form-item .txt{
font-size: 12px;
}
.container .login .form .form-item .country-code{
position: absolute;
width: 51px;
height: 26px;
top:5px;
left: 0;
text-align: center;
color: #333;
font-weight: bold;
font-size: 15px;
line-height: 26px;
border-right: 1px solid #e4e6e5;
cursor: pointer;
}
.container .login .form .form-item .country-code .choose-area{
position: fixed;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .5);
left: 0;
top: 0;
z-index: 1;
}
.container .login .form .form-item .country-code .choose-area .center{
width: 285px;
height: 225px;
position: absolute;
box-sizing: border-box;
border: 1px solid #bbb;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
border-radius: 5px;
cursor: auto;
overflow: hidden;
}
.container .login .form .form-item .country-code .choose-area .center .title{
background: #ebf5eb;
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 10px;
color: #060;
font-weight: bold;
}
.container .login .form .form-item .country-code .choose-area .center ul{
height: 180px;
overflow: auto;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
}
.container .login .form .form-item .country-code .choose-area .center ul li{
height: 38px;
line-height: 38px;
border-top: 1px solid #e5e5e5;
cursor: pointer;
box-sizing: border-box;
}
.container .login .form .form-item .country-code .choose-area .center ul li:last-child{
border-bottom: 1px solid #e5e5e5;;
}
.container .login .form .form-item .country-code .choose-area .center ul li .right{
color: #aaa;
font-weight: normal;
}
.container .login .form .form-item .country-code .choose-area .center ul li.selected{
color: #42bd56;
}
.container .login .form .form-item .country-code .choose-area .center ul li.selected .right{
color: inherit;
}
.container .login .form .form-item .country-code .choose-area .center ul li.selected .iconfont{
padding-left: 10px;
}
.container .form-item .ab-right{
position: absolute;
right: 7px;
top: 5px;
}
.container .form-item .btn{
width: 100%;
height: 34px;
font-size: 15px;
}
.container .login .form .form-item.tip{
font-size: 13px;
color: #333;
}
.container .login .bottom{
border-top: 1px solid #ddd;
}
.container .login .bottom .msg{
font-size: 11px;
vertical-align: 2px;
}
.container .login .bottom .iconfont{
margin-left: 12px;
cursor: pointer;
}
.container .login .bottom .iconfont.iconweixin{
color: rgb(70, 187, 54);
}
.container .login .bottom .iconfont.iconweibo{
color: rgb(234, 93, 92);
}
.container .two-bar-codes{
font-size: 13px;
}
.container .two-bar-codes .title{
color: #333;
}
.container .two-bar-codes .code{
text-align: center;
font-size: 0;
margin-top: 20px;
}
.container .two-bar-codes .code img{
width: 170px;
height: 170px;
}
.container .two-bar-codes .tip{
width: 183px;
height: 25px;
line-height: 25px;
background-color: rgba(0,0,0,.08);
color: #494949;
margin: 0 auto;
text-align: center;
border-radius: 20px;
margin-top: 5px;
}
.container .change{
position: absolute;
width: 30px;
height: 30px;
right: 10px;
top: 8px;
}
.container .change .icon{
width: 30px;
height: 30px;
display: block;
cursor: pointer;
}
.container .change .icon.icon-qrcode{
background: url("../img/qrcode.png") no-repeat left top/100% 100%;
}
.container .change .icon.icon-pccode{
background: url("../img/pccode.png") no-repeat left top/100% 100%;
}
.container .pointer{
position: absolute;
background: #f5faf9;
height: 28px;
line-height: 28px;
border: 1px solid rgba(66,189,86,.3);
border-radius: 3px;
font-size: 13px;
top: 8px;
right: 50px;
padding: 0 5px;
box-sizing: border-box;
}
.container .change:hover+div .pointer{
display: block;
}
reset.css
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;
}
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;
}
a {
text-decoration: none;
color: inherit;
}
input,button{
border: none;
outline: none;
outline-offset: 0;
}
button{
background: initial;
padding: 0;
}
2170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
