目錄
前言
一、首頁、登錄頁面整體布局
1. 首頁布局
2. 登錄頁面布局
二、頁面具體效果實作分析
1. 首頁head部分下拉串列
經過 下載 app時 出現 二維碼
3. 登錄界面中 登錄 與 注冊內容切換
總結
前言
這次的頁面與以往的不同，因為這次的頁面是由 html+css+JavaScript 三者組合而成的，從一開始學習的時候，其實就初步了解了Javascript的作用，當時就覺得它能使頁面“動”起來，非常的有趣，現在接觸下來，確實如此，有了Javascript就能做許多頁面的互動效果，迅速提升用戶體驗感！就拿我剛做完的一個專案——小米官網，帶你們看看JS所帶來的高級感~
一、首頁、登錄頁面整體布局
1. 首頁布局
此首頁我先將其大體分為 head 和 nav 兩大板塊，其次再將nav 拆分為了頭（nav-head）和身體（nav-body）兩部分，這樣按照標準流的上下排列就完成了，剩下的每部分中的內容就要使用浮動或定位將其分為左右在一行內顯示了，
2. 登錄頁面布局
與首頁相比，登錄頁面的布局很明顯是先左右 后上下，前面講到要左右布局，可以用浮動或定位來做，因為左邊的圖片是固定著不隨滾動條的滾動而滾動的，所以我們就用定位里面的固定定位來使其在左側，右邊的內容很明顯不能被左邊的圖片擋住，所以可以給右邊內容套一個大盒子，再給這個大盒子設定一個 左外邊距（margin-left）或 左內邊距（padding-left），我的做法是給讓大盒子的寬度和瀏覽器一樣寬，并給它設定了一個左內邊距，這樣這個盒子里面的內容都不會被左邊圖片擋住，剩下的就是標準流的上下布局，和首頁一樣就不多說了，
二、頁面具體效果實作分析
1. 首頁head部分下拉串列
經過 下載 app時 出現 二維碼
在沒學JS之前，滑鼠經過實作某種效果的方式 是通過css給要經過的目標加上:hover，但是這個方法能力有限，它只能在滑鼠經過的時候改變經過目標的樣式而不能改變內容，這里我用的是JS方法來實作滑鼠經過出現二維碼的效果，
案例分析：
- 在JS中獲取 下載app 、二維碼 這兩個標簽
- 給獲取到的下載app標簽添加 mouseenter 滑鼠經過事件
- 在事件函式中寫入要實作的效果，即：二維碼標簽顯示
代碼html部分：
<ul class="head-left">
<li>小米商城 <span>|</span></li>
<li> MIUI <span>|</span></li>
<li>IoT <span>|</span></li>
<li>云服務 <span>|</span></li>
<li>天星數科 <span>|</span></li>
<li>有品 <span>|</span></li>
<li>小愛開放平臺 <span>|</span></li>
<li>企業團購 <span>|</span></li>
<li>資質證照 <span>|</span></li>
<li>協議規則 <span>|</span></li>
<li class="download">下載app <span>|</span>
<div class="sjx"></div>
<div class="app">
<img src="images/xiaomi-android.png" alt="">
<p>小米商城APP</p>
</div>
</li>
<li>智能生活 <span>|</span></li>
<li>Select Location </li>
</ul>代碼css部分：
header .head-left {
float: left;
width: 65%;
height: 40px;
line-height: 40px;
padding-left: 140px;
}
header .head-left li,
header .head-right li {
float: left;
color: #b0b0b0;
font-size: 12px;
cursor: pointer;
}
header .head-left li:hover {
color: white;
}
header .head-left li span,
header .head-right li span {
margin: 0 5px;
color: #3f423c;
}
.app {
overflow: hidden;
position: absolute;
top: 42px;
left: 703px;
width: 145px;
height: 0;
text-align: center;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
transition: height 0.3s;
z-index: 1;
}
.app p {
color: black;
font-size: 16px;
margin-top: -18px;
}
.appafter {
height: 150px;
}
.sjx {
display: none;
position: absolute;
top: 20px;
left: 765px;
width: 0;
height: 0;
border: 10px solid transparent;
border-color: transparent transparent white transparent;
}
.download:hover .sjx {
display: block;
}
.app img {
width: 100px;
height: 100px;
margin-top: 15px;
}代碼js部分：
var download = document.querySelector('.download');
var app = document.querySelector('.app');
download.addEventListener('mouseenter', function () {
app.classList.add('appafter');
})
download.addEventListener('mouseleave', function () {
app.classList.remove('appafter');
})
總結：其實如果只是單單實作一個二維碼標簽的顯示，只需要在滑鼠經過后 二維碼標簽.style.display = 'block';即可，但是這樣視覺效果不是很好，二維碼標簽是突然出現，突然消失的，而我這里用的方法是，先將二維碼標簽的 高度設定為 0 ，當滑鼠經過的時候 高度就變為150px，再給 高度變化的這個盒子加一個 transition: all 0.3s; 的過渡效果，這樣當滑鼠經過的時候二維碼標簽就有一個從無到有的下拉程序，就好比放下簾子一樣，用戶體驗感瞬間上升！
但是這里千萬要注意一個坑！如果你設定了高度的變化就不需要再設定 display:none 和 display:block了，否則下拉的效果就看不到了，因為這個屬性是直接讓元素出現和消失，是瞬間的事情，根本來不及看到影片效果，博主在做的時候就是犯了這個錯誤，導致效果出不來，折騰了很久萬萬沒想到啊！居然是display的問題！知道真相的我好崩潰~希望看了本篇博客的同學不會再犯同樣的錯誤~
2. 首頁 nav-head 部分手機下拉串列的實作
案例分析：
滑鼠經過 每個 li 的時候就出現對應的 手機下拉串列，我相信你們聽了我所描述的實作效果就可以知道，這里所用的方法和 剛才做的 二維碼的出現效果是一模一樣的！所以，講過的內容就不再說了，說一說 沒講到的，比如，像一開始看不到，滑鼠經過才出現的內容是用什么做的呢？難道是定位？？對！沒錯！就是定位！ 那又問，難道是相對定位嗎？錯！當然是絕對定位了！為什么呢，這就要復習前面的知識了，因為絕對定位不占用位置，它的移動或是顯示隱藏不會影響到別的元素，就像一個看得到摸不到的物體，所以大家知道絕對定位的好處了把，接下來再來扣一扣這部分的細節，當你滑鼠經過每一個 li 再離開的時候，手機的下拉串列是正常拉出和收入的，但是當你要從第一個 li 直接移動到第二個 li 的時候，我們肉眼能看到的是只有內容發生了變化，而沒有下拉的效果，所以這種情況下我們就要取消影片效果，嗯對就是這樣，代碼展示！
代碼html部分：
<div class="nav-head">
<img src="images/logo-mi2.png" alt="" class="mi">
<ul class="nav-ul">
<li class='nvl'> <a href="">小米手機</a>
<div class="nav-item1">
<ul class='nav-phone'>
<li>
<img src="images/Mi_10pro.jpg" alt="">
<p>Xiaomi MIX 4</p>
<p>4999元起</p>
</li>
<li>
<img src="images/Mi_cc9e.png" alt="">
<p>小米MIX FOLD</p>
<p>9999元起</p>
</li>
<li>
<img src="images/Mi_cc9定制.png" alt="">
<p>小米11 UItra</p>
<p>5499元起</p>
</li>
<li>
<img src="images/Micc9.png" alt="">
<p>小米11 Pro</p>
<p>4499元起</p>
</li>
<li>
<img src="images/RedMi_Note8.webp" alt="">
<p>小米11 青春版</p>
<p>2099元起</p>
</li>
<li>
<img src="images/RedMiK30.webp" alt="">
<p>小米10S</p>
<p>2999元起</p>
</li>
</ul>
</div>
</li>
<li class='nvl'> <a href="">Redmi 紅米</a>
<div class="nav-item1">
<ul class='nav-phone'>
<li>
<img src="images/Micc9.png" alt="">
<p>Xiaomi MIX 4</p>
<p>4999元起</p>
</li>
<li>
<img src="images/Mi_cc9定制.png" alt="">
<p>小米MIX FOLD</p>
<p>9999元起</p>
</li>
<li>
<img src="images/RedMi_K30.webp" alt="">
<p>小米11 UItra</p>
<p>5499元起</p>
</li>
<li>
<img src="images/RedMi__8A.webp" alt="">
<p>小米11 Pro</p>
<p>4499元起</p>
</li>
<li>
<img src="images/RedMi_Note8.webp" alt="">
<p>小米11 青春版</p>
<p>2099元起</p>
</li>
<li>
<img src="images/Mi_cc9e.png" alt="">
<p>小米10S</p>
<p>2999元起</p>
</li>
</ul>
</div>
</li>
<li class='nvl'> <a href="">電視</a>
<div class="nav-item1">
<ul class='nav-phone'>
<li>
<img src="images/RedMi__8A.webp" alt="">
<p>Xiaomi MIX 4</p>
<p>4999元起</p>
</li>
<li>
<img src="images/RedMi_K30.webp" alt="">
<p>小米MIX FOLD</p>
<p>9999元起</p>
</li>
<li>
<img src="images/RedMi_Note8.webp" alt="">
<p>小米11 UItra</p>
<p>5499元起</p>
</li>
<li>
<img src="images/RedMiK30.webp" alt="">
<p>小米11 Pro</p>
<p>4499元起</p>
</li>
<li>
<img src="images/RedMiK30_5G.webp" alt="">
<p>小米11 青春版</p>
<p>2099元起</p>
</li>
<li>
<img src="images/RedMiK30_Pro聚焦版.webp" alt="">
<p>小米10S</p>
<p>2999元起</p>
</li>
</ul>
</div>
</li>
<li class='nvl'> <a href="">筆記本</a>
<div class="nav-item1">
<ul class='nav-phone'>
<li>
<img src="images/Mi_10pro.jpg" alt="">
<p>Xiaomi MIX 4</p>
<p>4999元起</p>
</li>
<li>
<img src="images/Mi_cc9e.png" alt="">
<p>小米MIX FOLD</p>
<p>9999元起</p>
</li>
<li>
<img src="images/Mi_cc9定制.png" alt="">
<p>小米11 UItra</p>
<p>5499元起</p>
</li>
<li>
<img src="images/Micc9.png" alt="">
<p>小米11 Pro</p>
<p>4499元起</p>
</li>
<li>
<img src="images/RedMi_Note8.webp" alt="">
<p>小米11 青春版</p>
<p>2099元起</p>
</li>
<li>
<img src="images/RedMiK30.webp" alt="">
<p>小米10S</p>
<p>2999元起</p>
</li>
</ul>
</div>
</li>
<li class='nvl'> <a href="">平板</a>
<div class="nav-item1">
<ul class='nav-phone'>
<li>
<img src="images/RedMi__8A.webp" alt="">
<p>Xiaomi MIX 4</p>
<p>4999元起</p>
</li>
<li>
<img src="images/RedMi_K30.webp" alt="">
<p>小米MIX FOLD</p>
<p>9999元起</p>
</li>
<li>
<img src="images/RedMi_Note8.webp" alt="">
<p>小米11 UItra</p>
<p>5499元起</p>
</li>
<li>
<img src="images/RedMiK30.webp" alt="">
<p>小米11 Pro</p>
<p>4499元起</p>
</li>
<li>
<img src="images/RedMiK30_5G.webp" alt="">
<p>小米11 青春版</p>
<p>2099元起</p>
</li>
<li>
<img src="images/RedMiK30_Pro聚焦版.webp" alt="">
<p>小米10S</p>
<p>2999元起</p>
</li>
</ul>
</div>
</li>
<li class='nvl'> <a href="">家電</a>
<div class="nav-item1">
<ul class='nav-phone'>
<li>
<img src="images/Mi_10pro.jpg" alt="">
<p>Xiaomi MIX 4</p>
<p>4999元起</p>
</li>
<li>
<img src="images/Mi_cc9e.png" alt="">
<p>小米MIX FOLD</p>
<p>9999元起</p>
</li>
<li>
<img src="images/Mi_cc9定制.png" alt="">
<p>小米11 UItra</p>
<p>5499元起</p>
</li>
<li>
<img src="images/Micc9.png" alt="">
<p>小米11 Pro</p>
<p>4499元起</p>
</li>
<li>
<img src="images/RedMi_Note8.webp" alt="">
<p>小米11 青春版</p>
<p>2099元起</p>
</li>
<li>
<img src="images/RedMiK30.webp" alt="">
<p>小米10S</p>
<p>2999元起</p>
</li>
</ul>
</div>
</li>
<li class='nvl'> <a href="">路由器</a>
<div class="nav-item1">
<ul class='nav-phone'>
<li>
<img src="images/RedMi__8A.webp" alt="">
<p>Xiaomi MIX 4</p>
<p>4999元起</p>
</li>
<li>
<img src="images/RedMi_K30.webp" alt="">
<p>小米MIX FOLD</p>
<p>9999元起</p>
</li>
<li>
<img src="images/RedMi_Note8.webp" alt="">
<p>小米11 UItra</p>
<p>5499元起</p>
</li>
<li>
<img src="images/RedMiK30.webp" alt="">
<p>小米11 Pro</p>
<p>4499元起</p>
</li>
<li>
<img src="images/RedMiK30_5G.webp" alt="">
<p>小米11 青春版</p>
<p>2099元起</p>
</li>
<li>
<img src="images/RedMiK30_Pro聚焦版.webp" alt="">
<p>小米10S</p>
<p>2999元起</p>
</li>
</ul>
</div>
</li>
<li> <a href="">智能硬體</a></li>
<li > <a href="">服務</a></li>
<li> <a href="">社區</a></li>
</ul>代碼 css部分：
.nav-head {
height: 115px;
padding-top: 28px;
}
nav img {
float: left;
width: 50px;
height: 50px;
}
nav ul {
float: left;
padding-top: 20px;
margin-left: 200px;
}
nav ul li {
float: left;
padding-right: 18px;
height: 67px;
}
nav ul li a {
color: #373535;
}
nav ul li:hover a {
color: #ff6700;
}
.nav-item1 {
overflow: hidden;
position: absolute;
background-color: white;
top: 115px;
left: 0;
width: 100%;
height: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
transition: height 0.3s;
z-index: 3;
}
.nav-item1-after {
border-top: 1px solid #eaeaea;
height: 200px;
}
nav .nav-phone li {
position: relative;
float: left;
width: 150px;
text-align: center;
margin-left: 5px;
}
nav .nav-phone li:nth-child(-n+5)::after {
content: '';
position: absolute;
top: 3px;
right: -15px;
width: 1px;
height: 100px;
border-right: 2px solid #e1e1e1;
z-index: 4;
}
nav .nav-phone li img {
width: 150px;
height: 110px;
margin-bottom: 15px;
}
nav .nav-phone li p {
font-size: 12px;
color: #767676;
}
nav .nav-phone li p:nth-of-type(2) {
color: #ff8838;
}代碼js部分：
var navItem1 = document.querySelectorAll('.nav-item1');
var navUl = document.querySelectorAll('.nvl');
var flag1 = true;
for (var i = 0; i < navUl.length; i++) {
navUl[i].setAttribute('data-index', i);
navUl[i].addEventListener('mouseenter', function () {
index = this.getAttribute('data-index');
if (flag1) {
navItem1[index].style.transition = 'height 0.3s';
navItem1[index].classList.add('nav-item1-after');
} else {
navItem1[index].style.transition = 'none';
navItem1[index].classList.add('nav-item1-after');
}
})
navUl[i].addEventListener('mouseleave', function (e) {
if (e.pageY < 93 || e.pageY > 108) {
navItem1[index].style.transition = 'height 0.3s';
navItem1[index].classList.remove('nav-item1-after');
flag1 = true;
} else {
navItem1[index].style.transition = 'none';
navItem1[index].classList.remove('nav-item1-after');
flag1 = false;
}
})
}3. 登錄界面中 登錄 與 注冊內容切換
案例分析：
當我們點擊登錄的時候下面切換的內容就是登錄頁面內容，同理，當我們點注冊的時候下面內容就會切換成注冊頁面內容，這時候就有人問了，那我可以先做完登錄頁面的內容再復制拷貝一份把里面的內容改成注冊頁面的，當我點擊對應的選項就鏈接到對應的內容，對，這確實是一個辦法，但是，還有一個既簡單又能加影片的方式！想不想知道？想知道就要認真聽了！這個辦法的實作就又又又又又要請我們的老朋友 絕對定位 出馬了，我們先用一個大盒子（要絕對定位），里面裝兩個子盒子，這兩個子盒子相比大家都知道是誰了，就是我們的大孩子（登錄界面）和老二（注冊界面），如下圖：
黑色邊框的就是我們要定位的盒子啦， 在兩個子盒子中分別寫好對應的內容，紅色邊框中的區域代表我們當前的可視區域，默認一開始顯示的是登錄界面內容，最最最重要的一步來了！這就要請出我們今天的主人公 JS了，通過JS來實作，當我們點擊注冊的時候，讓黑色的大盒子向左邊移動紅色盒子寬度的距離，這樣是不是就把注冊界面的內容移動到紅色框中了？！如果點了登錄，那就再往回移就行了（left='0'），那有人就問，那登錄界面雖然移出去了但還是能看到啊，害！這還不簡單，給紅色盒子加個 overflow:hidden 不就行了！如果你還想實作滑動的效果，那就給黑邊框的盒子加個 transition: all, 0.3s; 這種方法就不用再復制一遍代碼了，是不是很簡單！上代碼！
代碼html部分：
<section>
<form action="#">
<div class="ewm">
<p>
?
/* 這里用了字體圖示，如果沒有對應檔案夾是顯示不出來的,所以顯示不出來莫慌 */
</p>
<div class="text">
掃碼登錄
</div>
</div>
<div class="fhd">
<a href="#"> 登錄 <span></span></a>
<a href="#"> 注冊<span></span></a>
</div>
<div class="center">
<div class="item1">
<input type="text" placeholder="郵箱/手機號碼/小米ID" id="uname">
<br>
<input type="password" placeholder="密碼" id="pass">
<img src="images/close.png" alt="" class="close">
<br>
<input type="submit" value="登錄" class="sub">
<br>
<div class="fft">
<span>忘記密碼？</span>
<span>手機號登錄</span>
</div>
<div class="ffoot">
<p>其他方式登錄</p>
<ul>
<li>
<img src="images/share3.png" alt="">
</li>
<li>
<img src="images/share2.png" alt="">
</li>
<li>
<img src="images/share4.png" alt="">
</li>
<li>
<img src="images/share1.png" alt="">
</li>
</ul>
</div>
</div>
<div class="item2">
<input type="text" placeholder="國家/地區">
<br>
<input type="text" placeholder="國家碼" id="gjm">
<br>
<input type="text" placeholder="短信驗證碼">
<p class="info">獲取驗證碼</p>
<br>
<input type="submit" value="注冊" class="sub">
<br>
<div class="fft">
<span>收不到驗證碼？</span>
</div>
<input type="checkbox" class='check'>
<span class="xy">已閱讀并同意小米賬號 <a>用戶協議</a> 和 <a>隱私政策</a></span>
<br>
<div class="ffoot ffoot2">
<p>其他方式登錄</p>
<ul>
<li>
<img src="images/share3.png" alt="">
</li>
<li>
<img src="images/share2.png" alt="">
</li>
<li>
<img src="images/share4.png" alt="">
</li>
<li>
<img src="images/share1.png" alt="">
</li>
</ul>
</div>
</div>
</div>
</form>
</section>代碼 css部分：
.fhd {
margin-bottom: 30px;
}
.fhd a {
display: inline-block;
position: relative;
font-size: 20px;
margin-right: 10px;
}
.fhd a:nth-child(1) {
color: black;
}
.fhd a span {
position: absolute;
bottom: -10px;
left: -1px;
width: 40px;
height: 5px;
border-radius: 5px;
background-color: #ff5c00;
}
.fhd a:nth-child(2) span {
display: none;
}
form input {
width: 360px;
height: 50px;
border: none;
background-color: #f9f9f9;
margin-bottom: 15px;
color: black;
padding-left: 15px;
border-radius: 5px;
}
#uname.change::placeholder {
position: absolute;
top: 6px;
font-size: 12px;
transition: all .3s;
}
form input::placeholder {
color: #b0b0b0;
}
#uname.color::placeholder {
color: #f04645;
}
section {
padding-top: 70px;
}
.close {
position: absolute;
top: 75px;
left: 320px;
width: 30px;
height: 30px;
cursor: pointer;
}
.sub {
background-color: #ffbe99;
color: #ffffff;
font-size: 16px;
cursor: pointer;
}
.fft span {
font-size: 13px;
color: #ff792e;
cursor: pointer;
}
.fft span:nth-child(2) {
float: right;
}
.ffoot {
margin-top: 105px;
text-align: center;
}
.ffoot p {
font-size: 12px;
color: #afafaf;
cursor: pointer;
}
.ffoot ul {
margin-left: 66px;
}
.ffoot ul li {
float: left;
width: 40px;
height: 40px;
border-radius: 20px;
overflow: hidden;
background-color: pink;
margin-left: 15px;
margin-top: 15px;
}
.ffoot ul img {
width: 100%;
height: 100%;
}
.footer {
position:absolute;
bottom: 30px;
left: 730px;
font-size: 12px;
color: #b5b5b5;
}
/* 注冊部分 */
.center {
position: absolute;
top: 115px;
left: 43px;
width: 900px;
transition: all .3s;
}
div[class^= "item" ] {
float: left;
}
.center .item1 {
margin-right: 50px;
}
.info {
position: absolute;
top: 147px;
right: 142px;
font-size: 12px;
color: #fc9054;
cursor: pointer;
}
.check {
margin-top: 10px;
width: 15px;
height: 15px;
vertical-align:bottom;
margin-bottom: 0;
}
.xy {
font-size: 12px;
color: #bbbbbb;
}
.xy a {
color: black;
cursor: pointer;
}
.ffoot2 {
margin-top: 18px;
}代碼js部分：
var center = document.querySelector('.center');
var fhd = document.querySelector('.fhd').querySelectorAll('a');
var fhdSpan = document.querySelector('.fhd').querySelectorAll('span');
fhd[0].addEventListener('click', function () {
center.style.left = '43px';
this.style.color = 'black';
fhd[1].style.color = '#c0c0c0';
fhdSpan[0].style.display = 'block';
fhdSpan[1].style.display = 'none';
})
fhd[1].addEventListener('click', function () {
center.style.left = '-366px';
this.style.color = 'black';
fhd[0].style.color = '#c0c0c0';
fhdSpan[1].style.display = 'block';
fhdSpan[0].style.display = 'none';
})總結
通過這個頁面的制作，其實大部分內容所用的方法都是差不多的，如下拉串列效果，唯一不同的就是細節可能要增增減減 ，相信大家看了我所展示的每部分的代碼，可以發現，JS的內容永遠是最少的，所以，大家不用怕JS很難，很復雜，只要理解了邏輯概念，只需要寫幾句簡單的代碼就可以實作有趣的頁面互動效果！還不快快學起來~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305220.html
標籤：其他
上一篇：【爆肝推薦】手摸手帶你做后臺管理專案（第二章）登陸和用戶管理
下一篇：TensorFlow 從入門到精通（8）—— 模型保存與恢復以及TensorFlow游樂場、Tensorboard