今天敲了一张移动端哦~

2024-03-31 17:06:28

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

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

码农公寓

相关文章