笔记
标题栏
1. 在做一个大网页时，注意分区。用注释区分每一部分的开始与结束
2. 网站图标
- - 网站的根目录 直接在网址后面加favicon.ico
- - 在head元素里面找
（当在根目录里面没有找到时）
3. 页面通用样式，提到css最前面
4.
是通过给a元素或者h1元素加背景图实现的
5. a元素是行盒，设置宽高没用，应该将其设置为块盒
6. 如何加背景图
background: url("../img/logo_db.png")no-repeat;
不要重复 在后面加 no-repeat
7. 将图片上的文字隐藏
- 用span元素将文字包起来，再在css中设置span元素为display：none
- 将高度设置为0，在设置padding-top为高度值，将文字挤下去，再用溢出隐藏overflow：hidden；
8. 导航菜单可以用nav
9. 若一个区域的高度不会再变化，给他定高
10. 可以在通用样式中写左或者右浮动，然后谁需要左或者右浮动，在html中给其元素的class中加浮动名字就好了
11. height: 90px;
padding-top: 30px;
/*会出现高度变大，则应该用 box-sizing: border-box;来取消高度变大*/
12. 输入文字后，按回车键就完成搜索。可以用以下代码来实现
- - 使用JS代码
- - 在input元素之前加一个form
13. 设置input文字框中的placeholder，用伪元素选择器选中placeholder，再设置其样式
14. 重置按钮
button{
border: none;
outline: none;
outline-offset: 0;
/*重置按钮的背景颜色*/
background: transparent;
}
15. 若背景图太大时，可以设置背景图的宽高
left top/值1 值2；（宽，高）
16. 块盒，独占一行，想让其水平排列，可以将其变为行块盒，或者浮动
17. 雪碧图
设置背景图的位置
background-position: -60px 0;/*左右 上下*/
登录区
1. 把一个页面做成网页的好处，方便其他页面也可以使用这个页面
2. 为方便切换，可以通过两个div将两个切换的区域包裹起来，切换时将一个隐藏就好了
3. 谁被选中就在谁的class中加 selected，然后再在CSS中书写被选中时的样式
4. 
想要画红黄两条线的区域重合，则可以设置margin-bottom: -1px;将外边框向下移一个像素，隐藏起来
5. 表单元素里面的文字，可以用p元素包起来
6. 表单元素中文字距离最前面的距离，用 padding-left设置。text-indent，会导致文字多时，溢出表单格而且会显示在表单格外面 text-indent: 10px;
7. 表单前面的+86 ,重新设置一个div，将div用绝对定位放到表单头
8. 铺满整个视口，且背景为半透明的白色。相当于设置蒙层
position: fixed;
width: 100%;
height: 100%;
background: rgba(255,255, 255,0.5);
left: 0;
top: 0;
/*设置z-index，是蒙层位于最上面*/
z-index: 1;
9. 定位元素横向纵向都居中
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
10. 当背景颜色覆盖了边框盒的圆角时，
- - 给边框盒所在元素设置overflow：hidden
- - 给设置背景颜色的元素也设置圆角边框
11. 速写
<ul>
<li class="clearfix"><span class="left">国家名1</span><span class="right">+1</span></li>
<li class="clearfix"><span class="left">国家名2</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>
12. 出现滚动条
定高，overflow: auto;
height: 180px;
overflow: auto;
13. 上下都有边框，有些地方会重叠，则设置margin-top=-1就好了
也可以只设置上边距，选中最后一个元素，设置下边距
14. 注意在iconfont中加入了新的图标后，要刷新生成地址！！！
15. 当很多地方都要使用字体图标地址时，可以在common中统一设置。这样就可以应用到每一个文件中
16. 做静态页面时，其他的切换页面要注意隐藏，用的时候再取消隐藏就好了
17. 按钮禁用
加一个disabled
在CSS中，用:disabled
18. 字体图标的颜色是对应字体的颜色
19. 若文字与字体图标没有对齐时，设置文字的 vertical-align: ，通过改变属性值，使得文字与图标对齐
20. 图片居中（行盒）
- 将其变为块盒，定宽，margin=auto
- 在其父元素设置 text-align: center;
21. 解决图片周围的白边，给其父元素
font-size: 0;
22. 若无法用hidden隐藏的，交给JS处理，但是不可以删除，可以注释掉
23. 应用网页，用iframe元素在html文件中直接引用网页的html文件
横幅区
1. 可以用url加背景图
2. 加完背景图后设置图片的位置
> 左右 上下/宽度 高度
表示距离左边120px远 距离上面为0
也可以在对应位置设置具体数值，表示距离左右上下多少像素
auto为自动，100%为撑满
3. 写背景时不仅可以加背景图片且设置图片格式，还可以设置背景颜色
4. alt + shift +F 同时按，可以将代码对齐
5. span元素里面不能用div元素
6. 给图片所含区域设置宽高，再让图片撑满整个区域，就可以调整图片的大小。也可以直接设置图片大小
7. 点击某个位置才显示一些东西，可以给那些东西先设置hidden，在再css中找到点击的那个元素+其兄弟元素（显示的那个元素） 设置display：block
.hengfu .container .biaoyu .qrcode .xiaocode:hover+.dacode{
display: block;
}
热点区
1. 想要 nth-child(even)
不选中其他的div，则可以再在外面写一个div，把所有需要选中的div包起来
2. overflow: hidden;
设置成BFC，以可以适应盛满剩余的区域，创建BFC的元素会避开浮动盒子
3. 广告用图片，不用背景图，他是页面内容的一部分，不是为了好看
4. h元素是块盒，要想他与其他元素排在一行，需要将其变为行块盒
5. 给元素后面加小点
- - 可以用实体字符
- - 也可以直接在该元素后面加：：after
.section-title .title::after{
content: " · · · · · · ";
}
6. 在a元素外面加（）
- 用before，after
- 直接在a元素外面加
7. 激活超链接时的颜色 a:active
8. 用行块盒，可以将1，2，两个区域的各两块，排成一行
（但是可能会产生空白折叠，需要在CSS3中才能处理）
9. text-align: justify;
分散对齐，效果可以用于除了最后一行的其他元素。让左边元素靠左，右边元素靠右
要想最后一行也可以用此效果,可以给最后一个元素加一个尾元素，(内容为空，不写高度，宽度撑满)让其变为倒数第二个
.hot-main .left ulL::after{
content:"" ;
display: inline-block;
width: 100%;
}
10. 设置图片的 display: block; 来解决图片白边
11. 注意：若只有一个列表，而列表里面的内容有很多，则只写一个ul，很多个li
豆瓣时间
1. 行盒之间的垂直对齐方式用vertical-align: ;
2.
这种一块一块的（高度不固定，而且有多行，浮动后排列可能会很乱），用行块盒做
视频
1. 若图片变为行块盒之后，重叠起来，则可以设置图片的宽度为100%
2. 将字体图标直接放到div的class属性中，可以直接在div中生成字体图标
3. 字体图标实际上，是给元素加了一个::before
所以设置字体图标的样式，可以利用::before
4. ::before是在所加元素的后面再加一个元素，可以算作是所加元素的子元素。
给::before设置绝对定位时，应该是给其父元素即所加元素设置相对定位
5. 若想要做带有图标的a元素，则可以给a元素后面加一个：：after
6. 列表项的次盒子里加数字，且次盒子的位置在列表里面
list-style-type:decimal;
list-style-position: inside;
7. 这种情况，要设置最后一张图片的margin-right为0
8. 设置最大宽度为100%,可以让文字少的，宽度小，文字多的，达到最大宽度后就会产生省略号，隐藏多余部分
.movie-area .item-list li .words a{
/*注意a元素不能设置宽度，应该先将其变为行块盒*/
display:inline-block;
max-width: 100%;
white-space: nowrap;/*让元素不换行*/
overflow: hidden;
text-overflow: ellipsis;/*如果有隐藏的话，用三个点表示*
}
9. 行块盒本身就是BFC，浮动后，不用考虑高度坍塌
10. 让item-list里面的元素，平均分散分布
.group-area .main .item-list{
text-align: justify;
}
.group-area .main .item-list::after{
content: "";
display: inline-block;
width: 100%;
}
11. 当文字较多时,行盒会避开常规流元素,形成文字环绕图片
想要避开文字环绕,则可以给元素设置 overflow: hidden;将其变为BFC
12. 设置背景图,给任意一个元素在css中用
background: url("../img/菜单广告.jpg")no-repeat;
13. 横纵坐标上阴影偏移量,阴影模糊程度(越大越胡),阴影扩散半径,阴影颜色
box-shadow: 2px 2px 3px 4px ragb(0,0,0,.2);
14. 多余部分用原点代替
display: inline-block;
max-width: 100%;
white-space: nowrap;/*让元素不换行*/
overflow: hidden;
text-overflow: ellipsis;/*如果有隐藏的话，用三个点表示*/
音乐
1.
想要达到鼠标移上去时是这种效果，是一个蒙层，加一个超链接字体图标完成的
想要再谁上面有这种效果，可以在其class属性中直接加icon-24gl-play
2. 设置background-position: ;的值可以调节背景图的位置，实现雪碧图
3. 浮动元素会在内部创建BFC，其子元素再浮动，不会产生高度坍塌
4. 将图片设置为块盒，解决白边问题
display: block;
5. 点击img时显示before内容
music-area .music-player-list li .player .img:hover::before{
display: block;
}
6. 图片是块盒，居中不受text-align: center;影响。可以定宽，设置margin：0 auto；
7. 给图片上面设置蒙层，给所含的img图片的div设置before
8. border-radius: 50%;
此时设置的是一个圆
CSS代码
页面css代码
@import "//at.alicdn.com/t/c/font_4346051_63e1h0w65z9.css";
/*统一样式*/
button:hover {
cursor: pointer;
}
body {
line-height: 2;
}
.section {
padding: 35px 0;
}
.section:nth-child(even) {
/*只有当其是双数的子元素（所以并列的）是才会有这个背景颜色*/
background: #f7f7f7;
}
a {
color: #37a;
}
a:hover {
color: #fff;
background: #37a;
}
a:active {
/*激活超链接时的颜色*/
color: #fff;
background: #f93;
}
ul {
word-break: break-all;
/*文字多到超过宽度时就换行*/
}
/*统一样式结束*/
/*首页通用样式*/
.container {
width: 950px;
margin: 0 auto;
/*之后要是遇到宽度为950px的区域，直接写一个div.container就可以了*/
}
.left {
float: left;
}
.right {
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.aside-left {
float: left;
width: 100px;
margin-right: 20px;
}
.aside-right {
float: right;
width: 265px;
margin-left: 30px;
}
.main {
overflow: hidden;
/*将主区域设置成BFC，以可以适应盛满剩余的区域*/
}
.adv img {
width: 100%;
/*adv里面的图片，都宽度撑满*/
display: block;
/*消除图片（行盒）白边*/
}
.section-title .link {
font-size: 12px;
}
.section-title .link::before {
content: " ( ";
}
.section-title .link::after {
content: " ) ";
}
.section-title .title::after {
content: " · · · · · · ";
}
.section-title {
margin: 12px 0;
}
.section-title .title {
display: inline-block;
color: #072;
font-size: 15px;
}
.adv-tag::after {
content: "广告";
color: #c9c9c9;
font-size: 13px;
}
.aside-left .title{
font-size: 24px;
}
.dark-color{/*专门设置一个深色的字体样式，
到时候直接在class中书写，就可以改变字体颜色了*/
color: #494949;
}
.item-list{
display:inline-block;
vertical-align: top;/*垂直顶端对齐*/
line-height: 1.5;
}
.item-list li .img img{
width: 100%;
display: block;/*将图片设置为块盒*/
}
.left-menu{
font-size: 14px;
line-height: 1.5;
}
.left-menu a{
display: block;
}
.left-menu a.new{
position: relative;
}
.left-menu a.new::after{
content: "";
position: absolute;
background: url("../img/new_menu.gif")no-repeat;
width: 17px;
height: 7px;
top: 0;
right: 25px;
}
h2.title{
padding-bottom: 10px;
}
.right-menu-list li{
float: left;
font-size: 12px;
line-height: 1.5;
}
.block-link{
display: inline-block;
padding: 2px 10px;
font-size: 12px;
border-radius: 3px;
}
.menu-adv{
margin-top: 20px;
font-size: 12px;
}
.caidanguangao-1{
width: 50px;
height: 50px;
display: block;
background: url("../img/菜单广告.jpg")no-repeat;
box-shadow: 1px 1px 2px ragb(0,0,0,.2);/*横纵坐标上阴影偏移量,阴影模糊程度(越大越胡),阴影扩散半径,阴影颜色*/
border-radius: 4px;
}
.caidanguangao-2{
width: 50px;
height: 50px;
display: block;
background: url("../img/菜单广告.jpg")no-repeat;
box-shadow: 1px 1px 2px ragb(0,0,0,.2);/*横纵坐标上阴影偏移量,阴影模糊程度(越大越胡),阴影扩散半径,阴影颜色*/
border-radius: 4px;
background-position: -250px 0;
}
.caidanguangao-3{
width: 50px;
height: 50px;
display: block;
background: url("../img/菜单广告.jpg")no-repeat;
box-shadow: 1px 1px 2px ragb(0,0,0,.2);/*横纵坐标上阴影偏移量,阴影模糊程度(越大越胡),阴影扩散半径,阴影颜色*/
border-radius: 4px;
background-position: -50px 0;
}
.group .group-name a{
color: #333;
}
.group .group-name a::after{
content: "»";
}
.group{
line-height: 1.5;}
.group .right-menu-list li{
margin-right: 10px;
}
/*首页通用样式结束*/
/*页头开始*/
.header {
height: 90px;
padding-top: 30px;
/*会出现高度变大，则应该用 box-sizing: border-box;来取消高度变大*/
box-sizing: border-box;
}
/*这样会出现外边距合并，那么可以设置header元素的padding-top: 30px;
.header .container{
margin-top: 30px;
}
*/
.header .logo a {
/*a元素是行盒，无法设置宽高，所以将其变为块盒*/
height: 0px;
width: 154px;
display: block;
/*为让图片不重复设置no-repeat*/
background: url("../img/logo_db\ \(1\).png")no-repeat;
padding-top: 30px;
overflow: hidden;
}
.header .container .search input::placeholder {
color: #ccc;
}
.header .container .search {
width: 270px;
height: 30px;
border: 1px solid #c3c3c3;
margin-left: 20px;
position: relative;
}
.header .container .search input {
/*文本框*/
width: 240px;
height: 20px;
padding: 5px;
font-size: 13px;
}
.header .container .search button {
position: absolute;
width: 30px;
height: 30px;
right: 0;
top: 0px;
color: #c3c3c3;
}
.header .container .menu {
margin-top: 6px;
}
.header .container .menu a {
/*给每个a元素都设置一个背景图*/
background: url("../img/导航菜单.png")no-repeat;
width: 40px;
height: 20px;
/* display: block;块盒，独占一行，想让其水平排列，可以将其变为行块盒，或者浮动*/
float: left;
/*浮动本身就是块盒，就不用加display: block;*/
margin-left: 20px;
}
/*通过雪碧图设置每一个a元素区域的背景图*/
.header .container .menu .yi {
background-position: 0 0;
}
.header .container .menu .er {
background-position: -60px 0;
/*左右 上下*/
}
.header .container .menu .san {
background-position: -120px 0;
/*左右 上下*/
}
.header .container .menu .si {
background-position: -180px 0;
/*左右 上下*/
}
.header .container .menu .wu {
background-position: -240px 0;
/*左右 上下*/
}
.header .container .menu .liu {
background-position: -360px 0;
/*左右 上下*/
}
.header .container .menu .qi {
background-position: -420px 0;
/*左右 上下*/
width: 44px;
/*若这个图片在该区域放不下，可以适当将该区域的宽度变大*/
}
/*页头结束*/
/*横幅开始*/
.hengfu {
height: 330px;
background: url("../img/横幅背景.jpg")no-repeat left top /auto 100% #edf4ed;
/*宽度自动 高度撑满*/
}
.hengfu .container .login-area {
width: 320px;
height: 330px;
}
.hengfu .container .biaoyu {
margin-top: 120px;
margin-right: 25px;
}
.hengfu .container .biaoyu .title {
font-size: 25px;
color: #111;
}
.hengfu .container .biaoyu .btn {
width: 100px;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 2px;
}
/*给图片所含区域设置宽高，再让图片撑满整个区域，就可以调整图片的大小*/
.hengfu .container .biaoyu .qrcode {
display: inline-block;
width: 28px;
height: 28px;
border: 1px solid #48aa0d;
border-radius: 2px;
vertical-align: bottom;
/*图片与按钮对齐*/
position: relative;
}
.hengfu .container .biaoyu .qrcode .xiaocode {
width: 100%;
height: 100%;
}
.hengfu .container .biaoyu .qrcode .dacode {
position: absolute;
left: -2px;
top: -2px;
/*盖住后面的小二维码*/
padding: 15px;
box-sizing: border-box;
background: #fff;
/*设置背景颜色，使其盖住后面的东西*/
border-radius: 4px;
}
.hengfu .container .biaoyu .qrcode .dacode p {
font-size: 13px;
color: #666;
text-align: center;
line-height: 2;
}
.hengfu .container .biaoyu .qrcode .xiaocode:hover+.dacode {
display: block;
}
/*横幅结束*/
/*热点右边栏开始，有一个主区域一个右边栏*/
.hot-list {
line-height: 1.5;
}
.hot-list li {
margin-bottom: 15px;
}
.hot-list li .title {
font-size: 14px;
}
.hot-list li .desc {
font-size: 13px;
color: #aaa;
}
.hot-list li .desc span {
margin-right: 4px;
}
/*热点右边栏结束*/
/*热点主区域开始*/
.hot-main .left {
width: 350px;
}
.hot-main .left ul {
text-align: justify;
line-height: 1.5;
}
.hot-main .left li{
display: inline-block;
width: 170px;
font-size: 12px;
margin: 10px 0;
vertical-align: top;/*li顶端对齐*/
}
.hot-main .left ul::after {
content: "";
display: inline-block;
width: 100%;
}
.hot-main .left li .img img {
width: 100%;
display: block;
/*解决图片白边*/
}
.hot-main .left li .words span{
color: #999;
}
.hot-main .right{
width: 275px;
font-size: 12px;
line-height: 1.5;
}
.hot-main .right li{
margin-bottom: 12px;
}
.hot-main .right li .title{
color: #999;
}
.hot-main .right li .desc{
color:#666 ;
}
/*热点主区域结束*/
/*豆瓣时间开始*/
.time-main li{
display: inline-block;
width: 100px;
margin-right: 60px;
margin-bottom: 30px;
line-height: 1.5;
font-size: 13px;
text-align: center;
vertical-align: top;
}
.time-main li .img img{
width: 100%;
}
.time-main li .words a{
color: #333;
}
.time-main li .words a:hover{
color: #fff;
}
.time-main li .words span{
display: block;/*把span元素设置为块盒，让其换行*/
font-size: 12px;
color: #999;
margin-top: 5px;
}
/*豆瓣时间结束*/
/*视频开始*/
.video-main a{
background: initial;/*背景颜色使用初始值*/
}
.video-main li{
width: 250px;
margin-right: 30px;
font-size: 13px;
display:inline-block;
vertical-align: top;/*垂直顶端对齐*/
line-height: 1.5;
}
.video-main li:nth-child(3n){
margin: 0;/*最右边的元素会因为margin太大而换行，
可以设置3的倍数的margin为0，就可以让其不换行*/
}
.video-main li .img img{
width: 100%;
}
.video-main li .img{
position: relative;
}
.video-main li .img::before {
position: absolute;
width: 100%;
height: 100%;
background: ragb(0,0,0,.3);/*背景设置为蒙层*/
color: #fff;
text-align: center;
line-height: 270px;
font-size: 35px;
}
/*视频结束*/
/*豆瓣电影开始*/
.movie-area .right-menu-list li{
width: 48px;
height: 20px;
overflow: hidden;
}
.order-movie-list{
font-size: 12px;
}
.order-movie-list li{
list-style-type:decimal;
list-style-position: inside;
border-bottom: 1px solid #eaeaea;
margin-bottom: 6px;
line-height: 2;
}
.order-movie-list li a{
margin-left: 5px;
}
.movie-area .item-list li{
width: 100px;
margin-right: 38px;
margin-bottom: 40px;
text-align: center;
font-size: 13px;
display: inline-block;
}
.movie-area .item-list li:nth-child(4n){
margin-right: 0;
}
.movie-area .item-list li .words{
margin-top: 10px;
margin-bottom: 4px;
}
.movie-area .item-list li .words a{
/*注意a元素不能设置宽度，应该先将其变为行块盒*/
display:inline-block;
max-width: 100%;
white-space: nowrap;/*让元素不换行*/
overflow: hidden;
text-overflow: ellipsis;/*如果有隐藏的话，用三个点表示*/
}
.movie-area .func{
margin-top: 7px ;
}
.movie-area .func .block-link{
background: #1c8bd0;
color: #fff;
}
.movie-area .func .block-link:hover{
background: #047fcb;
}
/*豆瓣电影结束*/
/*豆瓣小组开始*/
.group-area a{
color: #007982;
}
.group-area a:hover{
color: #fff !important;
}
.group-area a:active{
color: #fff !important;
}
/*让item-list里面的元素，平均分散分布*/
.group-area .main .item-list{
text-align: justify;
}
.group-area .main .item-list::after{
content: "";
display: inline-block;
width: 100%;
}
.group-area .main .item-list li{
width: 248px;
display: inline-block;
margin-bottom: 30px;
font-size: 13px;
}
.group-area .main .item-list li .img{
float: left;
width: 48px;
margin-right: 15px;
}
.group-area .main .item-list li .words{
overflow: hidden;
}
.group-area .main .item-list li .words span{
color: #999;
display: block;/*让元素换行*/
font-size: 12px;
margin-top: 5px;
}
/*豆瓣小组结束*/
/*豆瓣阅读开始*/
.book-area a{
color: #494949;
}
.book-area a:hover,.book-area a:active{
color: #fff;
}
.book-area .right-menu-list li{
margin-right: 10px;
}
.book-area .right-menu-list li span{
color: #999;
}
.book-area .group{
border-bottom: 1px solid #eaeaea;
padding: 10px 0;
}
.book-area .group:last-child{
border-bottom: none;
}
.book-area .main .item-list li{
width: 100px;
display: inline-block;
margin-right: 38px;
font-size: 13px;
text-align: center;
}
.book-area .main .item-list li:nth-child(4n){
margin-right: 0;
}
.book-area .main .item-list li .words a,span{
margin-top: 15px;
/*多余部分用原点代替*/
display: inline-block;
max-width: 100%;
white-space: nowrap;/*让元素不换行*/
overflow: hidden;
text-overflow: ellipsis;/*如果有隐藏的话，用三个点表示*/
}
.book-area .item-list li .words span{
display: block;/*让span元素但独占一行*/
font-size: 12px;
color: #111;
margin: 8px 0;
}
.book-area .item-list li .func .block-link{
background: #999a95;
color: #fff;
margin-bottom: 10px;
}
.book-area .item-list li .func .block-link:hover{
background: #878882;
color: #fff;
}
/*豆瓣阅读结束*/
/*音乐开始*/
.music-area a{
color: #555d53;
}
.music-area a:hover,.music-area a:active{
color:#fff ;
}
.music-area .aside-left .title a{
color: #f38c88;
}
.music-area .aside-left .title a:hover,.music-area .aside-left title a:active{
color: #fff;
}
.music-area .music-player-list li .number{
color: #111;
}
.music-area .music-player-list li .player{
width: 240px;
}
.music-area .music-player-list li .player .img{
width: 48px;
height: 48px;
position: relative;
}
.music-area .music-player-list li .player .img img{
display: block;/*将图片设置为块盒，解决白边问题*/
width: 100%;
height: 100%;
}
.music-area .music-player-list li .player .img::before{
position: absolute;
width: 100%;
height: 100%;/*把整个区域盛满*/
left: 0;
top: 0;
background: rgba(0,0,0,.8);
color: #fff;
text-align: center;
line-height: 48px;
display: none;
}
.music-area .music-player-list li{
margin:10px 0;
}
.music-area .music-player-list li .player .img:hover::before{
display: block;
}
.music-area .music-player-list li .player .words{
width: 180px;
margin-left: 10px;
font-size: 12px;
line-height: 1.5;
}
.music-area .music-player-list li .player .words span{
display: block;/*a元素独成一行*/
color: #999;
}
.music-area .item-list li{
width: 130px;
text-align: center;
display: inline-block;
font-size: 12px;
margin-bottom: 40px;
}
.music-area .item-list li .img{
width: 80px;
margin: 0 auto;
}
.music-area .item-list li .words{
margin: 4px 0;
}
.music-area .hot-music li .words{
font-size: 12px;
margin: 8px 0;
}
.music-area .hot-music li .img{
position: relative;
}
.music-area .hot-music li .img::before{
position: absolute;
width: 40px;
height: 40px;/*字体图标的宽高*/
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;/*横纵都居中*/
text-align: center;
line-height: 40px;/*文字水平垂直居中*/
font-size: 33px;
color: #fff;
background-color: ragb(0,0,0,.4);
border-radius: 50%;
}
/*音乐结束*/
/*豆品开始*/
.doupin-area .aside-left .title a{
color: #1f9432;
}
.doupin-area .aside-left .title a:hover,.doupin-area .aside-left .title a:active{
color: #fff;
}
.doupin-area .aside-right{
font-size: 14px;
}
.doupin-area .aside-right .adv{
margin-bottom: 10px;
}
.doupin-area .main .item-list li{
width: 240px;
margin-right: 20px;
font-size: 16px;
margin-bottom: 30px;
display: inline-block;
}
.doupin-area .main .item-list li .words{
margin-top: 10px;
}
.doupin-area .main .item-list li .words span{
color: #E55457;
}
/*豆品开始*/
/*同城开始*/
.tongcheng-area a{
color: #643;
}
.tongcheng-area .aside-left .title a{
color: #ec5303;
}
.tongcheng-area .aside-left .title a:hover,.tongcheng-area .aside-left .title a:active{
color: #fff;
}
.tongcheng-area a:hover,.tongcheng-area a:active{
color: #fff;
}
.tongcheng-area .item-list li{
width: 248px;
display: inline-block;
margin-right: 20px;
margin-bottom: 60px;
}
.tongcheng-area .item-list li:nth-child(even){
margin-right: 0;
}
.tongcheng-area .item-list li .img{
margin-right: 10px;
}
.tongcheng-area .item-list li .words{
overflow: hidden;/*变成BFC，避开浮动盒子*/
}
.tongcheng-area .item-list li .words a{
font-size: 13px;
}
.tongcheng-area .item-list li .words span{
font-size: 12px;
display: block;
color: #666;
line-height: 1.5;
}
/*同城结束*/
/*页脚开始*/
.footer{
font-size: 12px;
line-height: 1.5;
color: #999;
}
.footer .container{
border-top: 1px dashed #dcdcdc;
padding-top: 15px;
padding-bottom: 30px;
}
.footer .left img{
width:15px ;
vertical-align: middle;/*图片中部对齐*/
}
.footer .left,.footer .right{
width: 50%;
}
.footer .right .menu a{
display: inline-block;
margin: 0 2px;
}
.footer .right .menu a:first-child{
margin-left: 0;
}
/*页脚结束*/common部分CSS代码
/*多页面共享的CSS代码*/
@import "//at.alicdn.com/t/c/font_4346051_usldc7sjr4.css";
.container{
width: 950px;
margin: 0 auto;/*之后要是遇到宽度为950px的区域，直接写一个div.container就可以了*/
}
.left{
float: left;
}
.right{
float: right;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.hidden{
display: none;
}
/*统一设置按钮的样式*/
.btn{
background:#41ac52 ;
cursor: pointer;
color: #fff;
text-align: center;
border-radius: 3px;
}
/*评分*/
.star-bg{
display: inline-block;
width: 55px;
height: 11px;
background: url("../img/star.png") no-repeat left top/100%;
}
.star50{
background-position: 0 0;/*横纵坐标都为0*/
}
.star45{
background-position: 0 -11px;
}
.star40{
background-position: 0 -22px;
}
.star35{
background-position: 0 -33px;
}
.star30{
background-position: 0 -44px;
}
.star25{
background-position: 0 -55px;
}
.star20{
background-position: 0 -66px;
}
.star15{
background-position: 0 -77px;
}
.star10{
background-position: 0 -88px;/*横纵坐标都为0*/
}
.star05{
background-position: 0 -99px;/*横纵坐标都为0*/
}
.star00{
background-position: 0 -110px;/*横纵坐标都为0*/
}
.star .number{
font-size: 12px;
margin-left: 7px;
color: #e09015;
height: 15px;
}
表单区域的CSS代码
/*使用的字体图标库的文件地址*/
@import "//at.alicdn.com/t/c/font_4346051_cfwt0flh08b.css";
/*在common中书写过了，所以不用再书写，可以直接用
.clearfix::after{
content: "";
display: block;
clear: both;
}*/
/*统一设置*/
.a {
color: #41ac52;
font-size: 12px;
}
input[type="text"]
,input[type="password"]
{
width: 100%;
border: 1px solid #e4e6e5;
box-sizing: border-box;
height: 34px;
/*表单元素中文字距离最前面的距离*/
text-indent: 10px;
border-radius: 4px;/*半径越大，越圆滑*/
font-size: 13px;
}
/*统一设置结束*/
.biao .more-indent{/*更多的缩进*/
padding-left: 65px;
}
/*头部标题*/
.container{
width: 300px;
height: 300px;
line-height: 2;
/* padding: 30px 10px 10px 10px;上右下左*/
padding: 10px;
padding-top: 30px;
color: #9b9b9b;
box-sizing: border-box;
position: relative;
}
.container .login .switch{
border-bottom: 1px solid #ececec;
font-size: 13px;
}
.container .login .switch span{
/*span元素是行盒，不能设置高度，则可以将其浮动起来，变成块盒，并且可以横排排列*/
width: 50%;
text-align: center;
cursor: pointer;
}
.container .login .switch .selected{
font-weight: bold;
color: #333;
border-bottom: 1px solid #494949;
margin-bottom: -1px;
}
/*头部标题结束*/
/*表单区开始*/
.container .zi1, input,.button,.zi2{
margin: 10px 0;
}
.container .biaodan p{
font-size: 12px;
}
.container .biaodan .zi1 p a{
color: #41ac52;
}
/*表单前面的+86 ,重新设置一个div，将div用绝对定位放到表单头*/
.container .biaodan .biao .code{
width: 50px;
height: 28px;
position: absolute;
left: 0px;
top: 13px;
text-align: center;
line-height: 28px;
font-weight: bold;
color: #333;
font-size: 15px;
cursor: pointer;
box-sizing: border-box;
border-right: 1px solid #e4e6e5;
}
.container .biaodan .biao{
position: relative;
}
/*点击区号，切换的页面*/
.container .biaodan .biao .code .xuanxiang{
/*铺满整个视口，且背景为半透明的白色*/
position: fixed;
width: 100%;
height: 100%;
background: rgba(255,255, 255,0.5);
left: 0;
top: 0;
/*设置z-index，是蒙层位于最上面*/
z-index: 1;
}
.container .biaodan .biao .code .xuanxiang .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;
border-radius: 5px;
cursor: auto;/*鼠标样式根据浏览器的默认样式自动调整*/
overflow: hidden;
}
.container .biaodan .biao .code .xuanxiang .center .title{
font-weight: bold;
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 10px;
background: #ebf5eb;
color: #060;
}
.container .biaodan .biao .code .xuanxiang .center ul{
height: 180px;
overflow: auto;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
}
.container .biaodan .biao .code .xuanxiang .center ul li{
height: 38px;
line-height: 38px;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
cursor: pointer;
/*上下都有边框，有些地方会重叠，则设置margin-top=-1就好了
也可以只设置上边距，选中最后一个元素，设置下边距，用 :list-child */
margin-top: -1px;
}
.container .biaodan .biao .code .xuanxiang .center ul li .right{
color: #aaa;
font-weight: normal;
}
.container .biaodan .biao .code .xuanxiang .center ul .selected{
color: #42bd56;
position: relative;
}
.container .biaodan .biao .code .xuanxiang .center ul .selected .right{
color: #42bd56;
}
.container .biaodan .biao .code .xuanxiang .center ul .selected i{
position: absolute;
top: 0;
left: 55px;
}
/*点击国家区号，切换的页面结束*/
.container .biaodan .biao .yan .yanzhengma{
position: absolute;
right: 5px;
top: 14px;
}
.container .biaodan .biao .yan a{
color: #41ac52;
font-size: 13px;
}
.container .biaodan .biao .yan{
position: relative;
}
.container .btn{
width: 100%;
height: 34px;
font-size: 15px;
}
.container .wei a{
color: #41ac52;
}
.container .wei{
font-size: 12px;
color: #333;
}
.btn:disabled{
background:ragb(66,189,86,.5) ;
color:#fff ;
}
/*表单区域结束*/
/*页尾*/
.container .bottom{
border-top: 1px solid #ddd;
}
.container .bottom span{
font-size: 11px;
vertical-align: 2px;
}
.container .bottom .iconfont{
margin-left: 12px;
}
.container .bottom .iconfont.icon-weixin{
color: #34950E;
}
.container .bottom .iconfont.icon-weibo{
color: #EA5D5C;
}
/*页尾结束*/
/*二维码开始*/
.container .erweima{
font-size: 13px;
}
.container .erweima .title{
color: #333;
border-bottom: 1px solid #ececec;
}
.container .erweima .ma img{
width: 170px;
height: 170px;
}
.container .erweima .ma{
text-align: center;
font-size: 0;/*解决图片周围的白边*/
margin-top: 20px ;
}
.container .erweima .tip{
width: 183px;
height: 25px;
line-height: 25px;
background: rgba(0,0,0,.08);
color: #494949;
margin: 0 auto;
text-align: center;
border-radius:20px ;
margin-top: 10px;
}
/*二维码结束*/
/*切换登录二维码*/
.container .change .icon{
width: 30px;
height: 30px;/*i元素是行盒，设置高度没有用*/
display: block;
cursor: pointer;
}
.container .change .icon.duanxin{
background: url("../img/短信登录二维码.png")no-repeat left top/100% 100%/*横向撑满，纵向撑满*/;
}
.container .change .icon.mima{
background: url("../img/密码登录二维码.png")no-repeat left top/100% 100%/*横向撑满，纵向撑满*/;
}
.container .change{
position: absolute;
right: 10px;
top: 10px;
}
/*切换登录二维码结束*/
/*点击切换图标时，才显示文字*/
.container .dianjierweima{
position: absolute;
background: #f5faf9;
height:28px;
line-height: 28px;
color:#666;
border:1px solid ragb(66,189,86,.3);
font-size:13px;
right:50px ;
top: 10px;
padding: 0 5px;
border-radius: 4px;
}
/*点击切换图标时，才显示文字结束*/
/*鼠标点击图标时显示文字（找到change的下一个兄弟元素dianjierweima*/
.container .change:hover+.dianjierweima{
display: block;
}HTML代码
页面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" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index1.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!--标题-->
<div class="header">
<div class="container clearfix">
<div class="logo left">
<h1>
<a href="">豆瓣</a>
</h1>
</div>
<div class="search left">
<form>
<input type="text" placeholder="电影、书籍、音乐">
<button>
<i class="iconfont icon-sousuo"></i>
</button>
</form>
</div>
<nav class="menu right clearfix">
<a href="" class="yi"></a>
<a href="" class="er"></a>
<a href="" class="san"></a>
<a href="" class="si"></a>
<a href="" class="wu"></a>
<a href="" class="liu"></a>
<a href="" class="qi"></a>
</nav>
</div>
</div>
<!--横幅-->
<div class="hengfu">
<div class="container clearfix">
<iframe class="right login-area" src="./loginframe.html" frameborder="0"></iframe>
<div class="biaoyu right">
<div class="title">
<h1>豆瓣</h1>
<span>6.0</span>
</div>
<div class="anniu">
<button class="btn">下载豆瓣APP</button>
<div class="qrcode">
<img class="xiaocode" src="img/二维码qrcode_green.png" alt="">
<div class="dacode hidden">
<img src="img/二维码.png" alt="">
<p>请打开豆瓣 App 扫一扫 或 短信登录验证</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--主区域-->
<div>
<!--热点-->
<div class="section">
<div class="container clearfix">
<!--左边栏
<div class="aside-left">
左边栏
</div>-->
<!--右边栏-->
<div class="aside-right">
<div class="adv">
<a href="">
<img src="img/广告.jpg" alt="">
</a>
</div>
<div class="section-title">
<h3 class="title">热门话题</h3>
<span class="link">
<a href="">去话题广场</a>
</span>
</div>
<div class="liebiao">
<ul class="hot-list item-list">
<li>
<div class="title"><a href="">叶芝和他的拜占庭诗篇</a></div>
<div class="desc">
<span>purplepine的日记</span>
<span>去年四月，赋闲在家的我偶然地和一位朋友译起了叶芝的诗</span>
</div>
</li>
</ul>
<ul class="hot-list item-list">
<li>
<div class="title"><a href="">叶芝和他的拜占庭诗篇</a></div>
<div class="desc">
<span>purplepine的日记</span>
<span>去年四月，赋闲在家的我偶然地和一位朋友译起了叶芝的诗</span>
</div>
</li>
</ul>
<ul class="hot-list item-list">
<li>
<div class="title"><a href="">叶芝和他的拜占庭诗篇</a></div>
<div class="desc">
<span>purplepine的日记</span>
<span>去年四月，赋闲在家的我偶然地和一位朋友译起了叶芝的诗</span>
</div>
</li>
</ul>
<ul class="hot-list item-list">
<li>
<div class="title"><a href="">叶芝和他的拜占庭诗篇</a></div>
<div class="desc">
<span>purplepine的日记</span>
<span>去年四月，赋闲在家的我偶然地和一位朋友译起了叶芝的诗</span>
</div>
</li>
</ul>
<ul class="hot-list item-list">
<li>
<div class="title"><a href="">叶芝和他的拜占庭诗篇</a></div>
<div class="desc">
<span>purplepine的日记</span>
<span>去年四月，赋闲在家的我偶然地和一位朋友译起了叶芝的诗</span>
</div>
</li>
</ul>
<ul class="hot-list item-list">
<li>
<div class="title">
<a href="" class="adv-tag">叶芝和他的拜占庭诗篇
</a>
</div>
<div class="desc">
<span>purplepine的日记</span>
<span>去年四月，赋闲在家的我偶然地和一位朋友译起了叶芝的诗</span>
</div>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">热门内容</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="hot-main clearfix">
<div class="left">
<ul>
<li>
<div class="img">
<a href="">
<img src="img/图1.webp" alt="">
</a>
</div>
<div class="words">
<a href="">2020画画 </a>
<span>27张照片</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/图1.webp" alt="">
</a>
</div>
<div class="words">
<a href="">2020画画 </a>
<span>27张照片</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/图1.webp" alt="">
</a>
</div>
<div class="words">
<a href="">2020画画 </a>
<span>27张照片</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/图1.webp" alt="">
</a>
</div>
<div class="words">
<a href="">2020画画 </a>
<span>27张照片</span>
</div>
</li>
</ul>
</div>
<div class="right">
<ul>
<li>
<a href="">叶芝和他的拜占庭诗篇</a>
<div class="title">purplepine的日记</div>
<div class="desc">
去年四月，赋闲在家的我偶然地和一位朋友译起了叶芝的诗。此前我对这位二十世纪的大诗人和现代主义文学奠基人所知甚少，这样直接上手翻译，一开始自然如行雾中，但不带先入...
</div>
</li>
<li><a href="">Lorem, ipsum dolor.</a></li>
<li><a href="">Lorem, ipsum dolor.</a></li>
<li><a href="">Lorem, ipsum dolor.</a></li>
<li><a href="">Lorem, ipsum dolor.</a></li>
<li><a href="">Lorem, ipsum dolor.</a></li>
<li><a href="">Lorem, ipsum dolor.</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--豆瓣时间-->
<div class="section">
<div class="container clearfix">
<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>
<div class="time-main">
<ul class="item-list">
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/时间.png" alt="">
</a>
</div>
<div class="words">
<a href="">邪典电影本纪——亚文化电影50讲</a>
<span>图文专栏</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--视频-->
<div class="section">
<div class="container clearfix">
<div class="aside-left">
<h2 class="title">
<a href="" class="dark-color">视频</a>
</h2>
</div>
<div class="main video-main">
<div class="section-title">
<a href=""> <h3 class="title">瓣嘴</h3></a>
</div>
<ul class="item-list">
<li> <a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/视频.jpg" alt="">
</div>
</a>
<div class="words">
<a href="">豆瓣x飞跃帆布鞋2.0</a>
</div>
</li>
<li> <a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/视频.jpg" alt="">
</div>
</a>
<div class="words">
<a href="">豆瓣x飞跃帆布鞋2.0</a>
</div>
</li>
<li> <a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/视频.jpg" alt="">
</div>
</a>
<div class="words">
<a href="">豆瓣x飞跃帆布鞋2.0</a>
</div>
</li>
</ul>
<div class="section-title">
<a href=""> <h3 class="title">观影会客厅</h3></a>
</div>
<ul class="item-list">
<li> <a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/视频.jpg" alt="">
</div>
</a>
<div class="words">
<a href="">豆瓣x飞跃帆布鞋2.0</a>
</div>
</li>
<li> <a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/视频.jpg" alt="">
</div>
</a>
<div class="words">
<a href="">豆瓣x飞跃帆布鞋2.0</a>
</div>
</li>
<li> <a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/视频.jpg" alt="">
</div>
</a>
<div class="words">
<a href="">豆瓣x飞跃帆布鞋2.0</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--电影-->
<div class="section">
<div class="container clearfix">
<div class="aside-left">
<h2 class="title">
<a href="" class="dark-color">电影</a>
</h2>
<nav class="left-menu">
<ul>
<li><a href="">选电影</a></li>
<li><a href="" class="new">Impedit.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Fugiat.</a></li>
<li><a href="">Et.</a></li>
<li><a href="">Dolorum?</a></li>
<li><a href="">Dolore.</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Repellat!</a></li>
<li><a href="">Aliquam.</a></li>
</ul>
</nav>
</div>
<div class="aside-right movie-area">
<div class="section-title">
<h3 class="title">影片分类</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
<div class="section-title">
<h3 class="title">近期热门</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="order-movie-list">
<li>
<a href="">93国际列车大劫案：莫斯科行动</a>
</li>
<li>
<a href="">杀手</a>
</li>
<li><a href="">Lorem, ipsum dolor.</a></li>
<li><a href="">Libero, quis commodi!</a></li>
<li><a href="">Porro, vitae. In?</a></li>
<li><a href="">Cumque, tempore. Provident.</a></li>
<li><a href="">Quis, doloremque corporis.</a></li>
<li><a href="">Odio, maxime eos.</a></li>
<li><a href="">Laboriosam, maiores quibusdam.</a></li>
<li><a href="">Accusantium, architecto accusamus.</a></li>
</ul>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">近期热映</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="movie-area">
<ul class="item-list">
<li>
<div class="img">
<a href="">
<img src="img/电影.webp" alt="">
</a>
</div>
<div class="words">
<a href="">蜡笔小新：新次元</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
<div class="func">
<a href="" class="block-link">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/电影.webp" alt="">
</a>
</div>
<div class="words">
<a href="">蜡笔小新：新次元</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
<div class="func">
<a href="" class="block-link">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/电影.webp" alt="">
</a>
</div>
<div class="words">
<a href="">蜡笔小新：新次元</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
<div class="func">
<a href="" class="block-link">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/电影.webp" alt="">
</a>
</div>
<div class="words">
<a href="">蜡笔小新：新次元</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
<div class="func">
<a href="" class="block-link">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/电影.webp" alt="">
</a>
</div>
<div class="words">
<a href="">蜡笔小新：新次元</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
<div class="func">
<a href="" class="block-link">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/电影.webp" alt="">
</a>
</div>
<div class="words">
<a href="">蜡笔小新：新次元</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
<div class="func">
<a href="" class="block-link">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/电影.webp" alt="">
</a>
</div>
<div class="words">
<a href="">蜡笔小新：新次元</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
<div class="func">
<a href="" class="block-link">选座购票</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/电影.webp" alt="">
</a>
</div>
<div class="words">
<a href="">蜡笔小新：新次元</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
<div class="func">
<a href="" class="block-link">选座购票</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--小组-->
<div class="section">
<div class="container clearfix group-area">
<div class="aside-left">
<h2 class="title">
<a href="" >小组</a>
</h2>
<nav class="left-menu">
<ul>
<li><a href="">精选</a></li>
<li><a href="">Impedit.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Fugiat.</a></li>
<li><a href="">Et.</a></li>
<li><a href="">Dolorum?</a></li>
<li><a href="">Dolore.</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Repellat!</a></li>
<li><a href="">Aliquam.</a></li>
</ul>
</nav>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">小组分类</h3>
</div>
<div class="group">
<div class="group-name">
<a href="">兴趣</a>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
</div>
<div class="group">
<div class="group-name">
<a href="">兴趣</a>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
</div>
<div class="group">
<div class="group-name">
<a href="">兴趣</a>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
</div>
<div class="group">
<div class="group-name">
<a href="">兴趣</a>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</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="item-list">
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/小组.webp" alt="">
</a>
</div>
<div class="words">
<a href="">记事本圆梦小组</a>
<span>116441 个成员</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--读书-->
<div class="section">
<div class="container clearfix book-area">
<div class="aside-left">
<h2 class="title">
<a href="">读书</a>
</h2>
<nav class="left-menu">
<ul>
<li><a href="">精选</a></li>
<li><a href="">Impedit.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Fugiat.</a></li>
<li><a href="">Et.</a></li>
<li><a href="">Dolorum?</a></li>
<li><a href="">Dolore.</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Repellat!</a></li>
<li><a href="">Aliquam.</a></li>
</ul>
</nav>
<div class="menu-adv">
<a href="">
<span class="caidanguangao-1"></span>
</a>
<a href="">豆瓣阅读</a>
</div>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">热门标签</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<div class="group">
<ul class="right-menu-list clearfix">
<li>[<span>文学</span>]</li>
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
</div>
<div class="group">
<ul class="right-menu-list clearfix">
<li>[<span>文学</span>]</li>
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
</div>
<div class="group">
<ul class="right-menu-list clearfix">
<li>[<span>文学</span>]</li>
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
</div>
<div class="group">
<ul class="right-menu-list clearfix">
<li>[<span>文学</span>]</li>
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</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="item-list">
<li>
<div class="img">
<a href="">
<img src="img/读书.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">十二月十日</a>
<span>[美] 乔治·啦啊啦啦啦啦</span>
</div>
<div class="func">
<a href="" class="block-link">免费试读</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/读书.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">十二月十日</a>
<span>[美] 乔治·啦啊啦啦啦啦</span>
</div>
<div class="func">
<a href="" class="block-link">免费试读</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/读书.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">十二月十日</a>
<span>[美] 乔治·啦啊啦啦啦啦</span>
</div>
<div class="func">
<a href="" class="block-link">免费试读</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/读书.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">十二月十日</a>
<span>[美] 乔治·啦啊啦啦啦啦</span>
</div>
<div class="func">
<a href="" class="block-link">免费试读</a>
</div>
</li>
</ul>
<div class="section-title">
<h3 class="title">原创数字作品</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="item-list">
<li>
<div class="img">
<a href="">
<img src="img/读书.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">十二月十日</a>
<span>[美] 乔治·啦啊啦啦啦啦</span>
</div>
<div class="func">
<a href="" class="block-link">免费试读</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/读书.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">十二月十日</a>
<span>[美] 乔治·啦啊啦啦啦啦</span>
</div>
<div class="func">
<a href="" class="block-link">免费试读</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/读书.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">十二月十日</a>
<span>[美] 乔治·啦啊啦啦啦啦</span>
</div>
<div class="func">
<a href="" class="block-link">免费试读</a>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/读书.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">十二月十日</a>
<span>[美] 乔治·啦啊啦啦啦啦</span>
</div>
<div class="func">
<a href="" class="block-link">免费试读</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--音乐-->
<div class="section">
<div class="container clearfix music-area">
<div class="aside-left">
<h2 class="title">
<a href="">音乐</a>
</h2>
<nav class="left-menu">
<ul>
<li><a href="">精选</a></li>
<li><a href="">Impedit.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Fugiat.</a></li>
<li><a href="">Et.</a></li>
<li><a href="">Dolorum?</a></li>
<li><a href="">Dolore.</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Repellat!</a></li>
<li><a href="">Aliquam.</a></li>
</ul>
</nav>
<div class="menu-adv">
<a href="">
<span class="caidanguangao-2"></span>
</a>
<a href="">豆瓣FM</a>
</div>
<div class="menu-adv">
<a href="">
<span class="caidanguangao-3"></span>
</a>
<a href="">豆瓣音乐人</a>
</div>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">本周流行音乐人</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="music-player-list">
<li class="clearfix">
<span class="number left">
1.
</span>
<div class="player right">
<a href="">
<div class="img left iconfont icon-24gl-play">
<img src="img/音乐.jpg" alt="">
</div>
</a>
<div class="words left">
<a href="">Yamato Ryou</a>
<span>流派: 电子 Electronica</span>
<span>372人关注</span>
</div>
</div>
</li>
<li class="clearfix">
<span class="number left">
1.
</span>
<div class="player right">
<a href="">
<div class="img left iconfont icon-24gl-play">
<img src="img/音乐.jpg" alt="">
</div>
</a>
<div class="words left">
<a href="">Yamato Ryou</a>
<span>流派: 电子 Electronica</span>
<span>372人关注</span>
</div>
</div>
</li>
<li class="clearfix">
<span class="number left">
1.
</span>
<div class="player right">
<a href="">
<div class="img left iconfont icon-24gl-play">
<img src="img/音乐.jpg" alt="">
</div>
</a>
<div class="words left">
<a href="">Yamato Ryou</a>
<span>流派: 电子 Electronica</span>
<span>372人关注</span>
</div>
</div>
</li>
<li class="clearfix">
<span class="number left">
1.
</span>
<div class="player right">
<a href="">
<div class="img left iconfont icon-24gl-play">
<img src="img/音乐.jpg" alt="">
</div>
</a>
<div class="words left">
<a href="">Yamato Ryou</a>
<span>流派: 电子 Electronica</span>
<span>372人关注</span>
</div>
</div>
</li>
</ul>
</div>
<div class="main">
<div class="section-title">
<h3 class="title">豆瓣新碟榜</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="item-list">
<li>
<div class="img">
<a href="">
<img src="img/榜单.jpg" alt="">
</a>
</div>
<div class="words">
1.<a href="">CHIN UP!</a>
<div class="words">
<a href="">陈奕迅 Eason Chan</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/榜单.jpg" alt="">
</a>
</div>
<div class="words">
1.<a href="">CHIN UP!</a>
<div class="words">
<a href="">陈奕迅 Eason Chan</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/榜单.jpg" alt="">
</a>
</div>
<div class="words">
1.<a href="">CHIN UP!</a>
<div class="words">
<a href="">陈奕迅 Eason Chan</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/榜单.jpg" alt="">
</a>
</div>
<div class="words">
1.<a href="">CHIN UP!</a>
<div class="words">
<a href="">陈奕迅 Eason Chan</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/榜单.jpg" alt="">
</a>
</div>
<div class="words">
1.<a href="">CHIN UP!</a>
<div class="words">
<a href="">陈奕迅 Eason Chan</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/榜单.jpg" alt="">
</a>
</div>
<div class="words">
1.<a href="">CHIN UP!</a>
<div class="words">
<a href="">陈奕迅 Eason Chan</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/榜单.jpg" alt="">
</a>
</div>
<div class="words">
1.<a href="">CHIN UP!</a>
<div class="words">
<a href="">陈奕迅 Eason Chan</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/榜单.jpg" alt="">
</a>
</div>
<div class="words">
1.<a href="">CHIN UP!</a>
<div class="words">
<a href="">陈奕迅 Eason Chan</a>
</div>
<div class="star">
<span class="star-bg star50"></span>
<span class="number">
8.9
</span>
</div>
</li>
</ul>
<div class="section-title">
<h3 class="title">热门歌单</h3>
<span class="link">
<a href="">更多</a>
</span>
</div>
<ul class="item-list hot-music">
<li>
<a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/歌单.jpg" alt="">
</div>
</a>
<div class="words">
1989
</div>
</li>
<li>
<a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/歌单.jpg" alt="">
</div>
</a>
<div class="words">
1989
</div>
</li>
<li>
<a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/歌单.jpg" alt="">
</div>
</a>
<div class="words">
1989
</div>
</li>
<li>
<a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/歌单.jpg" alt="">
</div>
</a>
<div class="words">
1989
</div>
</li>
<li>
<a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/歌单.jpg" alt="">
</div>
</a>
<div class="words">
1989
</div>
</li>
<li>
<a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/歌单.jpg" alt="">
</div>
</a>
<div class="words">
1989
</div>
</li>
<li>
<a href="">
<div class="img iconfont icon-24gl-play">
<img src="img/歌单.jpg" alt="">
</div>
</a>
<div class="words">
1989
</div>
</li>
</ul>
</div>
</div>
</div>
<!--豆品-->
<div class="section">
<div class="container clearfix doupin-area">
<div class="aside-left">
<h2 class="title">
<a href="">豆品</a>
</h2>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">热门活动</h3>
</div>
<div class="adv">
<a href="">
<img src="img/广告.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">分享你看过的电影中最触动你的台词</a>
</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="item-list">
<li>
<div class="img">
<a href="">
<img src="img/商品.jpg" alt="">
</a>
</div>
<div class="words clearfix">
<a href="" class="left">豆瓣金属中性笔</a>
<span class="right">￥39</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/商品.jpg" alt="">
</a>
</div>
<div class="words clearfix">
<a href="" class="left">豆瓣金属中性笔</a>
<span class="right">￥39</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/商品.jpg" alt="">
</a>
</div>
<div class="words clearfix">
<a href="" class="left">豆瓣金属中性笔</a>
<span class="right">￥39</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/商品.jpg" alt="">
</a>
</div>
<div class="words clearfix">
<a href="" class="left">豆瓣金属中性笔</a>
<span class="right">￥39</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--同城-->
<div class="section">
<div class="container clearfix tongcheng-area">
<div class="aside-left">
<h2 class="title">
<a href="" >同城</a>
</h2>
<nav class="left-menu">
<ul>
<li><a href="">精选</a></li>
<li><a href="">Impedit.</a></li>
<li><a href="">Sint.</a></li>
<li><a href="">Fugiat.</a></li>
</ul>
</nav>
</div>
<div class="aside-right">
<div class="section-title">
<h3 class="title">活动标签</h3>
</div>
<div class="group">
<div class="group-name">
<a href="">音乐</a>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
<div class="group-name">
<a href="">音乐</a>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
<div class="group-name">
<a href="">音乐</a>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</a></li>
</ul>
<div class="group-name">
<a href="">音乐</a>
</div>
<ul class="right-menu-list clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Earum?</a></li>
<li><a href="">Dolorum!</a></li>
<li><a href="">Perferendis!</a></li>
<li><a href="">Ducimus?</a></li>
<li><a href="">Quia.</a></li>
<li><a href="">Error.</a></li>
<li><a href="">Cumque.</a></li>
<li><a href="">Modi?</a></li>
<li><a href="">Numquam.</a></li>
<li><a href="">In.</a></li>
<li><a href="">Cum.</a></li>
<li><a href="">Aspernatur!</a></li>
<li><a href="">Architecto?</a></li>
<li><a href="">Libero?</a></li>
<li><a href="">Exercitationem.</a></li>
<li><a href="">Odit?</a></li>
<li><a href="">Nihil.</a></li>
<li><a href="">Sunt!</a></li>
<li><a href="">Distinctio.</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="item-list">
<li>
<div class="img left">
<a href="">
<img src="img/活动.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">伍佰&China Blue ROCK STAR 2023巡回演唱会-西安站</a>
<span>12月2日 周六 19:30 - 21:00</span>
<span>西安奥体中心体育馆 杏渭路啦啦啦啦啦啦啦</span>
<span>40人关注</span>
</div>
</li>
<li>
<div class="img left">
<a href="">
<img src="img/活动.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">伍佰&China Blue ROCK STAR 2023巡回演唱会-西安站</a>
<span>12月2日 周六 19:30 - 21:00</span>
<span>西安奥体中心体育馆 杏渭路啦啦啦啦啦啦啦</span>
<span>40人关注</span>
</div>
</li>
<li>
<div class="img left">
<a href="">
<img src="img/活动.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">伍佰&China Blue ROCK STAR 2023巡回演唱会-西安站</a>
<span>12月2日 周六 19:30 - 21:00</span>
<span>西安奥体中心体育馆 杏渭路啦啦啦啦啦啦啦</span>
<span>40人关注</span>
</div>
</li>
<li>
<div class="img left">
<a href="">
<img src="img/活动.jpg" alt="">
</a>
</div>
<div class="words">
<a href="">伍佰&China Blue ROCK STAR 2023巡回演唱会-西安站</a>
<span>12月2日 周六 19:30 - 21:00</span>
<span>西安奥体中心体育馆 杏渭路啦啦啦啦啦啦啦</span>
<span>40人关注</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--页脚-->
<footer class="footer">
<div class="container clearfix">
<div class="left">
<p>© 2005-2023 douban.com, all rights reserved 北京豆网科技有限公司</p>
<a href="">营业执照 ｜ 京ICP证090015号 ｜ 京ICP备11027288号 ｜ 网络视听许可证0110418号 ｜ 食品经营许可证
京网文[2021]2980-826号 ｜ 新出发京批字第直160029号 ｜ （署）网出证（京）字第120号</a>
<p>违法和不良信息/涉未成年人/生活服务类专项有害信息投诉：
<p>违法和不良信息投诉电话：4008353331-9 </p>
<p>网络从业者不良行为举报：</p>
<p><img src="img/jubao.png" alt=""><a href="">中国互联网举报中心 </a>电话：12377<img src="img/biaoshi.gif" class="biaoshi" alt=""><a href="">京公网安备11010502000728</a></p>
</div>
<div class="right">
<nav class="menu">
<a href="">Lorem.</a>·
<a href="">Ratione.</a>·
<a href="">Natus!</a>·
<a href="">Ipsa?</a>·
<a href="">Ipsam.</a>·
<a href="">Saepe.</a>·
<a href="">Magnam.</a>·
<a href="">Fugiat?</a>
</nav>
</div>
</div>
</footer>
</body>
</html>
表单区域的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/common.css">
<link rel="stylesheet" href="css/loginframe.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
</head>
<body>
<div class="container">
<!--短信登录/注册，密码登录-->
<div class="login ">
<!--切换菜单-->
<div class="switch clearfix">
<span class="left selected">短信登录／注册</span>
<span class="left">密码登录</span>
</div>
<!--表单区-->
<!--短信登录/注册-->
<div class="biaodan hidden">
<div class="zi1">
<p>
请仔细阅读
<a href="">豆瓣使用协议、豆瓣个人信息保护政策</a>
</p>
</div>
<div class="biao">
<input type="text" class="more-indent" placeholder="手机号">
<div class="code">
<div class="selected">
+86
</div>
<!--被选中后的选项-->
<div class="xuanxiang hidden">
<div class="center">
<div class="title">
选择国际区号
</div>
<div class="items">
<ul>
<li class="clearfix"><span class="left">国家名1</span><span class="right">+1</span></li>
<li class="clearfix"><span class="left">国家名2</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 selected">
<i class="iconfont icon-duigou"></i>
<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>
</ul>
</div>
</div>
</div>
</div>
<div class="yan">
<input type="text" placeholder="验证码">
<a href="" class="yanzhengma">获取验证码</a>
</div>
</div>
<div class="button">
<button class="btn">
登录豆瓣
</button>
</div>
<div class="wei">
<label class="left">
<input type="checkbox">
下次自动登录
</label>
<span class="right">
<a href="">收不到验证码</a>
</span>
</div>
</div>
<!--密码登录-->
<div class="mima">
<div class="zi1 clearfix">
<a href="" class="right a">找回密码</a>
</div>
<div class="item">
<input type="text" placeholder="手机号/邮箱">
</div>
<div class="item">
<input type="password" placeholder="密码">
</div>
<div class="button">
<button disabled class="btn">
登录豆瓣
</button>
</div>
<div class="wei clearfix">
<label class="left">
<input type="checkbox">
下次自动登录
</label>
<span class="right">
<a href="">海外手机登录</a>
</span>
</div>
</div>
<!--页尾-->
<div class="bottom">
<span>第三方登录</span>
<i class="iconfont icon-weixin"></i>
<i class="iconfont icon-weibo"></i>
</div>
</div>
<!--扫码登录-->
<div class="erweima hidden">
<div class="title">二维码登录</div>
<div class="ma">
<img src="img/二维码.png" alt="">
</div>
<div class="tip">
请打开豆瓣客户端扫一扫
</div>
</div>
<!--切换二维码-->
<div class="change">
<i class="icon duanxin"></i>
<!--<i class="icon mima"></i>-->
</div>
<!--点击切换图标时，才显示文字-->
<div class="dianjierweima hidden">
扫码登录
</div>
</div>
</body>
</html>另外一个网页的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
iframe{
width: 320px;
height: 330px;
}
</style>
</head>
<body>
<iframe src="../项目实战/loginframe.html" frameborder="0"></iframe>
</body>
</html>好啦！这一周的分享就结束啦！练习非常重要，大家一定要动手练一遍哦！！那么下一周同一时间同一地点我们不见不散！！！
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
