收藏
批改状态：合格
老师批语：看得出你是一定的前端基础的, 应该是个从业人员吧
Flex布局学习实践
对豆瓣移动端进行简单的仿制
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/index.css"> <title>豆瓣手机端首页--flex布局</title> </head> <body> <div class="wrap"> <div class="top"> <a href="javascript:;" class="title"> <h2 class="name">豆瓣APP</h2> <P>记录你的书影音生活</P> </a> <a href="javascript:;" class="open">打开App</a> </div> <div class="main"> <div class="search-wrap"> <input type="text" class="search-input" placeholder="搜索书/影/音/小组" /> <a href="javascript:;" class="search-btn"></a> </div> <ul class="nav"> <li class="nav-item"> <a href="javascript:;"> <p class="name">找电影</p> <p>影院热映</p> </a> </li> <li class="nav-item"> <a href="javascript:;"> <p class="name">热播剧</p> <p>剧集综艺</p> </a> </li> <li class="nav-item"> <a href="javascript:;"> <p class="name">畅销书</p> <p>畅销排行</p> </a> </li> </ul> <ul class="nav"> <li class="nav-item"> <a href="javascript:;"> <p class="name">找小组</p> <p>志趣相投</p> </a> </li> <li class="nav-item"> <a href="javascript:;"> <p class="name">找音乐</p> <p>新碟榜</p> </a> </li> <li class="nav-item"> <a href="javascript:;"> <p class="name">豆品</p> <p>生活美学</p> </a> </li> </ul> <div class="rank-wrap"> <div class="rank-top"> <h2>豆瓣榜单</h2> </div> <ul class="rank-list"> <li class="rank-type "> <div class="left-part"> </div> <div class="right-part"> <ul class="name-list"> <li> <a href="javascript:;">1.肖申克的救赎<i>9.7</i></a> </li> <li> <a href="javascript:;">2.霸王别姬<i>9.6</i></a> </li> <li> <a href="javascript:;">3.阿甘正传<i>9.5</i></a> </li> </ul> <a href="javascript:;" class="open-app">用App打开</a> </div> </li> <li class="rank-type "> <div class="left-part"> <p>豆瓣周榜</p> <h3>热门电影</h3> </div> <div class="right-part"> <ul class="name-list"> <li> <a href="javascript:;">1.诛仙Ι<i>5.3</i></a> </li> <li> <a href="javascript:;">2.罗小黑战记<i>8.2</i></a> </li> <li> <a href="javascript:;">3.名侦探柯南：绀青之拳<i>6.3</i></a> </li> </ul> <a href="javascript:;" class="open-app">用App打开</a> </div> </li> <li class="rank-type "> <div class="left-part"> <p>豆瓣周榜</p> <h3>华语口碑剧集</h3> </div> <div class="right-part"> <ul class="name-list"> <li> <a href="javascript:;">1.俗女养成记<i>9.1</i></a> </li> <li> <a href="javascript:;">2.金宵大厦<i>8.4</i></a> </li> <li> <a href="javascript:;">3.他乡的童年<i>9.7</i></a> </li> </ul> <a href="javascript:;" class="open-app">用App打开</a> </div> </li> </ul> </div> <div class="talk"> <p>豆瓣组讨论</p> <ul class="talk-list"> <li> <div> <p class="info">去年在浅草寺拍到金色锦鲤之后转运了去年在浅草寺拍到金色锦鲤之后转运了</p> <P class="detail"><span>122回复</span><span>3天前</span></P> </div> <img src="./images/talk-bg1.jpg" alt=""> </li> <li> <div> <p class="info">今天看到豆瓣首页有个人拍到的天空之眼</p> <P class="detail"><span>122回复</span><span>3天前</span></P> </div> <img src="./images/talk-bg2.jpg" alt=""> </li> <li> <div> <p class="info">我如果元旦前恋爱了，请组里姐妹20杯奶茶，再送一个666red bag</p> <P class="detail"><span>122回复</span><span>3天前</span></P> </div> <img src="./images/talk-bg3.jpg" alt=""> </li> <li> <div> <p class="info">十几年的老昙花精又开花啦，为2020考研祈福</p> <P class="detail"><span>122回复</span><span>3天前</span></P> </div> <img src="./images/talk-bg4.jpg" alt=""> </li> <li> <div> <p class="info">论坛逛一圈，深切感觉所有明星都不配呆在演艺圈</p> <P class="detail"><span>122回复</span><span>3天前</span></P> </div> <img src="./images/talk-bg5.jpg" alt=""> </li> </ul> </div> <a href="javascript:;" class="foot-btn">打开App,查看更多热门讨论</a> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
index.css
/* 豆瓣手机端首页 弹性布局练习
* zmx
*/
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html,
body {
width: 100%;
height: 100%;
}
.top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
padding: 0 18px;
display: -webkit-flex;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.title {
padding-left: 48px;
background: url("../images/logo.png") left center no-repeat;
background-size: 40px 40px;
}
.title>h2 {
font-size: 15px;
line-height: 21px;
color: #191919;
}
.title>p {
font-size: 11px;
line-height: 16px;
color: #818181;
margin: 0;
}
.open {
width: 80px;
height: 30px;
border-radius: 15px;
text-align: center;
font-size: 13px;
line-height: 30px;
background-color: #42bd56;
color: #fff;
}
.main {
margin: 60px auto 20px;
max-width: 650px;
padding: 0 18px;
overflow: hidden;
}
.search-wrap {
margin: 15px 0;
position: relative;
}
.search-input {
height: 35px;
width: 100%;
border: 0;
border-radius: 18px;
font-size: 15px;
text-align: center;
text-indent: 10px;
outline: none;
background-color: #f3f3f3;
}
.search-btn {
position: absolute;
left: 15px;
top: 7.5px;
width: 20px;
height: 20px;
background: url("../images/search.png") center no-repeat;
background-size: cover;
}
.nav {
display: flex;
height: 80px;
}
.nav-item {
flex: 1;
border-right: 1px solid rgba(236, 236, 236, 0.5);
border-top: 1px solid rgba(236, 236, 236, 0.5);
}
.nav-item:nth-child(1) {
border-left: 1px solid rgba(236, 236, 236, 0.5);
}
.nav+.nav>.nav-item {
border-bottom: 1px solid rgba(236, 236, 236, 0.5);
}
.nav-item>a {
display: block;
padding: 18px 0 16px;
font-size: 13px;
height: 17px;
letter-spacing: 1px;
text-align: center;
color: #818181;
}
.nav-item>a>.name {
font-weight: 500;
font-size: 19px;
line-height: 26px;
margin-bottom: 2px;
}
.nav-item:nth-child(1) .name {
color: #2384E8;
}
.nav-item:nth-child(2) .name {
color: #7A6ADB;
}
.nav-item:nth-child(3) .name {
color: #9F7860;
}
.nav-item:nth-child(4) .name {
color: #2AB8CC;
}
.nav-item:nth-child(5) .name {
color: #F48F2E;
}
.nav-item:nth-child(6) .name {
color: #42BD56;
}
.rank-top {
margin: 20px 0;
height: 24px;
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(0, 0, 0, .9);
}
.rank-top h2 {
font-size: 21px;
line-height: 24px;
font-weight: normal;
}
.rank-top .more {
display: block;
font-size: 13px;
color: rgba(0, 0, 0, .9);
}
.rank-type {
height: 100px;
border-radius: 4px;
display: flex;
overflow: hidden;
margin-bottom: 12px;
}
.rank-type .left-part {
width: 100px;
height: 100px;
/* 不缩放 */
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgb(50, 50, 59);
}
.rank-type .left-part>p {
font-size: 13px;
text-align: center;
color: hsla(0, 0%, 100%, .6);
margin-bottom: 4px;
position: relative;
width: 100%;
}
.rank-type .left-part>h3 {
font-size: 17px;
font-weight: normal;
color: hsla(0, 0%, 100%, .9);
padding: 0 10px;
text-align: center;
margin-bottom: 2px;
line-height: 20px;
}
.rank-type .right-part {
position: relative;
flex-grow: 1;
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
opacity: 0.8;
background-color: rgb(50, 50, 59);
}
.rank-type .right-part:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.rank-type .open-app {
font-size: 11px;
color: hsla(0, 0%, 100%, .5);
width: 68px;
height: 22px;
line-height: 22px;
border-radius: 11px;
border: 1px solid hsla(0, 0%, 100%, .5);
text-align: center;
}
.name-list {
width: 60%;
}
.name-list a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
line-height: 22px;
color: #fff;
}
.name-list i {
font-style: normal;
margin-left: 5px;
color: #ffac2d;
font-size: 11px;
}
.rank-type:nth-child(1) .left-part {
background-image: url("../images/movie-top.jpg");
}
.rank-type:nth-child(1) .right-part {
background-color: rgb(50, 50, 59);
}
.rank-type:nth-child(1) .right-part:before {
background-image: url("../images/top-bg1.jpg");
}
.rank-type:nth-child(2) .left-part {
background-color: rgb(104, 127, 112);
}
.rank-type:nth-child(2) .right-part {
background-color: rgb(104, 127, 112);
}
.rank-type:nth-child(2) .right-part:before {
background: url("../images/top-bg2.jpg") 50% no-repeat;
}
.rank-type:nth-child(3) .left-part {
background-color: rgb(76, 67, 59);
}
.rank-type:nth-child(3) .right-part {
background-color: rgb(76, 67, 59);
}
.rank-type:nth-child(3) .right-part:before {
background: url("../images/top-bg3.jpg") 50% no-repeat;
}
.talk>p {
margin: 20px 0 10px;
color: rgba(0,0,0,.9);
font-size: 19px;
line-height: 26px;
}
.talk-list {
padding: 0 0 0 10px;
}
.talk-list>li {
margin: 5px 0;
height: 80px;
font-size: 11px;
color: rgba(0,0,0,.25);
display: flex;
flex-flow: nowrap;
justify-content: space-between;
overflow: hidden;
}
.talk-list>li>div {
flex-shrink: 1;
overflow: hidden;
}
.talk-list>li .info {
font-size: 17px;
line-height: 22px;
color: rgba(0,0,0,.9);
margin: 0 0 8px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.talk-list>li .detail {
padding-left: 30px;
background: url("../images/msg.png") left center no-repeat;
background-size: 20px 20px;
}
.talk-list>li>img {
margin-left: 40px;
width: 80px;;
height: 53px;
border-radius: 4px;
}
.foot-btn {
height: 40px;
line-height: 40px;
font-size: 15px;
width: 100%;
margin: 0 auto;
text-align: center;
background-color: #42BD56;
color: #fff;
display: block;
border-radius: 40px;
}点击 "运行实例" 按钮查看在线实例
效果图
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
