仿PHP中文网手机端页面--2019年9月15号13点整 - 作业

Home > List of blog posts > 仿PHP中文网手机端页面--2019年9月15号13点整

Blogger Information

Blog 13

fans 0

comment 0

visits 10130

Special Recommendation

More>

Related recommendations

实例

<style type="text/css">
        body {
            min-width: 320px;
            max-width: 768px;
            margin: 0 auto;
            background: #edeff0;
            overflow-y: initial;
            position: relative;
            height: 2300px;
        }
    </style>
</head>
<body>
    <!-- 布局原则：宽度自适应，高度固定 -->
    <div class="top">
        <img src="static/images/tx.jpg" alt="">
        <div class="logo">
            <img src="static/images/logo.png" alt="">
        </div>
        <img src="static/images/user-nav.jpg" alt="">
    </div>
    <div class="banner">
        <img src="static/images/banner.jpg" alt="">
    </div>
    <!--导航区-->
    <div class="nav">
        <ul>
            <li>
                <a href=""><img src="static/images/html.png" alt=""><br>HTML/CSS</a>
            </li>
            <li>
                <a href=""><img src="static/images/JavaScript.png" alt=""><br>JavaScript</a>
            </li>
            <li>
                <a href=""><img src="static/images/code.png" alt=""><br>服务端</a>
            </li>
            <li>
                <a href=""><img src="static/images/sql.png" alt=""><br>数据库</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href=""><img src="static/images/app.png" alt=""><br>移动端</a>
            </li>
            <li>
                <a href=""><img src="static/images/manual.png" alt=""><br>手册</a>
            </li>
            <li>
                <a href=""><img src="static/images/tool2.png" alt=""><br>工具</a>
            </li>
            <li>
                <a href=""><img src="static/images/live.png" alt=""><br>直播</a>
            </li>
        </ul>
    </div>
    <!-- 课程区 -->
    <h3>推荐课程</h3>
    <div class="course">
        <ul>
            <li>
                <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
            </li>
        </ul>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">CI框架30分钟极速入门</a>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </div>
    </div>
    <!-- 最新更新 -->
    <h3>最新更新</h3>
    <div class="update">
        <div>
            <a href=""><img src="static/images/zjgx1.jpg" alt=""></a>
            <p>
                <a href="">Laravel 5.8 中文文档手册</a>
                <br>
                <span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html</span>
                <br>
                <span>中级</span>
                <span>7447次播放 </span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/zjgx2.jpg" alt=""></a>
            <p>
                <a href="">CSS3 极速入门</a>
                <br>
                <span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们... </span>
                <br>
                <span>中级</span>
                <span>4500次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/zjgx3.jpg" alt=""></a>
            <p>
                <a href="">
                    HTML5 极速入门</a>
                <br>
                <span>在本套课程中，你将学习如何使用 HTML 来创建站点</span>
                <br>
                <span>中级</span>
                <span>5500次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/zjgx1.jpg" alt=""></a>
            <p>
                <a href="">Laravel 5.8 中文文档手册</a>
                <br>
                <span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html</span>
                <br>
                <span>中级</span>
                <span>7447次播放 </span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/zjgx2.jpg" alt=""></a>
            <p>
                <a href="">CSS3 极速入门</a>
                <br>
                <span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们... </span>
                <br>
                <span>中级</span>
                <span>4500次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/zjgx3.jpg" alt=""></a>
            <p>
                <a href="">
                    HTML5 极速入门</a>
                <br>
                <span>在本套课程中，你将学习如何使用 HTML 来创建站点</span>
                <br>
                <span>中级</span>
                <span>5500次播放</span>
            </p>
        </div>
    </div>

    <!-- 最新文章 -->
    <h3>最新文章</h3>
    <div class="article">
        <div>
            <p>
                <a href="">PHP之十六个魔术方法详解（总结）</a>
                <br>
                <span>发布时间：2019-07-29</span>
            </p>
            <a href=""><img src="static/images/article1.jpg" alt=""></a>
        </div>
        <div>
            <p>
                <a href="">PHP生成折线图和饼图</a>
                <br>
                <span>发布时间：2019-07-29</span>
            </p>
            <a href=""><img src="static/images/article2.png" alt=""></a>
        </div>
        <div>
            <p>
                <a href="">PHP之十六个魔术方法详解（总结）</a>
                <br>
                <span>发布时间：2019-07-29</span>
            </p>

            <a href=""><img src="static/images/article3.jpg" alt=""></a>
        </div>
        <div>
            <p>
                <a href="">PHP之十六个魔术方法详解（总结）</a>
                <br>
                <span>发布时间：2019-07-29</span>
            </p>
            <a href=""><img src="static/images/article4.jpg" alt=""></a>
        </div>
        <div>
            <p>
                <a href="">PHP之十六个魔术方法详解（总结）</a>
                <br>
                <span>发布时间：2019-07-29</span>
            </p>
            <a href=""><img src="static/images/article5.png" alt=""></a>
        </div>
        <a href="" class="more">更多内容</a>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <ul>
            <li>
                <a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>主页</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/video.png" alt=""><br><span>视频</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/luntan.png" alt=""><br><span>社区</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/geren.png" alt=""><br><span>我的</span></a>
            </li>
        </ul>
    </div>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

css代码

实例

.top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 42px;
    background-color: #444444;
    min-width: 320px;
    max-width: 768px;
    left: 50%;
    transform: translateX(-50%);
}

.top {
    display: flex;
}

.top img:first-of-type,
.top img:last-of-type {
    width: 25px;
    height: 25px;
    margin-top: 8px;
}

.top img:first-of-type {
    border-radius: 50%;
    margin-left: 5px;
}

.top .logo {
    text-align: center;
    flex: 1;
}

.top .logo img {
    width: 94px;
    height: 45px;
    margin-top: -2px;
}

.banner {
    display: flex;
}

.banner img {
    width: 100%;
    height: 160px;
}


/* 导航区 */

.nav {
    height: 170px;
    background-color: white;
    /* 防止padding撑开盒子，直接将盒子宽高定义在边框上 */
    box-sizing: border-box;
}

.nav ul {
    margin: 0;
    padding: 6px;
}

.nav ul li {
    height: 75px;
    list-style: none;
    text-align: center;
}

.nav ul li img {
    width: 45px;
    height: 45px;
}

.nav ul li a {
    color: gray;
    text-decoration: none;
    text-align: center;
}

.nav ul {
    display: flex;
}

.nav ul li {
    flex: 1;
}


/* 课程区 */

.course {
    height: 340px;
    color: gray;
    padding: 10px 0;
}

.course ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.course ul li {
    padding: 5px;
}

.course ul img {
    width: 100%;
    height: 90px;
}

.course div {
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    display: flex;
    justify-content: flex-start;
}

.course div img {
    height: 90px;
    width: 100%;
}

.course div a {
    text-decoration: none;
    flex: 0.45;
    color: gray;
}

.course div p {
    flex: 0.55;
    margin-left: 15px;
}

.course div p span:first-of-type {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    border-radius: 30%;
    padding: 0 4px;
}

.course div p span:last-of-type {
    font-size: 0.7rem;
}


/* 最新更新区 */

.update {
    height: 730px;
    color: gray;
    /* padding: 50px 10px 20px; */
}

.update div {
    background-color: white;
    /* padding: 10px; */
    margin-top: 10px;
    /* height: 90px; */
    display: flex;
    /* justify-content: flex-start; */
}

.update a img {
    height: 90px;
    width: 100%;
    padding: 10px;
}

.update a {
    text-decoration: none;
    flex: 0.40;
    color: gray;
}

.update p {
    flex: 0.60;
    margin-left: 15px;
    padding: 0;
}

.update p span:first-of-type {
    font-size: 0.6rem;
    color: gray;
}

.update p span:nth-of-type(2) {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    border-radius: 30%;
    padding: 0 4px;
}

.update p span:last-of-type {
    font-size: 0.7rem;
    margin-left: 250px;
}


/* 最新文章 */

.article {
    height: 500px;
    color: gray;
    /* padding: 10px 10px 5px; */
}


/* .article h3 {} */

.article div {
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    display: flex;
    /* justify-content: flex-start; */
}

.article div {
    display: flex;
    height: 90px;
    padding: 10px;
    margin-top: 10px;
    background-color: white;
}

.article p {
    width: 100%;
    height: 30px;
    color: gray;
    text-align: center;
    line-height: 30px;
    background-color: white;
}

.article div p {
    color: gray;
    height: 90px;
    text-align: left;
    padding-left: 10px;
    flex: 0.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
}

.article p span {
    font-size: 0.8rem;
}

.article div a {
    text-decoration: none;
    color: gray;
    flex: 0.4;
    font-weight: bolder;
    font-size: 1.2rem;
}

.article div a img {
    height: 90px;
    width: 100%;
}

.article .more {
    text-decoration: none;
    display: block;
    margin: 10px auto;
    /* line-height: 30px; */
    line-height: 10px;
    text-align: center;
    background: #fff;
    padding: 10px 0;
    color: royalblue;
}


/* 底部 */

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 42px;
    background-color: #EEEEEE;
    min-width: 320px;
    max-width: 768px;
    left: 50%;
    transform: translateX(-50%);
}

.footer ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.footer ul li img {
    width: 20px;
    height: 20px;
}

.footer ul li a {
    color: gray;
    text-decoration: none;
}

.footer ul li {
    flex: 1;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果如下；

1568693119(1).jpg

1568693153(1).jpg

总结：flex布局要掌握定义在容器上的direction,wrap,justify-content,align-items,align-content的属性；和定义在项目上的flex-grow,flex-shrink,flex-basis,align-self属性。平常要多练，多敲代码。程序员不敲代码干什么。

Correction status：qualified

Teacher's comments：说得对, 程序员不敲代码干什么?

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

浮动布局原理

2019-09-08 09:43:11