時間：2023-04-24 13:15:01 | 來源：網(wǎng)站運營
時間：2023-04-24 13:15:01 來源：網(wǎng)站運營
教你用html和css仿制小米官網(wǎng)頁面?。?h2 data-first-child>一、使用的工具？博主使用的是Visual Studio Code。這個是真的方便啊，體型小不說，好用的插件還不少！贊一個。不過為了之后的后端學(xué)習(xí)，我開始慢慢轉(zhuǎn)向用IDEA 了，這個軟件使用起來也是真的不賴啊（想要的小伙伴可以評論區(qū)找我哦，我會經(jīng)?？茨銈兊脑u論的）
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米商城(假的)-小米10Pro</title> <link rel="stylesheet" href="style.css"></head><body> <!-- 奔跑的熊 --> <div class="bear"> <div class="xiaopingzi">小瓶子出品</div> <div class="bear_box"> </div> </div> <!-- 網(wǎng)頁頭部開始 --> <div class="ssp"> <a href="none.html"> <div class="banner1 clearfix"> <a href="none.html"> <img src="tupian/banner1.jpg" alt=""> </a> </div> </a> <!-- 導(dǎo)航欄開始 --> <div class="nav clearfix"> <div class="w clearfix"> <ul> <li><a href="https://www.mi.com/index.html">小米商城</a></li> <li><a href="https://www.miui.com/">MiUi</a></li> <li><a href="https://iot.mi.com/">loT</a></li> <li><a href="https://i.mi.com/">云服務(wù)</a></li> <li><a href="https://airstar.com/home">天星科技</a></li> <li><a href="https://youpin.mi.com/">有品</a></li> <li><a href="https://xiaoai.mi.com/">小愛開放平臺</a></li> <li><a href="https://qiye.mi.com/">企業(yè)團購</a></li> <li><a href="https://www.mi.com/aptitude/list/?id=41">資質(zhì)證照</a></li> <li><a href="https://www.mi.com/aptitude/list/">協(xié)議規(guī)則</a></li> <li><a href="https://www.mi.com/appdownload/">下載app</a></li> <li><a href="https://xiaomishare.mi.com/?from=micom">智能生活</a></li> <li><a href="none.html">Select Location</a></li> </ul> <div> <ul> <li><a href="none.html">登陸</a></li> <li><a href="none.html">注冊</a></li> <li><a href="none.html">通知消息</a></li> <span> <a href="https://www.mi.com/buy/cart" class="iconfont">? 購物車(0)</a> </span> </ul> </div> </div> </div>css代碼如下（部分示例）：* { padding: 0; margin: 0; } li { list-style: none; } a { text-decoration: none; } em, i { font-style: normal; padding: 0; margin: 0; } @keyframes bear { 0% {} 100% { background-position: -1280px 0; } } .bear { position: fixed; top: 400px; left: 0; } /*.xiaopingzi { background-color: rgb(11, 205, 240); color: rgb(253, 78, 47); font-size: 18px; font-family: "YouYuan"; text-align: center; }*/ /* ********************* */ .xiaopingzi { background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #f3150d 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #cc0000 70%, #CC00FF 80%, #66FFFF 90%, blue 100%); -webkit-text-fill-color: transparent; /* 將字體設(shè)置成透明色 */ -webkit-background-clip: text; /* 裁剪背景圖，使文字作為裁剪區(qū)域向外裁剪 */ -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s linear infinite; font-size: 20px; text-align: center; } @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } /* ************************** */ .bear_box { width: 160px; height: 80px; background: url(tupian/百度瀏覽器奔跑的熊bear-25676f9.png) no-repeat; background-color: rgb(182, 58, 58); animation: bear 0.8s steps(8) infinite; } @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?bkblej'); src: url('fonts/icomoon.eot?bkblej#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?bkblej') format('truetype'), url('fonts/icomoon.woff?bkblej') format('woff'), url('fonts/icomoon.svg?bkblej#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } input { outline: none; } .w { width: 1226px; margin: 0 auto; /* background-color: rgb(204, 206, 105); */ } .clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0; } .clearfix { *zoom: 1; }因為代碼有點多，全部上傳后加載太慢，會卡死。所以想要源碼的小伙伴們也請在評論區(qū)留言吧！看到后我會打包發(fā)給你的。關(guān)鍵詞：小米,仿制
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
