布局】易康问答页面"/>
【移动WEB布局】易康问答页面
把移动WEB布局作业一做了下，做的好粗糙
效果图
HTML
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/homework.css"><title>Document</title>
</head><body><header class="app"><ul><li class="current">问题榜</li><li>新晋榜</li><li>才华榜</li></ul><div class="search"></div></header><div class="focus"><a href="#"><img src="images/ketang.png" alt=""></a></div><div class="mainContent"><ul><li><h3>如何学习语文的文言文内容，快速提高语文成绩？</h3><p class="author_info"><em class="author">王知易</em> 英语文学语言老师</p><div class="content"><div class="user_pic"></div><div class="news"><i></i><span>限时免费听</span></div><div class="list_current"><span>22人听过</span></div></div></li><li><h3>如何学习语文的文言文内容，快速提高语文成绩？</h3><p class="author_info"><em class="author">王知易</em> 英语文学语言老师</p><div class="content"><div class="user_pic"></div><div class="news"><i></i><span>限时免费听</span></div><div class="list_current"><span>22人听过</span></div></div></li><li><h3>如何学习语文的文言文内容，快速提高语文成绩？</h3><p class="author_info"><em class="author">王知易</em> 英语文学语言老师</p><div class="content"><div class="user_pic"></div><div class="news"><i></i><span>限时免费听</span></div><div class="list_current"><span>22人听过</span></div></div></li><li><h3>如何学习语文的文言文内容，快速提高语文成绩？</h3><p class="author_info"><em class="author">王知易</em> 英语文学语言老师</p><div class="content"><div class="user_pic"></div><div class="news"><i></i><span>限时免费听</span></div><div class="list_current"><span>22人听过</span></div></div></li></ul></div><footer><ul><li class="current"><img src="images/dial.png" alt=""><span>榜单</span></li><li><img src="images/shoutin.png" alt=""><span>收听</span></li><li><img src="images/faxian.png" alt=""><span>发现</span></li><li><img src="images/wode.png" alt=""><span>我的</span></li></ul></footer>
</body></html>CSS样式
body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-size: 14px;font-family: -apple-system, Helvetica, sans-serif;color: #333;background-color: #ebebeb;height: 1000px;
}ul {margin: 0;padding: 0;list-style: none;
}img {vertical-align: middle;
}a {text-decoration: none;color: #666;
}/*禁用长按页面时的弹出菜单*/img,
a {-webkit-touch-callout: none;
}/* 清除浮动 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}.app {position: sticky;top: 0;z-index: 1;width: 100%;height: 44px;background-color: #fff;
}.app ul li {position: relative;float: left;width: 33.33%;height: 44px;line-height: 44px;text-align: center;
}.current {color: #44b181;
}.app ul li:first-child::after {position: absolute;bottom: 0;left: 15px;content: '';width: 80%;height: 1px;background-color: #44b181;
}.app ul li:nth-child(n+2)::before {position: absolute;left: 0;top: 12px;content: '';width: 1px;height: 20px;background-color: #ccc;
}.search {position: absolute;right: 10px;bottom: 15px;width: 15px;height: 15px;background: url(../images/search.png) no-repeat;background-size: 15px 15px;
}.focus img {width: 100%;
}footer {position: fixed;bottom: 0;width: 100%;min-width: 320px;max-width: 640px;background-color: #f5f7f9;
}footer ul li {float: left;width: 25%;text-align: center;
}footer ul li img {width: 20px;margin-top: 8px;
}footer ul li span {display: block;margin: 7px 0;
}.mainContent ul li {margin-top: 10px;padding: 10px;background-color: #fff;
}.author_info {padding: 10px 0;color: #999;
}.author::after {display: inline-block;content: '';width: 1px;height: 12px;background-color: #333;margin: 0 8px;
}.content {position: relative;
}.user_pic {width: 20%;height: 40px;background: url(../images/user.png) no-repeat;background-size: 40px 40px;
}.news {position: absolute;left: 20%;bottom: 0;width: 30%;height: 20px;background: url(../images/news.png) no-repeat;background-size: contain;
}.news i {position: absolute;left: 5px;top: 3px;width: 10px;height: 14px;background: url(../images/sound.png) no-repeat;background-size: 10px 14px;
}.news span {padding-left: 18px;color: #fff;
}.list_current {position: absolute;right: 0;bottom: 0;/* width: 25%; */
}.list_current span {position: relative;color: #999;font-size: 11px;
}.list_current span::before {position: absolute;left: -15px;bottom: 2px;content: '';width: 12px;height: 11px;background: url(../images/listen.png) no-repeat;background-size: 12px 11px;
}
更多推荐
【移动WEB布局】易康问答页面
发布评论