[case] simple picture and paragraph up and down typesetting

[case] simple picture and paragraph up and down typesetting

As shown below, here are some pictures I cut off from several websites. After clicking, I will enter the product details interface or article details interface from the new tab.

The picture is at the top, and the text is at the bottom. At this time, the main information is presented by drawing, and also mainly by pictures to attract users, while the text below is only for auxiliary purposes.

This kind of typesetting mostly appears on video network, picture social network, shopping website and tourism website.

Advantages: eye-catching, atmospheric, high identification

Disadvantages: however, for the mobile terminal, if there is no adaptation, the content may take up a lot of space, which is not conducive to the user's information acquisition.

Example code is not the original code of official website

Xiaomi official website

First of all, let's implement a Xiaomi official website

From the code of the official website, this < img > is placed in a < div > and followed by a < H3 > as the content title

The next < p > is the content introduction, and the last < p > is the price. Put the price figures in the < span > for easy modification

Full code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: gainsboro;
        }

        #back {
            margin: auto;
            width: 160px;
            height: 250px;
            padding: 20px;
            background-color: white;
        }

        .goods_png {
            width: 160px;
            height: 160px;
        }

        .title {
            font-weight: normal;
            margin: 10px 0px 10px 2px;
            font-size: 16px;
            text-align: center;
        }

        .syn {
            text-align: center;
            font-size: 12px;
            color: grey;
            margin: 0px 10px 10px;
        }

        .price {
            margin: 0px 10px 14px;
            text-align: center;
            color: #FF6700;
        }
    </style>
</head>

<body>
    <div id="back">
        <div class="goods_png"><img width="160" height="160" src="Xiaomi 10 Youth Edition.jpg" alt="Xiaomi 10 Youth Edition"></div>
        <h3 class="title">Xiaomi 10 youth 5 G</h3>
        <p class="syn">50 Double periscope/Light 5 G mobile phone</p>
        <p class="price">
            <span>2099</span>element<span>rise</span></p>
    </div>
</body>

</html>

TaoBao

Taobao layout for millet, just more evaluation, collection, sales display.

Full code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: grey;
        }

        #back {
            width: 200px;
            height: 320px;
            margin: auto;
            background-color: white;
            padding: 20px;
        }

        .line_1 {
            font-size: 14px;
            margin: 8px 0px;
            color: #666666;
        }

        .line_2 {
            margin: 0px 0px 17px;
        }

        .line_2 a {
            color: #999999;
            font-size: 12px;
        }

        .line_2 em {
            font-style: normal;
        }

        .price {
            color: #FF5000;
        }

        .price span {
            font-size: 12px;
        }

        .price em {
            font-size: 22px;
            margin: 0px 0px 0px 2px;
            font-style: normal;
        }

        .or_price {
            color: #999999;
        }

        .or_price span {
            font-size: 12px;
        }

        .or_price em {
            text-decoration: line-through;
            font-size: 12px;
            font-style: normal;
        }

        .sales {
            float: right;
            font-size: 12px;
            margin: 10px 0px 0px;
            color: #999999;
        }

        .sales em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <div id="back">
        <img width="200" height="200" src="Test product picture.png" alt="Product picture">
        <a class="line_1">MUMO Red oak restaurant with stand table</a>
        <div class="line_2">
            <a>evaluate<em>0</em></a>
            <a>Collection<em>4948</em></a>
        </div>
        <div>
            <a class="price">
                <span>¥</span>
                <em>5140</em>
            </a>
            <a class="or_price">
                <span>¥</span>
                <em>5640</em>
            </a>
            <a class="sales">
                //Monthly sales
                <em>19</em>pen</a>
        </div>
    </div>
</body>

</html>

Station B

Typical video websites

Full code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: grey;
        }

        #back {
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: white;
            padding: 20px;
        }

        .icon {
            width: 10px;
            height: 10px;
            background-color: cyan;
            margin-right: 5px;
        }

        .count {
            margin-top: -30px;
        }

        .left {
            margin-left: 5px;
        }

        .right {
            float: right;
            position: relative;
            margin-top: -20px;
            margin-right: 5px;
        }

        .vtitle {
            margin: 10px 0px 8px;
            padding: 0px 12px 0px 0px;
            font-size: 14px;
            color: #212121;
        }

        .up_name {
            font-style: normal;
            font-size: 13px;
            color: #999999;
            display: block;
            margin-top: 40px;
        }
    </style>
</head>

<body>
    <div id="back">
        <div>
            <img width="200" height="120" src="Test product picture.png" alt="Test product picture">
            <div class="count">
                <div class="left"><span class="icon">o</span><span>17.4 ten thousand</span><span
                        class="icon">o</span><span>1.2 ten thousand</span></div>
                <div class="right">
                    <span>22:40</span></div>
            </div>
            <div class="vtitle">[4K]A rare aerial photo of Beijing
            </div>
            <a class="up_name"> <span class="icon">o</span>8KRAW_OFFICIAL
            </a>
        </div>
    </div>
</body>

</html>

The card styles of digital tail and surging news are similar to these, but they are only modified.

Tags: network Mobile

Posted on Sat, 20 Jun 2020 04:29:02 -0400 by 2levelsabove