微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

今天敲了一张移动端哦~

分类：Flex作者：编程之家

大神帮我看看有没有哪里不对 ~（跪谢啦）

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="index17.css">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2570322_z7wrga80pej.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <i class="iconfont icon-zhaoxiangji"></i>
        <input type="text" placeholder="玛莎拉蒂 | 宝马 | 保时捷">
        <img src="images/切图/17移动端/1701_03.jpg" alt="">
    </header>
    <!-- 导航栏 -->
    <nav>

        <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>

    </nav>
    <!-- canvas -->
    <canvas></canvas>
    <!-- 内容-->
    <article>
        <div>
            <img src="images/切图/17移动端/111.png" alt="">
            <span>钱钱钱</span>
        </div>
        <div>
            <img src="images/切图/17移动端/111.png" alt="">
            <span>钱钱钱</span>
        </div>
        <div>
            <img src="images/切图/17移动端/111.png" alt="">
            <span>钱钱钱</span>
        </div>
        <div>
            <img src="images/切图/17移动端/111.png" alt="">
            <span>钱钱钱</span>
        </div>
        <div>
            <img src="images/切图/17移动端/111.png" alt="">
            <span>钱钱钱</span>
        </div>
    </article>
    <!-- 主要内容 -->
    <main>
        <div class="ma-Box">
            <span>先锋对话：与宝马合作只是一小步</span>
            <div class="ma-Box2">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
            </div>
            <p>
                <a>头条</a>
                <i>606评论 汽车之家</i>
            </p>
        </div>
        <div class="ma-Box">
            <span>先锋对话：与宝马合作只是一小步</span>
            <div class="ma-Box2">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
            </div>
            <p>
                <a>头条</a>
                <i>606评论 汽车之家</i>
            </p>
        </div>
        <div class="ma-Box">
            <span>先锋对话：与宝马合作只是一小步</span>
            <div class="ma-Box2">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
            </div>
            <p>
                <a>头条</a>
                <i>606评论 汽车之家</i>
            </p>
        </div>
        <div class="ma-Box">
            <span>先锋对话：与宝马合作只是一小步</span>
            <div class="ma-Box2">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
            </div>
            <p>
                <a>头条</a>
                <i>606评论 汽车之家</i>
            </p>
        </div>
        <div class="ma-Box">
            <span>先锋对话：与宝马合作只是一小步</span>
            <div class="ma-Box2">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
            </div>
            <p>
                <a>头条</a>
                <i>606评论 汽车之家</i>
            </p>
        </div>
        <div class="ma-Box">
            <span>先锋对话：与宝马合作只是一小步</span>
            <div class="ma-Box2">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
            </div>
            <p>
                <a>头条</a>
                <i>606评论 汽车之家</i>
            </p>
        </div>
        <div class="ma-Box">
            <span>先锋对话：与宝马合作只是一小步</span>
            <div class="ma-Box2">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
                <img src="images/切图/17移动端/1704_03.jpg" alt="">
            </div>
            <p>
                <a>头条</a>
                <i>606评论 汽车之家</i>
            </p>
        </div>
    </main>
    <!-- 底部 -->
    <footer>
        <div><i class="iconfont icon-shouye"></i><span>首页</span></div>
        <div><i class="iconfont icon-wodedangxuan"></i><span>论坛</span></div>
        <div><i class="iconfont icon-wodedangxuan"></i><span>选车</span></div>
        <div><i class="iconfont icon-wodedangxuan"></i><span>买车</span></div>
        <div><i class="iconfont icon-wodedangxuan"></i><span>我</span></div>
    </footer>
    </footer>
</body>

</html>

 css样式


@charset "utf-8";
html,
body {
    height: 100%;
}

html {
    font-size: 26.67vw;
}

body {
    display: flex;
    flex-direction: column;
}


/* header */

header {
    width: 100%;
    height: 0.43rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

header i {
    color: #000;
    font-size: 0.2rem !important;
}

header input {
    width: 2.79rem;
    height: 0.28rem;
    border: none;
    border-radius: 0.05rem;
    background: #f2f2f2 url(images/切图/17移动端/1702_03.jpg) no-repeat 0.08rem center;
    background-size: 0.18rem 0.16rem;
}

input::placeholder {
    color: #9b9b9b;
    font-size: 0.11rem;
    padding-left: 0.3rem;
}

header img {
    width: 0.26rem;
    height: 0.26rem;
}


/* nav */

nav {
    width: 100%;
    height: 0.36rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #efedee;
}

nav li {
    font-size: 0.15rem;
}

nav li a {
    color: #000;
    padding-bottom: 0.03rem;
}

nav li a:hover {
    color: #2c70ff;
    border-bottom: 0.02rem solid #2c70ff;
}


/* canvas */

canvas {
    width: 100%;
    height: 1.88rem;
    display: flex;
    background: url(images/切图/17移动端/1703_02.jpg) no-repeat;
    background-size: 100% 100%;
}


/* article */

article {
    width: 100%;
    height: 0.87rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #efedee;
}

article>div {
    display: flex;
    align-items: center;
    flex-direction: column;
}

article img {
    width: 0.3rem;
    height: 0.3rem;
}

article span {
    font-size: 0.11rem;
    padding-top: 0.13rem;
}


/* main */

main {
    flex: 1;
    overflow: auto;
}

.ma-Box {
    width: 92%;
    height: 1.6rem;
    margin: 0.14rem;
    display: flex;
    flex-direction: column;
    Box-sizing: border-Box;
    border-bottom: 1px solid #a19fa0;
}

.ma-Box span {
    font-size: 0.15rem;
}

.ma-Box2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.11rem 0;
}

.ma-Box2 img {
    width: 1.13rem;
    height: 0.85rem;
}

.ma-Box p {
    display: flex;
}

.ma-Box p a {
    font-size: 0.11rem;
    width: 0.31rem;
    height: 0.19rem;
    color: #457eff;
    text-align: center;
    line-height: 0.19rem;
    background: #e8f1ff;
    border-radius: 0.02rem;
    margin-right: 0.1rem;
}

.ma-Box p i {
    font-size: 0.1rem;
    color: #a3a3a3;
    margin-top: 0.02rem;
}


/* footer */

footer {
    width: 100%;
    height: 0.5rem;
    background-color: #fcfcfc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #a19fa0;
}

footer div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer i {
    width: 0.19rem;
    height: 0.2rem;
}

footer span {
    font-size: 0.1rem;
}

footer div:hover {
    color: #457eff;
}

 原图

啊啊啊啊啊，敲完截图怎么发不上来 ，（假装有图片.jpg）

原文地址：https://blog.csdn.net/m0_56565389/article/details/117488280

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot