无序列表-制作网页特效

心已赠人 2023-06-13 04:44 15阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>无序列表-制作网页特效</title>
        <link href="css/style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
    
    <div id="mr-box">
        
        <div class="mr-top">
            <p>排行榜<span>网罗全民挚爱></span></p>
        </div>
        
        <div class="mr-bot">
            
            <div class="mr-item-nav">
                <p><span>手机通讯录</span>|<span>手机保护套</span>|<span>大家电</span>|<span>休闲鞋</span>|<span><a href="#" target="_self">隐形眼镜</a></span>
                </p>
            </div>
            
            <div class="mr-shop-item">
                <ul>
                    <li>
                        <div class="mr-late"><img src="images/1.jpg" alt="" title=""/></div>
                        <p>海昌 隐形眼镜H2O 半年抛2片装</p>
                    </li>
                    <li>
                        <div class="mr-late"><img src="images/2.jpg" alt="" title=""/></div>
                        <p>海昌 隐形眼镜H2O 半年抛2片装</p>
                    </li>
                    <li>
                        <div class="mr-late"><img src="images/3.jpg" alt="" title=""/></div>
                        <p>海昌 隐形眼镜H2O 半年抛2片装</p>
                    </li>
                    <li>
                        <div class="mr-late"><img src="images/4.jpg" alt="" title=""/></div>
                        <p>海昌 隐形眼镜H2O 半年抛2片装</p>
                    </li>
                    <li>
                        <div class="mr-late"><img src="images/5.jpg" alt="" title=""/></div>
                        <p>海昌 隐形眼镜H2O 半年抛2片装</p>
                    </li>
                    <li>
                        <div class="mr-late"><img src="images/6.jpg" alt="" title=""/></div>
                        <p>海昌 隐形眼镜H2O 半年抛2片装</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </body>
    </html>

@charset "utf-8";
    /**css document*/
    * { /*通配选择器，清除所有标签默认样式*/
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    /*总宽437px,总高度415*/
    #mr-box { /*id选择器，设置整体内容样式*/
        width: 473px;
        height: 415px;
        margin: 9px auto;
    }
    
    .mr-top { /*类选择器，设置排行榜样式*/
        height: 60px;
        background: rgb(239, 153, 68);
        color: rgb(255, 255, 255);
    }
    
    .mr-top p { /*类选择器、包含选择器，设置排行榜字体样式*/
        line-height: 60px;
        margin-left: 60px;
        font-size: 28px;
    }
    
    .mr-top p span { /*类选择器，包含选择器，设置网罗全民挚爱字体样式>*/
        font-size: 15px;
        margin-left: 150px;
    }
    
    /**商品导航展示栏**/
    .mr-bot { /*类选择器，设置商品导航展示栏样式*/
        height: 340px;
        margin-top: 16px;
    }
    
    .mr-item-nav { /*类选择器，设置导航字体颜色样式*/
        margin-left: 35px;
        color: rgb(176, 176, 176);
    }
    
    .mr-item-nav span { /*类选择器，设置字体边距样式*/
        margin: 0 5px;
    }
    
    .mr-item-nav a { /*类选择器，设置超接字体样式*/
        text-decoration: underline red;
        color: rgb(176, 176, 176);
    }
    .mr-shop-item{/*类选择器，设置商品展示样式*/
        margin-left: 40px;
        color: rgb(176,176,176);
        font-size: 12px;
    }
    .mr-shop-item li{/*类选择器，设置商品展示边框大小样式*/
        width: 100px;
        height: 136px;
        margin: 15px;
        float: left;
    }
    .mr-shop-item li:hover .mr-late{/*伪类选择器，鼠标悬停图片向左平移*/
        transform: translateX(-20px);
        transition: transform 0.5s linear;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113215241550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113215259247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz,size_16,color_FFFFFF,t_70