HTML5——小米商城

html5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/mi2.css" />
    </head>
    <body>
        <div class="items">
            <div class="items_container">
                <ul class="items_container_ul1">
                    <li>
                        <a href="#">
                            <span>小米商城</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>MIUI</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>loT</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>云服务</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>天星科技</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>有品</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>小爱开放平台</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>企业团购</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>资质证照</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>协议规则</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>下载app</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>智能生活</span>
                        </a>
                        <span>&nbsp;|&nbsp;</span>
                    </li>
                    <li>
                        <a href="#">
                            <span>SelectLocation</span>
                        </a>
                    </li>
                    
                </ul>
                
                <ul class="items_container_ul2">
                    <li>
                        <a href="#">
                            <span>登录</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>注册</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span>消息通知</span>
                        </a>
                    </li>
                    <li class="container_ul2_lastli">
                        <a href="#">
                            购物车(0)
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="goodsitem">
            <img src="img/logo.png" class="logo"/>
            <div class="goodsitem_container">
                <ul class="goodsitem_container_ul">
                    <li>
                        <a href="#">
                            小米手机
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Redmi 红米
                        </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>
                    <li>
                        <a href="#">
                            智能硬件
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            社区
                        </a>
                    </li>
                </ul>
                
                <input id="searchtext" type="text" name="search" placeholder="小米手机" />
                <div id="search_div">
                    <img id="search" src="img/search.png" />
                </div>
            </div>
        </div>
        
        <div class="banner">
            <img class="banner_img" src="img/banner1.jpg" />
            <ul>
                <li>
                    <a href="#">
                        <span>手机</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>电视</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>笔记本 平板</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>家电</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>出行 穿戴</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>智能 路由器</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>电源 配件</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>健康 儿童</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>耳机 音箱</span>
                        <img src="img/right.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>生活 箱包</span>
                        <img src="img/right.png" />
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="shower">
            <ul class="shower_items">
                <li>
                    <a href="#">
                        <img src="img/a.png" />
                        <span>保障服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/b.png" />
                        <span>企业团购</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/c.png" />
                        <span>F码通道</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/d.png" />
                        <span>米粉卡</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/e.png" />
                        <span>以旧换新</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/f.png" />
                        <span>话费充值</span>
                    </a>
                </li>
            </ul>
            
            <img src="img/s1.jpg" class="showerimg" />
            <img src="img/s2.jpg" class="showerimg" />
            <img src="img/s3.png" class="showerimg" />
        </div>
        
        <div class="container">
            <img class="adv" src="img/adv1.jpg" />
            
            <div class="container_title">
                <span class="firsttitle">手机</span>
                <a href="#">
                    <span class="more">查看更多</span>
                    <img src="img/right%20arrow-b.png" />
                </a>
            </div>
            
            <div class="goods">
                <img src="img/goods1.jpg" />
                <ul>
                    <li> 
                         <a href="#">
                             <img class="goodsimg" src="img/g1.jpg" />
                             <span class="gname">Xiaomi MIX 4</span>
                             <span class="gdetail">CUP全面屏</span>
                             <span class="gprice">4999元起</span>
                         </a>
                    </li>
                    <li>
                         <a href="#">
                             <img class="goodsimg" src="img/g2.jpg" />
                             <span class="gname">Xiaomi MIX 4</span>
                             <span class="gdetail">CUP全面屏</span>
                             <span class="gprice">4999元起</span>
                         </a>
                    </li>
                    <li>
                         <a href="#">
                             <img class="goodsimg" src="img/g3.jpg" />
                             <span class="gname">Xiaomi MIX 4</span>
                             <span class="gdetail">CUP全面屏</span>
                             <span class="gprice">4999元起</span>
                         </a>
                    </li>
                    <li>
                         <a href="#">
                             <img class="goodsimg" src="img/g4.jpg" />
                             <span class="gname">Xiaomi MIX 4</span>
                             <span class="gdetail">CUP全面屏</span>
                             <span class="gprice">4999元起</span>
                         </a>
                    </li>
                    <li>
                         <a href="#">
                             <img class="goodsimg" src="img/g5.jpg" />
                             <span class="gname">Xiaomi MIX 4</span>
                             <span class="gdetail">CUP全面屏</span>
                             <span class="gprice">4999元起</span>
                         </a>
                    </li>
                    <li>
                         <a href="#">
                             <img class="goodsimg" src="img/g6.jpg" />
                             <span class="gname">Xiaomi MIX 4</span>
                             <span class="gdetail">CUP全面屏</span>
                             <span class="gprice">4999元起</span>
                         </a>
                    </li>
                    <li>
                         <a href="#">
                             <img class="goodsimg" src="img/g7.jpg" />
                             <span class="gname">Xiaomi MIX 4</span>
                             <span class="gdetail">CUP全面屏</span>
                             <span class="gprice">4999元起</span>
                         </a>
                    </li>
                    <li>
                         <a href="#">
                             <img class="goodsimg" src="img/g8.jpg" />
                             <span class="gname">Xiaomi MIX 4</span>
                             <span class="gdetail">CUP全面屏</span>
                             <span class="gprice">4999元起</span>
                         </a>
                    </li>
                </ul>
            </div>
            
            
            <div class="container_title">
                <span class="firsttitle">家电</span>
                <a href="#">
                    <span class="more">热门</span>
                    <span class="more">电视影音</span>
                </a>
            </div>
            
            <ul class="sortul">
                <li>
                    <img class="sortul_img" src="img/a1.webp"/>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a2.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a3.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a4.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a5.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <img class="sortul_img" src="img/a6.webp"/>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a7.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a8.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a9.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li id="sortul_lastli">
                    <a class="a1" href="#">
                        <div class="a1_div">
                            <span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
                            <span class="gprice">7999元</span>
                        </div>
                        
                        <img src="img/a10.webp" class="a1_img"/>
                    </a>
                    
                    <a class="a2" href="#">
                        <div class="a2_div">
                            <span  style="font-size: 16px; color: #000;">浏览更多</span>
                            <span style="color: #757575; font-size: 12px;">热门</span>
                        </div>
                        
                        <img src="img/right2.png" class="a2_img" />
                    </a>
                </li>
            </ul>
            
            <div class="container_title">
                <span class="firsttitle">智能</span>
                <a href="#">
                    <span class="more">热门</span>
                    <span class="more">安防</span>
                    <span class="more">出行</span>
                </a>
            </div>
            
            <ul class="sortul">
                <li>
                    <img class="sortul_img" src="img/a1.webp"/>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a2.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a3.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a4.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a5.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <img class="sortul_img" src="img/a6.webp"/>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a7.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a8.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="simg" src="img/a9.webp" />
                        <span class="gname">小米电视4A 70英寸</span>
                        <span class="gdetail">大屏更享受</span>
                        <span class="gprice">3299元</span>
                    </a>
                </li>
                <li id="sortul_lastli">
                    <a class="a1" href="#">
                        <div class="a1_div">
                            <span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
                            <span class="gprice">7999元</span>
                        </div>
                        
                        <img src="img/a10.webp" class="a1_img"/>
                    </a>
                    
                    <a class="a2" href="#">
                        <div class="a2_div">
                            <span  style="font-size: 16px; color: #000;">浏览更多</span>
                            <span style="color: #757575; font-size: 12px;">热门</span>
                        </div>
                        
                        <img src="img/right2.png" class="a2_img" />
                    </a>
                </li>
            </ul>
            
                <img src="img/goods2.jpg" />
                
                <div class="container_title">
                    <span class="firsttitle">搭配</span>
                    <a href="#">
                        <span class="more">热门</span>
                        <span class="more">耳机音箱</span>
                    </a>
                </div>
                
                <ul class="sortul">
                    <li>
                        <img class="sortul_img" src="img/a1.webp"/>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a2.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a3.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a4.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a5.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <img class="sortul_img" src="img/a6.webp"/>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a7.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a8.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a9.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li id="sortul_lastli">
                        <a class="a1" href="#">
                            <div class="a1_div">
                                <span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
                                <span class="gprice">7999元</span>
                            </div>
                            
                            <img src="img/a10.webp" class="a1_img"/>
                        </a>
                        
                        <a class="a2" href="#">
                            <div class="a2_div">
                                <span  style="font-size: 16px; color: #000;">浏览更多</span>
                                <span style="color: #757575; font-size: 12px;">热门</span>
                            </div>
                            
                            <img src="img/right2.png" class="a2_img" />
                        </a>
                    </li>
                </ul>
                
                <div class="container_title">
                    <span class="firsttitle">配件</span>
                    <a href="#">
                        <span class="more">热门</span>
                        <span class="more">充电器</span>
                    </a>
                </div>
                
                <ul class="sortul">
                    <li>
                        <img class="sortul_img" src="img/a1.webp"/>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a2.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a3.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a4.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a5.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <img class="sortul_img" src="img/a6.webp"/>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a7.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a8.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a9.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li id="sortul_lastli">
                        <a class="a1" href="#">
                            <div class="a1_div">
                                <span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
                                <span class="gprice">7999元</span>
                            </div>
                            
                            <img src="img/a10.webp" class="a1_img"/>
                        </a>
                        
                        <a class="a2" href="#">
                            <div class="a2_div">
                                <span  style="font-size: 16px; color: #000;">浏览更多</span>
                                <span style="color: #757575; font-size: 12px;">热门</span>
                            </div>
                            
                            <img src="img/right2.png" class="a2_img" />
                        </a>
                    </li>
                </ul>
                
                <div class="container_title">
                    <span class="firsttitle">周边</span>
                    <a href="#">
                        <span class="more">热门</span>
                        <span class="more">出行</span>
                    </a>
                </div>
                
                <ul class="sortul">
                    <li>
                        <img class="sortul_img" src="img/a1.webp"/>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a2.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a3.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a4.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a5.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <img class="sortul_img" src="img/a6.webp"/>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a7.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a8.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="simg" src="img/a9.webp" />
                            <span class="gname">小米电视4A 70英寸</span>
                            <span class="gdetail">大屏更享受</span>
                            <span class="gprice">3299元</span>
                        </a>
                    </li>
                    <li id="sortul_lastli">
                        <a class="a1" href="#">
                            <div class="a1_div">
                                <span style="" class="gname">Redmi MAX 86″ 超大屏电视</span>
                                <span class="gprice">7999元</span>
                            </div>
                            
                            <img src="img/a10.webp" class="a1_img"/>
                        </a>
                        
                        <a class="a2" href="#">
                            <div class="a2_div">
                                <span  style="font-size: 16px; color: #000;">浏览更多</span>
                                <span style="color: #757575; font-size: 12px;">热门</span>
                            </div>
                            
                            <img src="img/right2.png" class="a2_img" />
                        </a>
                    </li>
                </ul>
                
                <img src="img/adv3.webp" class="adv"/>
        </div>
    
        
    </body>
</html>

 

css 

* {
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
    color: #b0b0b0;
}

ul {
    list-style: none;
}

.items {
    width: 100%;
    height: 40px;
    background-color: #000;
}

.items_container {
    width: 1226px;
    height: 40px;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.items .items_container .items_container_ul1 {
    height: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.items .items_container .items_container_ul1 li {
    height: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.items .items_container .items_container_ul1 li a {
    font-size: 12px;
    color: #b0b0b0;
}

.items .items_container .items_container_ul1 li a:hover {
    color: #fff;
}

.items_container_ul2 {
    height: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.items_container_ul2 li {
    height: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-right: 15px;
}

.items_container_ul2 li a {
    font-size: 12px;
}

.items_container_ul2 li a:hover {
    color: #fff;
}

.container_ul2_lastli {
    width: 120px;
    height: 40px;
    background-color: #424242;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.goodsitem {
    width: 1226px;
    height: 100px;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.goodsitem .logo {
    width: 56px;
    height: 56px;
}

.goodsitem .goodsitem_container{
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.goodsitem .goodsitem_container .goodsitem_container_ul {
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.goodsitem_container_ul li {
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-right: 20px;
}

.goodsitem_container_ul li a {
    color: #000;
}

.goodsitem_container_ul li a:hover {
    color: #ff6700;
}

#searchtext {
    width: 235px;
    height: 50px;
    padding-left: 10px;
    border: 1px solid #e0e0e0;
}

#search_div {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e0e0e0;
}

#search {
    width: 25px;
    height: 25px;
    margin-right: -2px;
}

.banner {
    width: 1226px;
    height: 460px;
    background-color: lightblue;
    margin: 0px auto;
    position: relative;
}

.banner .banner_img {
    width: 1226px;
    height: 460px;
}

.banner ul {
    width: 234px;
    height: 440px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color:  rgba(105,101,101,.6);
    position: absolute;
    top: 0px;
    left: 0px;
    padding-top: 20px;
}

.banner ul li {
    width: 234px;
    height: 42px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.banner ul li a {
    width: 214px;
    height: 42px;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.banner ul li a:hover {
    background-color: #ff6700;
}

.banner ul li a img {
    width: 16px;
    height: 16px;
}

.shower {
    width: 1226px;
    height: 170px;
    margin: 0px auto;
    margin-top: 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.shower_items {
    width: 234px;
    height: 170px;
    background-color: #333333;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.shower_items li {
    width: 76px;
    height: 82px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.shower_items li a {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 12px;
}

.shower_items li a:hover {
    color: #fff;
}

.shower_items li a img {
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
}

.showerimg {
    width: 316px;
    height: 170px;
}

.container {
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.container .adv {
    width: 1226px;
    height: 120px;
    margin: 20px auto;
}

.container .container_title {
    width: 1226px;
    height: 58px;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.container .container_title .firsttitle {
    font-size: 24px;
    font-weight: 300;
}

.container .container_title .more {
    color: #000;
    margin-right: 5px;
}

.container .container_title img {
    width: 22px;
    height: 22px;
}

.container .container_title a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.goods {
    width: 1226px;
    height: 614px;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.goods ul {
    margin-left: 10px;
    height: 614px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.goods ul li {
    width: 234px;
    height: 300px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.goods ul li a {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.goods ul li a img {
    width: 160px;
    height: 160px;
}

.gname {
    color: #333;
    margin-bottom: 3px;
}

.gdetail {
    color: #b0b0b0;
    font-size: 12px;
    margin-bottom: 5px;
}

.gprice {
    color: #ff6700;
}

.sortul {
    width: 1226px;
    height: 614px;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    margin-bottom: 20px;
}

.sortul li {
    width: 234px;
    height: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #fff;
    justify-content: center;
    align-items: center;
}

.sortul li a {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.sortul li a .simg {
    width: 160px;
    height: 160px;    
}

#sortul_lastli {
    width: 234px;
    height: 300px;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}

#sortul_lastli .a1 {
    width: 234px;
    height: 143px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

#sortul_lastli .a2 {
    width: 234px;
    height: 143px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.a2 .a2_div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    margin-right: 40px;
}

    
.a1 .a1_div {
    width: 94px;
    height: 63px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.a1_img {
    width: 80px;
    height: 80px;
}

.a2_img {
    width: 48px;
    height: 48px;
}

 

HTML5——小米商城

上一篇:视频类App原型制作分享-VUE


下一篇:Photoshop为美女照片调出柔美红橙色调