博主信息
sjgbctjda的博客
博文
9
粉丝
0
评论
0
访问量
124
积分:0
P豆:18

flex布局--2019-09-10

2019年09月12日 17:32:31阅读数:17博客 / sjgbctjda的博客 / 前端学习

1、课上网页补全

实例

<!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="static/css/initial1.css">
    <link rel="stylesheet" href="static/css/style1.css">
    <title>php中文网手机端</title>
</head>

<body>
    <!-- 头部自适应布局 -->
    <div class="header">
        <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>
                    <span>HTML/CSS</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="static/images/JavaScript.png" alt="">
                    <br>
                    <span>JavaScript</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="static/images/code.png" alt="">
                    <br>
                    <span>服务端</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="static/images/sql.png" alt="">
                    <br>
                    <span>数据库</span>
                </a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="">
                    <img src="static/images/app.png" alt="">
                    <br>
                    <span>移动端</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="static/images/live.png" alt="">
                    <br>
                    <span>直播</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="static/images/manual.png" alt="">
                    <br>
                    <span>手册</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="static/images/tool2.png" alt="">
                    <br>
                    <span>工具</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 推荐课程 -->
    <div class="course">
        <h1>推荐课程</h1>
        <div class="course_t">
            <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
            <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
        </div>
        <ul>
            <li>
                <a href="">
                    <img src="static/images/tjkc3.jpg" alt="">
                </a>
                <p>
                    <a href="">CI框架30分钟入门</a>
                    <br>
                    <span>中级</span> <span>49791次播放</span>
                </p>
            </li>
            <li>
                <a href="">
                    <img src="static/images/tjkc4.jpg" alt="">
                </a>
                <p><a href="">CI框架30分钟入门</a>
                    <br>
                    <span>中级</span> <span>49791次播放</span>
                </p>
            </li>
        </ul>
    </div>
    <!-- 最新更新 -->
    <div class="update">
        <h1>最新更新</h1>
        <div class="update1">
            <ul>
                <li>
                    <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
                    <div class="item2">
                        <a href="">
                            <h5>Laravel 5.8 中文文档手册</h5>
                        </a>
                        <p>《Laravel 5.1/5.8速查表:https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介:Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化,包括引入新的 Eloquent 关联关系(has-one-through)、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard
                            到广播频道、PSR-16 缓存驱动规范等等。</p>
                        <div>
                            <span>中级</span>
                            <span>7093次播放</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
                    <div class="item2">
                        <a href="">
                            <h5>JavaScript极速入门</h5>
                        </a>
                        <p>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了,让你学习0压力,适合新手观看学习......</p>
                        <div>
                            <span>中级</span>
                            <span>7093次播放</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
                    <div class="item2">
                        <a href="">
                            <h5>第七期_直播体验课</h5>
                        </a>
                        <p>php中文网第七期线上***今晚(2019.7.1)正式开课啦~~!为了让广大PHP开发爱好者,了解本期的课程,特安排了直播开放课,感兴趣的小伙伴不要错过哟! 晚 20:00-22:00直播 ,报名qq:88526(猪哥)。七期线上班详情:http://www.php.cn/k.html</p>
                        <div>
                            <span>中级</span>
                            <span>7093次播放</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
                    <div class="item2">
                        <a href="">
                            <h5>CSS3 极速入门</h5>
                        </a>
                        <p>html和css是组成WEB前端开发最核心的部分,所以结合之前的html课程,我们再来学习本章节的css,将会获得更好的学习体验。课程内容非常有节奏的安排,知识点简单明了,让你从头到尾学习毫无压力……快来学习吧……</p>
                        <div>
                            <span>中级</span>
                            <span>7093次播放</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
                    <div class="item2">
                        <a href="">
                            <h5>HTML5 极速入门</h5>
                        </a>
                        <p>在本套课程中,你将学习如何使用 HTML 来创建站点,完成静态网页布局,非常适合HTML5零基础入门,整个轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力!</p>
                        <div>
                            <span>中级</span>
                            <span>7093次播放</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
                    <div class="item2">
                        <a href="">
                            <h5>nodejs开发基础教程</h5>
                        </a>
                        <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。Node.js 使JavaScript 可以在浏览器之外上运行。非常适合前端人员想学习后端技术的同学。</p>
                        <div>
                            <span>中级</span>
                            <span>7093次播放</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="artitles">
        <h1>最新文章</h1>
        <div class="artitle">
            <ul>
                <li>
                    <a href="">
                        <span>wamp运行PHP中文字乱码<br>
                        发布时间:2019-09-11
                        </span>
                        <img src="static/images/tjkc1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>wamp运行PHP中文字乱码<br>
                            发布时间:2019-09-11
                            </span>
                        <img src="static/images/tjkc1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>wamp运行PHP中文字乱码<br>
                                发布时间:2019-09-11
                                </span>
                        <img src="static/images/tjkc1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>wamp运行PHP中文字乱码<br>
                                    发布时间:2019-09-11
                                    </span>
                        <img src="static/images/tjkc1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>wamp运行PHP中文字乱码<br>
                                        发布时间:2019-09-11
                                        </span>
                        <img src="static/images/tjkc1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">更多内容</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="blogs">
        <h1>最新博文</h1>
        <div class="blog">
            <ul>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">更多内容</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="questions">
        <h1>最新问答</h1>
        <div class="question">
            <ul>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">mysql查询时间戳和日期的转换</a>
                    <span>2019-09-07</span>
                </li>
                <li>
                    <a href="">更多内容</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <a href="">
            <img src="static/font-icon/zhuye.png" alt=""><br>
            <spam>首页</spam>
        </a>
        <a href="">
            <img src="static/font-icon/video.png" alt=""><br>
            <spam>视频</spam>
        </a>
        <a href="">
            <img src="static/font-icon/luntan.png" alt=""><br>
            <spam>社区</spam>
        </a>
        <a href="">
            <img src="static/font-icon/geren.png" alt=""><br>
            <spam>我的</spam>
        </a>

    </div>
</body>

</html>

运行实例 »

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

css代码

/* 顶部 */

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

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

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

.header img:last-of-type {
    margin-right: 5px;
}

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

.header .logo img {
    width: 94px;
    height: 42px;
    margin-top: 0;
}


/* 轮播图 */

.banner {
    margin-top: 42px;
    display: flex;
}

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


/* 导航 */

.nav {
    width: 100%;
    height: 170px;
    box-sizing: border-box;
    background-color: #fff;
    padding: 4px;
}

.nav ul {
    display: flex;
    padding: 6px;
}

.nav ul li {
    text-align: center;
    flex: 1;
}

.nav ul li a {
    color: gray;
    font-size: 14px;
    text-align: center;
}

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


/* 课程推荐 */

.course {
    /* height: 390px; */
    margin-top: 20px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
}

.course h1 {
    font-size: 0.9rem;
    color: gray;
    margin-bottom: 10px;
    margin-left: 5px;
    height: 34;
}

.course_t {
    width: 100%;
    display: flex;
    text-align: center;
    margin-bottom: 10px;
}

.course_t a {
    flex: 1;
    margin: 0 5px;
}

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

.course ul {
    /* height: 220px; */
    /* background: #fff; */
    box-sizing: border-box;
    padding: 5px;
    /* margin: 0 5px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.course ul li {
    display: flex;
    background: #fff;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 5px;
    align-items: center;
}

.course ul li a {
    flex: 0.45;
}

.course ul li p {
    flex: 0.55;
    margin-top: 0px;
    margin-left: 20px;
    line-height: 200%;
}

.course ul li p a {
    margin-top: 8px;
    margin-bottom: 0px;
    font-weight: 500;
    font-size: 18px;
}

.course ul li p span {
    font-size: 12px;
}

.course ul li p span:first-of-type {
    background: #444444;
    border-radius: 40%;
    width: 38px;
    height: 16px;
    color: #fff;
    font-size: 13px;
    margin-left: 5px;
}

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


/* 最新更新 */

.update {
    /* height: 752px; */
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
}


/* 
.update1 {
    background: #fff;
} */

.update h1 {
    color: gray;
    /* margin-bottom: 10px; */
    margin-left: 5px;
    font-size: 0.9rem;
}

.update img {
    height: 80px;
    width: 100%;
}

.update1 ul {
    padding: 5px;
    box-sizing: border-box;
}

.update1 ul li {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;
    align-items: center;
}

.update1 ul li a {
    flex: 0.45;
    min-width: 160px;
}

.update1 ul li .item2 {
    /* width: 100%; */
    height: 90px;
    flex: 0.55;
    margin-left: 20px;
    overflow: hidden;
}

.update1 ul li .item2 h5 {
    margin-top: 8px;
    margin-bottom: 0px;
    font-weight: 500;
    font-size: 16px;
}

.update1 ul li .item2 p {
    margin-top: 5px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.update1 ul li .item2 div {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
}

.update1 ul li .item2 div span {
    font-size: 12px;
    text-align: center;
}

.update1 ul li .item2 div span:first-of-type {
    background: #444444;
    border-radius: 50%;
    width: 38px;
    height: 16px;
    color: #fff;
}


/* 最新文章 */

.artitles {
    margin-top: 10px;
}

.artitles h1 {
    color: gray;
    /* margin-bottom: 10px; */
    margin-left: 5px;
    font-size: 0.9rem;
}

.artitle ul {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5px;
}

.artitle ul li {
    background: #ffffff;
    margin-top: 10px;
}

.artitle ul li a {
    display: flex;
    justify-content: space-between;
}

.artitle ul li a span {
    flex: 0.6;
    color: gray;
    margin-left: 15px;
    line-height: 200%;
    font-size: 14px;
    padding-top: 10px;
}

.artitle ul li a img {
    width: 150px;
    height: 80px;
    flex: 0.4;
    margin-right: 5px;
    box-sizing: border-box;
    padding: 5px;
}

.artitle ul li:last-of-type {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 30px;
    align-items: center;
}

.artitle ul li:last-of-type a {
    color: gray;
}


/* 最新博文 */

.blogs {
    margin-top: 10px;
}

.blogs h1 {
    color: gray;
    /* margin-bottom: 10px; */
    margin-left: 5px;
    font-size: 0.9rem;
}

.blog ul {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5px;
}

.blog ul li {
    background: #ffffff;
    height: 50px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog ul li a {
    flex: 0.6;
    color: gray;
    margin-left: 15px;
    font-size: 14px;
}

.blog ul li span {
    flex: 0.13;
    /* margin-right: 5px; */
    box-sizing: border-box;
    padding: 5px;
}

.blog ul li:last-of-type {
    /* flex: 1; */
    height: 30px;
    justify-content: center;
}

.blog ul li:last-of-type a {
    text-align: center;
    font-size: 16px;
}


/* 最新问答 */

.questions {
    margin-top: 10px;
    margin-bottom: 52px;
}

.questions h1 {
    color: gray;
    /* margin-bottom: 10px; */
    margin-left: 5px;
    font-size: 0.9rem;
}

.question ul {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5px;
}

.question ul li {
    background: #ffffff;
    height: 50px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.question ul li a {
    flex: 0.6;
    color: gray;
    margin-left: 15px;
    font-size: 14px;
}

.question ul li span {
    flex: 0.13;
    /* margin-right: 5px; */
    box-sizing: border-box;
    padding: 5px;
}

.question ul li:last-of-type {
    /* flex: 1; */
    height: 30px;
    justify-content: center;
}

.question ul li:last-of-type a {
    text-align: center;
    font-size: 16px;
}


/* 底部 */

.footer {
    width: 100%;
    max-width: 768px;
    min-width: 320px;
    height: 50px;
    background: #edeff0;
    position: fixed;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    display: flex;
    justify-content: space-between;
    padding: 5px;
    box-sizing: border-box;
    border-top: 1px #ccc solid;
}

.footer a {
    text-align: center;
    /* line-height: 80%; */
}

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

.footer img:first-of-type {
    margin-left: 80px;
}

.footer img:last-of-type {
    margin-right: 80px;
}

运行实例 »

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

运行结果:task1运行结果.png

2.用flex布局仿写一个手机端页面:小米商城

实例

<!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="static/css/initial1.css">
    <link rel="stylesheet" href="static/css/style2.css">
    <title>小米商城</title>
</head>

<body>
    <!-- 顶部固定区域 -->
    <div class="top">
        <!-- 搜索栏 -->
        <div class="top1">
            <a href=""><img class="logo" src="static/images/mi/nav/logo.png" alt=""></a>
            <form action="">
                <img src="static/images/mi/font-icon/search.png" alt="">
                <input type="text" placeholder="请输入商品名称">
            </form>
            <a href=""><img src="static/images/mi/font-icon/nickname.png" alt=""></a>
        </div>
        <!-- 固定导航栏 -->
        <div class="top2">
            <ul>
                <li><a href="">推荐</a></li>
                <li><a href="">手机</a></li>
                <li><a href="">中秋节</a></li>
                <li><a href="">智能</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">生活</a></li>
            </ul>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <img src="static/images/mi/banner.jpg" alt="">
    </div>
    <!-- 图片导航区 -->
    <div class="nav">
        <ul>
            <li>
                <a href=""><img src="static/images/mi/nav/new.webp" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/mi/nav/众筹.webp" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/mi/nav/kaishou.gif" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/mi/nav/huanxin.webp" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/mi/nav/redmi.png" alt=""></a>
            </li>
        </ul>
        <ul>
            <li>
                <a href=""><img src="static/images/mi/nav/miaosha.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/mi/nav/bijiben.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/mi/nav/dianshi.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/mi/nav/kongtiao.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/mi/nav/hongbao.png" alt=""></a>
            </li>
        </ul>
    </div>
    <!-- 图片推荐 -->
    <div class="imgbox">
        <div class="box1">
            <div class="box1l">
                <img src="static/images/mi/nav/note8.jpg" alt=""></div>
            <div class="box1f">
                <img src="static/images/mi/nav/shouhuan.jpg" alt="">
                <img src="static/images/mi/nav/70.jpg" alt=""></div>
        </div>
        <div class="box2">
            <a href=""><img src="static/images/mi/nav/note7.webp" alt=""></a>
            <a href=""><img src="static/images/mi/nav/note7pro.webp" alt=""></a>
        </div>
        <div class="box3">
            <img src="static/images/mi/nav/9.9.jpg" </div>
        </div>
        <!-- 每日精选 -->
        <div class="dayselect">
            <a href=""><img src="static/images/mi/dayselect/redmi7.jpg" alt=""></a>
            <div class="phoneimg">
                <div class="phone">
                    <a href="">
                        <img src="static/images/mi/dayselect/mix2s.webp" alt="">
                        <h5>小米MIX 2S</h5>
                        <p>四曲面***机身,晓龙845</p>
                        <p><span>¥1799</span>  <span>¥2999</span></p>
                        <button>立即***</button>
                    </a>
                </div>
                <div class="phone">
                    <a href="">
                        <img src="static/images/mi/dayselect/game2.webp" alt="">
                        <h5>黑鲨游戏手机 2</h5>
                        <p>立体触控,晓龙855</p>
                        <p><span>¥2699</span>  <span>¥3499</span></p>
                        <button>立即***</button>
                    </a>
                </div>
                <div class="phone">
                    <a href="">
                        <img src="static/images/mi/dayselect/redmi-1.jpg" alt="">
                        <h5>Redmi</h5>
                        <p>4000mAh超长待机</p>
                        <p><span>¥699</span>  <span>¥799</span></p>
                        <button>立即***</button>
                    </a>
                </div>
                <div class="phone">
                    <a href="">
                        <img src="static/images/mi/dayselect/mix3.webp" alt="">
                        <h5>小米MIX 3</h5>
                        <p class="description">DxO百分百拍照手机</p>
                        <p class="price"><span>¥2599</span>  <span>¥3599</span></p>
                        <button>立即***</button>
                    </a>
                </div>
            </div>
            <a href="" class="amore">更多小米手机产品 ></a>
            <a href=""><img src="static/images/mi/dayselect/erji.jpg" alt=""></a>
        </div>
        <!-- 小米电视 -->
        <div class="mitv">
            <a href=""><img src="static/images/mi/tv/mitv.jpg" alt=""></a>
            <div class="tvimg">
                <div class="tv">
                    <a href="">
                        <img src="static/images/mi/tv/65.webp" alt="">
                        <h5>小米电视4A 65英寸</h5>
                        <p>4K HDR, 人工智能语音系统</p>
                        <p><span>¥1799</span>  <span>¥2999</span></p>
                        <button>立即***</button>
                    </a>
                </div>
                <div class="tv">
                    <a href="">
                        <img src="static/images/mi/tv/43.jpg" alt="">
                        <h5>小米电视4A 43英寸</h5>
                        <p>FHD全高清屏,人工智能语音</p>
                        <p><span>¥1399</span>  <span>¥1499</span></p>
                        <button>立即***</button>
                    </a>
                </div>
                <div class="tv">
                    <a href="">
                        <img src="static/images/mi/tv/50.jpg" alt="">
                        <h5>小米电视4C 45英寸</h5>
                        <p>4K HDR,钢琴烤漆</p>
                        <p><span>¥1699</span></p>
                        <button>立即***</button>
                    </a>
                </div>
                <div class="tv">
                    <a href="">
                        <img src="static/images/mi/tv/55.jpg" alt="">
                        <h5>小米电视4C 55英寸</h5>
                        <p class="description">4K HDR,人工智能系统</p>
                        <p class="price"><span>¥1999</span></p>
                        <button>立即***</button>
                    </a>
                </div>
            </div>
            <a href="" class="amore">更多小米电视产品 ></a>
            <a href=""><img src="static/images/mi/tv/redmi.jpg" alt=""></a>
        </div>
        <!-- 底部固定区 -->
        <div class="footer">
            <a href="">
                <img src="static/images/mi/font-icon/home.png" alt="">
                <br>
                <span>首页</span>
            </a>
            <a href="">
                <img src="static/images/mi/font-icon/list.png" alt="">
                <br>
                <span>分类</span>
            </a>
            <a href="">
                <img src="static/images/mi/font-icon/shoppingcart.png" alt="">
                <br>
                <span>购物车</span>
            </a>
            <a href="">
                <img src="static/images/mi/font-icon/nickname.png" alt="">
                <br>
                <span>我的</span>
            </a>
        </div>

</body>

</html>

运行实例 »

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

css代码

/* 顶部固定区 */

.top {
    width: 100%;
    min-width: 320px;
    max-width: 768px;
    height: 141px;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background-color: #f2f2f2;
}


/* 搜索栏 */

.top1 {
    display: flex;
    width: 100%;
    height: 84px;
    justify-content: space-between;
    align-items: center;
}

.top1 a:first-of-type img {
    width: 48px;
    height: 32px;
    margin-left: 20px;
}

.top1 a:last-of-type img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.top1 form {
    position: relative;
}

.top1 form img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 8px;
}

input {
    height: 60px;
    width: 568px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
}

input::-webkit-input-placeholder {
    padding-left: 70px;
}


/* 固定导航栏 */

.top2 {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.top2 ul {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 5px;
}

.top ul li a {
    font-size: 24px;
    color: gray;
}

.top ul li a:hover {
    color: orange;
    border-bottom: 2px orange solid;
}


/* 轮播图 */

.banner {
    margin-top: 141px;
}

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


/* 图片导航 */

.nav {
    height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding-bottom: 20px;
}

.nav ul {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
}

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

.nav ul li:first-of-type a img {
    margin-left: 10px;
}

.nav ul li:last-of-type a img {
    margin-right: 30px;
}


/* 图片推荐 */

***gbox {
    height: 1100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

***gbox .box1 {
    display: flex;
    justify-content: space-between;
}

***gbox .box1 div {
    text-align: center;
    flex: 0.5;
}

***gbox .box2 {
    display: flex;
}

***gbox .box2 a {
    flex: 0.5;
    text-align: center;
}

***gbox .box2 a img {
    width: 358px;
}

***gbox .box3 img {
    width: 100%;
    height: 270px;
}


/* 每日精选 */

.dayselect {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dayselect img {
    width: 100%;
}

.dayselect .phoneimg {
    height: 1050px;
    display: flex;
    flex-flow: wrap;
    border-bottom: 2px solid gray;
}

.phoneimg .phone {
    text-align: center;
    flex: 0.5;
    /* margin-bottom: 10px; */
}

.phoneimg .phone img {
    width: 344px;
}

.phoneimg .phone a h5 {
    font-size: 24px;
    margin: 10px;
    color: #000000;
}

.phoneimg .phone a p {
    line-height: 80%;
}

.phoneimg .phone a p:first-of-type {
    font-size: 18px;
    color: gray;
}

.phoneimg .phone a p:last-of-type>span:first-of-type {
    color: red;
    font-size: 20px;
}

.phoneimg .phone a p:last-of-type>span:last-of-type {
    color: gray;
    text-decoration-line: line-through;
}

.phoneimg .phone a button {
    width: 150px;
    height: 59px;
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    background-color: red;
    box-shadow: none;
    border: none;
    border-radius: 10px;
}

.dayselect .amore {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 22px;
    color: gray;
    margin: 20px;
}


/* 小米电视 */

.mitv {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mitv img {
    width: 100%;
}

.mitv .tvimg {
    height: 1050px;
    display: flex;
    flex-flow: wrap;
    border-bottom: 2px solid gray;
}

.tvimg .tv {
    text-align: center;
    flex: 0.5;
}

.tvimg .tv img {
    width: 344px;
}

.tvimg .tv a h5 {
    font-size: 24px;
    margin: 10px;
    color: #000000;
}

.tvimg .tv a p {
    line-height: 80%;
}

.tvimg .tv a p:first-of-type {
    font-size: 18px;
    color: gray;
}

.tvimg .tv a p:last-of-type>span:first-of-type {
    color: red;
    font-size: 20px;
}

.tvimg .tv a p:last-of-type>span:last-of-type {
    color: gray;
    text-decoration-line: line-through;
}

.tvimg .tv a button {
    width: 150px;
    height: 59px;
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    background-color: red;
    box-shadow: none;
    border: none;
    border-radius: 10px;
}

.mitv .amore {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 22px;
    color: gray;
    margin: 20px;
}


/* 底部固定区 */

.footer {
    min-width: 320px;
    max-width: 768px;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    display: flex;
    justify-content: space-between;
}

.footer a {
    width: 50px;
    text-align: center;
    color: gray;
    line-height: 80%;
}

.footer a:first-of-type {
    margin-left: 10px;
}

.footer a:last-of-type {
    margin-right: 20px;
}

.footer img {
    width: 50px;
    height: 50px;
}

运行实例 »

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

运行结果:

task2运行结果.png

批改状态:合格

老师批语:还把小米做了, 不错, 是不是写上瘾了

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!