<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/index_db.css">
<title>豆瓣</title>
</head>
<body>
<!-- 最上方头部 -->
<header>
<div>
<!-- 左部导航 -->
<nav>
<ul>
<li><a href="#01">豆瓣</a></li>
<li><a href="#02">豆瓣</a></li>
<li><a href="#03">豆瓣</a></li>
<li><a href="#04">豆瓣</a></li>
<li><a href="#05">豆瓣</a></li>
<li><a href="#06">豆瓣</a></li>
<li><a href="#07">豆瓣</a></li>
<li><a href="#08">豆瓣</a></li>
<li><a href="#09">豆瓣</a></li>
<li><a href="#10">豆瓣</a></li>
<li><a href="#11">豆瓣</a></li>
</ul>
</nav>
<!-- 右部导航 -->
<nav>
<ul>
<li><a href="#1">下载豆瓣客户端</a></li>
<li><a href="#2">提醒</a></li>
<li><a href="#3">提醒</a></li>
</ul>
</nav>
</div>
</header>
<!-- 内容部分头部 -->
<header>
<div>
<div>
<a href="https://movie.douban.com/">
<img src="./IMG/lg_main_a11_1.png" alt="豆瓣"></a>
</div>
<ul>
<li><a href="#11">豆瓣</a></li>
<li><a href="#12">我的豆瓣</a></li>
<li><a href="#13">我的豆瓣<i></i></a></li>
<li><a href="#14">我的豆瓣</a></li>
<li><a href="#15">我的</a></li>
<li><a href="#16">我的豆瓣</a></li>
</ul>
<form action="https://search.douban.com/movie/subject_search" method="GET">
<input type="text" placeholder="搜索你感兴趣的人" maxlength="50">
<i></i>
</form>
</div>
</header>
<main>
<!-- 左部内容 -->
<article>
<header>
<ul>
<li><a href="#11"><i></i>说句话</a></li>
<li><a href="#12"><i></i>发照片</a></li>
<li><a href="#13"><i></i>推荐网页</a></li>
<li><a href="#14"><i></i>写日记</a></li>
<li><a href="#15"><i></i>发布东西</a></li>
</ul>
<div>
<a href="#0"><i></i>首页设置</a>
</div>
</header>
<form action="" method="post">
<input type="text" placeholder="分享生活点滴" maxlength="50">
<i></i>
<i></i>
</form>
<!-- 文字部分内容 -->
<div>
<!-- 第1小块 -->
<div>
<!-- 左图片 -->
<div>
<img src="./IMG/02.png" alt="">
</div>
<!-- 右文字 -->
<div>
<!-- 第一行昵称 -->
<p>Violet 的日记 ：</p>
<!-- 昵称下方区域 -->
<div>
<!-- 阴影区域和 一小时前 -->
<div>
<!-- 阴影 -->
<div>
<!-- 字和图片 -->
<div>
<!-- 字 -->
<div>
<p>怪力八面体-胡夫金字塔</p>
<p>前几天看到有人在广播发了这个，搜了一似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事真的很好玩。。。吉萨的三座大金塔里，有一座是一个八面体。这个八面体金字塔...
</p>
</div>
<!-- 图片 -->
<div>
<img src="./IMG/p35801459.jpg" alt="">
</div>
</div>
<!-- 喜欢 -->
<div>
<div>
<i></i>
喜欢
</div>
</div>
</div>
<p>一小时前，来自 热门精选</p>
</div>
</div>
</div>
</div>
<!-- 2 -->
<div>
<!-- 左图片 -->
<div>
<img src="./IMG/02.png" alt="">
</div>
<!-- 右文字 -->
<div>
<!-- 第一行昵称 -->
<p>Violet 的日记 ：</p>
<!-- 昵称下方区域 -->
<div>
<!-- 阴影区域和 一小时前 -->
<div>
<!-- 阴影 -->
<div>
<!-- 字和图片 -->
<div>
<!-- 字 -->
<div>
<p>怪力八面体-胡夫金字塔</p>
<p>前几天看到有人在广播发了这个，搜了一似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事真的很好玩。。。吉萨的三座大金塔里，有一座是一个八面体。这个八面体金字塔...
</p>
</div>
<!-- 图片 -->
<div>
<img src="./IMG/p35801459.jpg" alt="">
</div>
</div>
<!-- 喜欢 -->
<div>
<div>
<i></i>
喜欢
</div>
</div>
</div>
<p>一小时前，来自 热门精选</p>
</div>
</div>
</div>
</div>
<!-- 3 -->
<div>
<!-- 左图片 -->
<div>
<img src="./IMG/02.png" alt="">
</div>
<!-- 右文字 -->
<div>
<!-- 第一行昵称 -->
<p>Violet 的日记 ：</p>
<!-- 昵称下方区域 -->
<div>
<!-- 阴影区域和 一小时前 -->
<div>
<!-- 阴影 -->
<div>
<!-- 字和图片 -->
<div>
<!-- 字 -->
<div>
<p>怪力八面体-胡夫金字塔</p>
<p>前几天看到有人在广播发了这个，搜了一似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事真的很好玩。。。吉萨的三座大金塔里，有一座是一个八面体。这个八面体金字塔...
</p>
</div>
</div>
<!-- 喜欢 -->
<div>
<div>
<i></i>
喜欢
</div>
<span></span>
<div>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
</div>
</div>
</div>
<p>一小时前，来自 热门精选</p>
</div>
</div>
</div>
</div>
<!-- 4 -->
<div>
<!-- 左图片 -->
<div>
<img src="./IMG/02.png" alt="">
</div>
<!-- 右文字 -->
<div>
<!-- 第一行昵称 -->
<p>Violet 的日记 ：</p>
<!-- 昵称下方区域 -->
<div>
<!-- 阴影区域和 一小时前 -->
<div>
<!-- 阴影 -->
<div>
<!-- 字和图片 -->
<div>
<!-- 字 -->
<div>
<p>怪力八面体-胡夫金字塔</p>
<p>前几天看到有人在广播发了这个，搜了一似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事真的很好玩。。。吉萨的三座大金塔里，有一座是一个八面体。这个八面体金字塔...
</p>
</div>
<!-- 图片 -->
<div>
<img src="./IMG/p35801459.jpg" alt="">
</div>
</div>
<!-- 喜欢 -->
<div>
<div>
<i></i>
喜欢
</div>
<span></span>
<div>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
</div>
</div>
</div>
<p>一小时前，来自 热门精选</p>
</div>
</div>
</div>
</div>
<!-- 5 -->
<div>
<!-- 左图片 -->
<div>
<img src="./IMG/02.png" alt="">
</div>
<!-- 右文字 -->
<div>
<!-- 第一行昵称 -->
<p>Violet 的日记 ：</p>
<!-- 昵称下方区域 -->
<div>
<!-- 阴影区域和 一小时前 -->
<div>
<!-- 阴影 -->
<div>
<div>
<img src="./IMG/1.png" alt="">
<img src="./IMG/2.png" alt="">
<img src="./IMG/3.png" alt="">
<img src="./IMG/4.png" alt="">
</div>
<p class="FCXA">富春新安</p>
<!-- 喜欢 -->
<div>
<div>
<i></i>
喜欢
</div>
<span></span>
<div>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
</div>
</div>
</div>
<p>一小时前，来自 热门精选</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<a href="#31"><前页</a>
<span><a href="#32">1</a></span>
<span><a href="#33">2</a></span>
<span><a href="#34">3</a></span>
<span><a href="#35">4</a></span>
<span><a href="#36">5</a></span>
<span><a href="#37">6</a></span>
<span><a href="#38">7</a></span>
<span><a href="#39">8</a></span>
<span><a href="#310">9</a></span>
<span><a href="#311">...</a></span>
<a href="#312">>后页</a>
</footer>
</article>
<!-- 右部内容 -->
<aside>
<!-- 1 -->
<div>
<p>豆瓣正在发生……</p>
<p>哈利波特第八部正在同步上映</p>
<p>Chpina Joy优秀游戏鉴赏</a>
</div>
<!-- 2 -->
<div>
<img src="./IMG/999.png" alt="这很夏天">
</div>
<!-- 3 -->
<div>
<p><a href="#11">>申请创建小站</a></p>
<img src="./IMG/index_douban_ad_4.png" alt="index_douban_ad_">
</div>
<!-- 4 -->
<div>
<div>
<div>
<p>热门活动……<a href="#9"> (换一个)</a></p>
<p><a href="#13">给我看看你们美好的工作台吧！</a></p>
<p>时间：6月27日-8月26日</p>
<p>参加：266人参加</p>
</div>
<img src="./IMG/o702700.jpg" alt="XXXX">
</div>
<p>
<a href="#6">>更多线上活动</a>
</p>
</div>
<!-- 5 -->
<div>
<p>豆瓣一拍一……<a href="#9"> (更多)</a></p>
<div>
<figure>
<img src="./IMG/888.png" alt="XXXX">
<figcaption>
<p><a href="#6">很高兴遇见你</a></p>
<p>城市：厦门</p>
<p>价格：2400</p>
</figcaption>
</figure>
<figure>
<img src="./IMG/777.png" alt="XXXX">
<figcaption>
<p><a href="#6">微淘系|至真系列</a></p>
<p>城市：北京</p>
<p>价格：1480</p>
</figcaption>
</figure>
</div>
<p><a href="#6">>已开放17个城市</a></p>
</div>
<!-- 6 -->
<div>
<img src="./IMG/1e645caf4e73682.jpg" alt="XXXX">
</div>
</aside>
</main>
<footer>
<p>© 2005－2020 douban.com, all rights reserved 北京豆网科技有限公司 </p>
<div>
<span><a href="#21">关于豆瓣 </a></span>
<span><a href="#22">在豆瓣工作 </a></span>
<span><a href="#23">联系我们 </a></span>
<span><a href="#24">免责声明 </a></span>
<span><a href="#25">帮助中心 </a></span>
<span><a href="#26">移动应用 </a></span>
<span><a href="#27">豆瓣广告</a></span>
</div>
</footer>
</body>
</html>
@mixin f_be_ce {
display: flex;
justify-content: space-between;
align-items: center;
}
@mixin f_be_sta {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
@mixin f_be {
display: flex;
justify-content: space-between;
}
@mixin f_ce {
display: flex;
align-items: center;
}
a {
text-decoration: none;
}
i {
display: inline-block;
}
body {
>header:nth-child(1) {
background-color: #535751;
height: 24px;
box-sizing: border-box;
>div {
width: 1240px;
margin: 0 auto;
@include f_be_ce;
>nav {
>ul {
@include f_be_ce;
li {
height: 24px;
>a {
font-size: 12px;
color:#d5d5d5;
padding: 4px 0;
&:hover {
color: white;
}
}
}
}
}
>nav:nth-child(1) {
width: 500px;
}
>nav:nth-child(2) {
width: 185px;
}
}
}
>header:nth-child(2) {
height: 75px;
background-color: #ecf5ed;
@include f_ce;
>div {
width: 950px;
margin: 0 auto;
@include f_be_ce;
ul {
width: 440px;
@include f_be_ce;
li {
a {
color: #017821;
font-size: 14px;
&:hover {
color:#017821;
font-weight: bolder;
}
}
}
>li:nth-child(3) {
>a {
i {
margin-left: 3px;
width: 17px;
height: 7px;
background-image: url(../IMG/index_03.png);
position: relative;
top: -4px;
}
}
}
}
>div:nth-child(1) {
width: 157px;
}
form {
position: relative;
input {
height: 30px;
width: 280px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
padding: 0 8px;
padding-right: 28px;
&::-webkit-input-placeholder {
font-size: 12px;
color: #e0e3e2;
}
outline: none;
}
i {
width: 12px;
height: 12px;
background-image: url(../IMG/111_03.png);
position: absolute;
right: 8px;
top: 9px;
}
}
}
}
main {
margin: 52px auto 64px;
width: 950px;
@include f_be;
article {
width: 600px;
header {
@include f_be_ce;
ul {
@include f_be_ce;
width: 430px;
li {
a {
color: #3378ac;
&:hover {
color: black;
}
i {
margin-right: 3px;
background-image: url(../IMG/icon.png);
}
}
}
>li:nth-child(1)>a>i {
height: 16px;
width: 14px;
background-position: -3px -97px;
}
>li:nth-child(2)>a>i {
width: 20px;
height: 15px;
background-position: -26px -8px;
}
>li:nth-child(3)>a>i {
width: 16px;
height: 15px;
background-position: -1px -8px;
}
>li:nth-child(4)>a>i {
width: 14px;
height: 15px;
background-position: -3px -129px;
}
>li:nth-child(5)>a>i {
width: 12px;
height: 14px;
background-position: -3px -159px;
}
}
div {
width: 64px;
a {
font-size: 12px;
color: #cdcdd0;
>i {
margin-right: 3px;
height: 13px;
width: 13px;
background-position: -26px -39px;
background-image: url(../IMG/icon.png);
}
}
}
a {
@include f_be_ce;
}
}
form {
position: relative;
margin: 9px 0 24px;
input {
height: 30px;
width: 600px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
padding: 0 10px;
padding-right: 65px;
&::-webkit-input-placeholder {
font-size: 16px;
color: #ababab;
}
outline: none;
}
i:nth-of-type(1) {
width: 11px;
height: 13px;
background-image: url(../IMG/icon_07.png);
position: absolute;
right: 8px;
top: 9px;
}
i:nth-of-type(2) {
width: 17px;
height: 13px;
background-image: url(../IMG/icon_03.png);
position: absolute;
right: 40px;
top: 9px;
}
}
// 整个文字区域
>div {
width: 100%;
// 每小块文字区域
>div {
margin-bottom: 25px;
@include f_be_sta;
// 左部图片区域
>div:nth-child(1) {
img{
width: 50px;
height: 50px;
}
}
// 右部文字区域
>div:nth-child(2) {
width: 537px;
box-sizing: border-box;
font-size: 14px;
color: black;
// 昵称下方区域
>div {
padding: 12px 0 0 20px;
// 阴影区域和 一小时前
>div{
border-bottom: 1px solid #e5e5e5;
// 阴影
>div{
padding: 15px 22px 17px 22px;
background-color: #f9f9f9;
// 字和图片
>div:nth-of-type(1) {
@include f_be_ce;
// 字
>div:nth-of-type(1){
width: 335px;
flex: 1;
>p:nth-of-type(1) {
font-size: 16px;
color: #3277b5;
margin-bottom: 5px;
}
>p:nth-of-type(2) {
line-height: 1.5;
margin-bottom: 3px;
}
}
// 图片
>div:nth-of-type(2){
margin-left: 20px;
>img {
width: 105px;
height: 60px;
}
}
}
// 喜欢
>div:nth-of-type(2) {
margin-top: 12px;
@include f_be_ce;
>div:nth-of-type(1) {
padding: 2px 5px;
border: 1px solid #9a9a97;
font-weight: bold;
>i {
width: 13px;
height: 12px;
background-image: url(../IMG/icon.png);
background-position: -26px -59px;
}
}
>span {
height: 20px;
width: 1.5px;
margin: 0 15px;
background-color: #9a9a97;
}
>div:nth-of-type(2) {
color: #9a9a97;
flex: 1;
span {
margin-right: 10px;
}
}
}
.FCXA {
color: #3277b5;
margin: 10px 0 15px;
}
}
// 一小时前
>p {
color: #9a9a97;
margin: 8px 0 25px 22px;
}
}
}
}
}
}
footer{
@include f_be_ce;
font-size: 14px;
width: 400px;
height: 20px;
margin: 30px auto 0px;
>a:nth-of-type(1) {
color: #abaca9;
}
>span>a {
color: #3277b1;
padding: 2px 5px;
&:hover {
color: white;
font-weight: bold;
background-color: #82c074;
}
}
>a:last-child {
color: #3277b1;
}
}
}
aside {
font-size: 12px;
width: 250px;
>div:nth-child(1) {
background-color: #f2f7f6;
padding: 19px;
margin-bottom: 20px;
>p:nth-of-type(1) {
font-size: 16px;
color: #007736;
font-weight: bold;
}
>p:nth-of-type(2){
font-size: 14px;
margin: 17px 0 12px;
color: #3377aa;
}
>p:nth-of-type(3){
font-size: 14px;
color: #3377aa;
}
}
>div:nth-child(2) {
margin-bottom: 45px;
>img {
width: 250px;
}
}
>div:nth-child(3) {
>p {
margin-bottom: 30px;
>a {
color: #3377aa;
}
}
>img {
width: 250px;
}
}
>div:nth-child(4) {
>div {
@include f_be_ce;
margin-top: 32px;
>div {
width: 190px;
>p:nth-of-type(1) {
font-size: 16px;
color: #007736;
font-weight: bold;
>a {
font-size: 12px;
font-weight: normal;
color: #307aa8;
}
}
>p:nth-of-type(n+2) {
margin-top: 5px;
>a {
color: #307aa8;
}
}
>p:nth-of-type(n+3) {
color: #a09a9f;
}
}
>img {
width: 45px;
height: 35px;
}
}
>p {
margin: 20px 0 38px;
>a {
color: #307aa8;
}
}
}
>div:nth-child(5) {
>p:nth-of-type(1) {
font-size: 16px;
color: #007736;
font-weight: bold;
margin-bottom: 20px;
>a {
font-size: 12px;
font-weight: normal;
color: #307aa8;
}
}
>div {
display: flex;
flex-direction: column;
justify-content: space-between;
>figure {
width: 250px;
margin-bottom: 15px;
display: flex;
>img {
width: 120px;
height: 80px;
}
>figcaption {
margin-left: 10px;
color: #307aa8;
>p:nth-of-type(1) {
margin-bottom: 5px;
>a {
color: #307aa8;
}
}
>p:nth-of-type(n+2) {
color: #a29999;
}
}
}
}
>p:nth-of-type(2) {
margin: 2px 0 20px;
>a {
color: #307aa8;
}
}
}
}
}
>footer {
@include f_be_ce;
width: 1000px;
margin: 0 auto;
font-size: 12px;
border-top: 1px dashed gray;
padding: 10px 0 20px;
>p {
color: gray;
}
div {
width: 460px;
@include f_be_ce;
a {
display: inline-block;
color: #3377aa;
}
}
}
}
1745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
