Flex布局实战(php中文网手机站首页)-2019年9月10日作业 - 前端开发

Home > List of blog posts > Flex布局实战(php中文网手机站首页)-2019年9月10日作业

Blogger Information

Blog 27

fans 0

comment 0

visits 26648

Special Recommendation

More>

Related recommendations

1、php中文网手机站首页

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/css/style.css">
    <title>php中文网手机端-首页</title>

</head>
<body>
    <!-- 布局原则：宽度自适应，高度不变 -->
    <!-- 固定定位顶部 -->
   <div class="top">
    <img src="./static/images/user-pic.jpeg" 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="news">
    <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="">
            <p>
                <a href="">CI框架30分钟极速入门</a>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </a>
    </div>

    <div>
        <a href="">
            <img src="./static/images/tjkc3.jpg" alt="">
            <p>
                <a href="">2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </a>
    </div>

</div>

<!-- 最近更新 -->

<h3>最近更新</h3>

<div class="news">
    <div>
        <a href="">
            <img src="./static/images/news1.jpg" alt="">
            <p>
                <a href="">Laravel 5.8 中文文档手册</a>
                <br>
                <span>中级</span><span>7286次播放</span>
            </p>
        </a>
    </div>

    <div>
        <a href="">
            <img src="./static/images/news2.jpg" alt="">
            <p>
                <a href="">JavaScript极速入门</a>
                <br>
                <span>初级</span><span>7093次播放</span>
            </p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./static/images/news3.jpg" alt="">
            <p>
                <a href="">第七期_直播体验课</a>
                <br>
                <span>初级</span><span>6671次播放</span>
            </p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./static/images/news4.jpg" alt="">
            <p>
                <a href="">CSS3 极速入门</a>
                <br>
                <span>初级</span><span>6630次播放</span>
            </p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./static/images/news5.jpg" alt="">
            <p>
                <a href="">HTML5 极速入门</a>
                <br>
                <span>初级</span><span>5589次播放                    </span>
            </p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./static/images/news6.jpg" alt="">
            <p>
                <a href="">nodejs开发基础教程</a>
                <br>
                <span>初级</span><span>4856次播放</span>
            </p>
        </a>
    </div>

</div>





<!-- 底部 -->
<div class="footer">
    <ul>
        <li><a href=""><img src="./static/images/zhuye.png" alt=""></a></li>
        <li><a href=""><img src="./static/images/video.png" alt=""></a></li>
        <li><a href=""><img src="./static/images/luntan.png" alt=""></a></li>
        <li><a href=""><img src="./static/images/geren.png" alt=""></a></li>
    </ul>
</div>

</body>
</html>

运行实例 »

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

实例

.top{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 42px;
    background-color: #444444;
    min-width: 320px;
    max-width: 768px;
    left:50%;
    
    -webkit-transform: translateX(-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;
}
.banner{
    display: flex;
}
.banner img{
    width:100%;
    height: 160px;
}

/* 导航区 */
.nav{
    height: 170px;
    background-color: white;
    box-sizing: border-box;

}
.nav ul{
    margin:0;
    padding: 6px;
}
.nav ul li{
        list-style-type: none;
        text-align: center;
        height: 75px;
}
.nav ul li img{
    width: 45px;
    height: 45px;
}
.nav ul li a{
    text-align: center;
    color: gray;
    text-decoration: none;
}
.nav ul{
    display: flex;
}
.nav ul li{
    flex:1;
}

/* 推荐课程 */
h3{
    color:#444444;
}
.courses{
    height: 326px;
    color:gray;
    margin-bottom:20px;
}
.courses ul{
    margin:0;
    padding:0;
    list-style: none;
    display: flex;
}
.courses ul li{
    padding: 5px;
}
.courses ul img{
    width: 100%;
    height: 90px;
}

.courses div{
    background-color: white;
    padding:10px;
    margin-top:10px;
    height: 90px;

    display: flex;
    justify-content: flex-start;
}
.courses div img{
    width:100%;
    height: 90px;
    /* border:1px solid black; */
}

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

.courses div p{
    /* border:1px solid green; */
    flex: 0.55;
    margin-left: 15px;
}

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

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


/* 最近更新 */
h3{
    color:#444444;
}
.news{
    height: 326px;
    color:gray;
    margin-bottom: 20px;
}
.news ul{
    margin:0;
    padding:0;
    list-style: none;
    display: flex;
}
.news ul li{
    padding: 5px;
}
.news ul img{
    width: 100%;
    height: 90px;
}

.news div{
    background-color: white;
    padding:10px;
    margin-top:10px;
    height: 90px;

    display: flex;
    justify-content: flex-start;
}
.news div img{
    width:100%;
    height: 90px;
    /* border:1px solid black; */
}

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

.news div p{
    /* border:1px solid green; */
    flex: 0.55;
    margin-left: 15px;
}

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

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


/* 最新文章 */
h3{
    color:#444444;
}
.article{
    height: 326px;
    color:gray;
}
.article ul{
    margin:0;
    padding:0;
    list-style: none;
    display: flex;
}
.article ul li{
    padding: 5px;
}
.nearticlews ul img{
    width: 100%;
    height: 90px;
}

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

    display: flex;
    justify-content: flex-start;
}
.article div img{
    width:100%;
    height: 90px;
    /* border:1px solid black; */
}

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

.article div p{
    /* border:1px solid green; */
    flex: 0.55;
    margin-left: 15px;
}

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

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




/* 底部样式 */
body {
    height: 2000px;
}
.footer{
    position: fixed;
    bottom: 0;

    width: 100%;
    height: 42px;

    min-width: 320px;
    max-width: 768px;

    left:50%;
    -webkit-transform: translateX(-50%);
    transform:translateX(-50%);
}

.footer ul{

    display: flex;
    margin:0;
    padding: 0;
   
   
    list-style-type: none;
    text-align: center;
   
}
.footer ul li img{
    width:30px;
    height: 30px;
}
.footer ul li a{
    color: gray;
    text-decoration: none;
}
.footer ul li{
    flex:1;
}

运行实例 »

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

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年9月27日

2019-10-07 11:35:54