Html——小米商城网页实战（一）
生活随笔
收集整理的這篇文章主要介紹了
Html——小米商城网页实战（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
適合新手的小米商城的純html網頁項目
小米官網：https://www.mi.com/?masid=2701.0103
官網效果圖如下：
本文針對于上手前端的新手小白，僅供參考。在看到小米官網之后，如何模擬出官網的效果是我們第一步要思考的問題，那么學過了網頁布局之后，我們將整個網頁分為以下的幾個部分：最上面的標題欄、導航欄、內容區、四個分欄的展示區以及最下面的新品展示區。本文完成第一部分內容——標題欄。
可以很清晰的看出，最上面的標題欄分為左右兩部分。
剖析：標題欄中存在的難點是下載app和購物車兩個標題的hover效果。
下面的代碼展示的是基礎的分區以及第一部分的效果（可能某些元素的大小與官網不完全相同，只適合新手練手）。
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title小米商城官網</title><link rel="stylesheet" href="./css/all.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/title.css"><style>.nav-bar {height: 100px;background-color: yellow;}.content {position: relative;}.content-left {float: left;background-color: yellowgreen;width: 234px;height: 460px;}.content-right {float: right;width: 992px;height: 460px;background-color: #999;}.info {height: 170px;width: 1226px;background-color: purple;margin-top: 20px;position: absolute;top: 600px;}.bottom {margin-top: 700px;height:120px;}i {margin-right: 3px;font-size: 16px;}/* 將頁面分成五個部分來完成,，先按照不同的分區將頁面分開，完成頁面布局，然后分層次完成其中的內容 */</style> </head> <body><!-- 設置外部容器 --><div class="wrapper"><!-- 1. 設置最上面的titile --><div class="title clearfix"><ul class="title-left"><li><a href="javascript:;">小米商城</a><line>|</line></li><li><a href="javascript:;">MIUI</a><line>|</line></li><li><a href="javascript:;">loT</a><line>|</line></li><li><a href="javascript:;">云服務</a><line>|</line></li><li><a href="javascript:;"> 天星數科</a><line>|</line></li><li><a href="javascript:;">有品</a><line>|</line></li><li><a href="javascript:;">小愛開放平臺</a><line>|</line></li><li><a href="javascript:;">企業團購</a><line>|</line></li><li><a href="javascript:;">資質證照</a><line>|</line></li><li><a href="javascript:;">協議規則</a><line>|</line></li><li><a href="javascript:;">下載app <i class="fas fa-caret-up"></i></a><line>|</line><div class="QRcode"><div class="QRcode-img"><img src="./img/QR.jpg" alt="" width="85px" height="85px"><span>小米商城APP</span></div></div></li><li><a href="javascript:;">智能生活</a><line>|</line></li><li><a href="javascript:;">Select Location</a><line>|</line></li></ul><ul class="title-right"><li><i class="fas fa-shopping-cart"></i>購物車（0）<div class="shop"><div style="height: 30px; background-color: #fff;"></div>購物車中還沒有商品，趕緊選購吧！</div></li><li><a href="javascript:;">消息通知</a><line>|</line></li><li><a href="javascript:;">注冊</a><line>|</line></li><li><a href="javascript:;">登錄</a><line>|</line></li></ul></div><!-- 2. 設置導航條 --><div class="nav-bar"></div><!-- 3. 設置內容區 ，其中內容區分為左右兩個部分--><div class="content"><div class="content-left"></div><div class="content-right"></div></div><!-- 4. 設置信息部分 --><div class="info"></div><!-- 5.設置最下面的圖片區域 --><div class="bottom"><img src="./img/4.webp" alt=""></div></div> </body> </html>base.css
body {width: 100%;height:100%;margin:0;padding:0;font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif; }li {list-style: none; }a {text-decoration: none; }.wrapper {width: 1226px;margin:0 auto;background-color: red; }.clearfix::before, .clearfix::after {content: '';display: table;clear:both; } .title {height: 40px;background-color: #333;font-size: 12px;z-index: 2;position: relative; }.title li {list-style: none;display: block;top:13px }.title-left li:nth-child(1) {margin-left: -35px; }line {margin: 0 3.6px;color: #424242;margin-top: 2px; }.title-left li{float: left;/* margin-right: 10px; */ }.title-right li{float: right;/* margin-right: 10px; */ }.title-right li:nth-child(1) {width: 120px;position: relative;line-height: 40px;top:-12px;height: 40px;background-color:#404040;text-align: center; }.title-right li:nth-child(1):hover {background-color: #fff;color: #ff6700; }.QRcode{width: 124px;height: 120px;visibility: hidden;display: block; background-color: #fff;box-shadow:0 0 1px rgb(173, 171, 171);font-size: 14px;color:#333;position: absolute;left: 517px;top:30px;text-align: center; }.title-left li:nth-child(11) i {display: block;position: absolute;top: 30px;left: 574px;color: #fff;visibility: hidden; }.title-left li:nth-child(11):hover i {visibility: visible; }.title-left li:nth-child(11):hover .QRcode{width: 124px;height: 155px;background-color: #fff;visibility: visible;text-align: center;border: none;position: absolute;top: 40px; }.QRcode-img img{position: relative;top: 15px;left: 20px;display: block; }.QRcode-img span {position: relative;top: 25px;color: #333; }.title-right li:nth-child(1) .shop{visibility: hidden;width: 320px;background-color: #fff;display: block;height: 100px;top: 40px;right: 0px;box-shadow:0 0 1px rgb(173, 171, 171);font-size: 14px;color:#fff; }.title-right li:nth-child(1):hover .shop{visibility: visible;width: 320px;display: block;background-color: #fff;position: absolute;height: 100px;top: 40px;right: 0px;box-shadow:0 0 1px rgb(173, 171, 171);font-size: 14px;color: #b0b0b0;font-size: 14px; }.title li {color: #b0b0b0; }.title li a{color: #b0b0b0; }.title li a:hover{color: #fff; }實現的效果圖：
總結
以上是生活随笔為你收集整理的Html——小米商城网页实战（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何开始DDD(完)
- 下一篇： java同时满足语句_关于控制语句,下列