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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图
