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> | </span> </li> <li> <a href="#"> <span>MIUI</span> </a> <span> | </span> </li> <li> <a href="#"> <span>loT</span> </a> <span> | </span> </li> <li> <a href="#"> <span>云服务</span> </a> <span> | </span> </li> <li> <a href="#"> <span>天星科技</span> </a> <span> | </span> </li> <li> <a href="#"> <span>有品</span> </a> <span> | </span> </li> <li> <a href="#"> <span>小爱开放平台</span> </a> <span> | </span> </li> <li> <a href="#"> <span>企业团购</span> </a> <span> | </span> </li> <li> <a href="#"> <span>资质证照</span> </a> <span> | </span> </li> <li> <a href="#"> <span>协议规则</span> </a> <span> | </span> </li> <li> <a href="#"> <span>下载app</span> </a> <span> | </span> </li> <li> <a href="#"> <span>智能生活</span> </a> <span> | </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; }
原文：https://www.cnblogs.com/remix777/p/15270543.html