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><img width="160" height="160" src="Xiaomi 10 Youth Edition.jpg" alt="Xiaomi 10 Youth Edition"></div> <h3>Xiaomi 10 youth 5 G</h3> <p>50 Double periscope/Light 5 G mobile phone</p> <p> <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>MUMO Red oak restaurant with stand table</a> <div> <a>evaluate<em>0</em></a> <a>Collection<em>4948</em></a> </div> <div> <a> <span>¥</span> <em>5140</em> </a> <a> <span>¥</span> <em>5640</em> </a> <a> //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> <div><span>o</span><span>17.4 ten thousand</span><span>o</span><span>1.2 ten thousand</span></div> <div> <span>22:40</span></div> </div> <div>[4K]A rare aerial photo of Beijing </div> <a> <span>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.