07.22 NAVERショッピングクリップ猫

NAVERショッピングセンター実習

1.main

• NAVERショッピングサイトでは、3番目と4番目のliが重複したレイアウトです.
まず
• cssまたはhtmlコードを作成し、繰り返しのレイアウトに貼り付けます.

50%オレンジ色の割引絵をdivまたはspanに追加し、背景色とborder-radiusの等値を与え、位置を調整します.absoluteの3次元特性をレイヤーに重ね、フォントの色やフォントサイズなどを細かく調整しました.

.content_image_wrap .discount {
    position: absolute;
    display: block;
    width: 42px;
    height: 42px;
    background-color: orange;
    font-size: 14;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    top: 6px;
    right: 5px;
    line-height: 42px;
}

2. footer