【移动WEB布局】易康问答页面

最新推荐文章于 2024-10-16 11:23:07 发布

qq_27635591

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量236

点赞数

分类专栏：前端学习之移动WEB布局文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_27635591/article/details/122070226

版权

前端学习之移动WEB布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

把移动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;
}