2020年2月21日
四級出成績了，考了4次終於過了，哈哈。今天沒學什麼新知識，主要是練習昨天學習的定位。
一. 本節課學習目標。
- 掌握定位的應用。 重點
二. 定位練習1-小米官網1。
![在這裏插入圖片描述]()
結構圖 - 外層需要一個div，用來管理這塊區域中的所有內容。
- 圖片的大小應該和div的大小是一樣的。
- 分類列表，左箭頭，右箭頭，指示器在圖片的上層。
![在這裏插入圖片描述]()
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小米官網</title>
<!-- 外部引入 -->
<link rel="stylesheet" type="text/css" href="css/mi1.css"/>
</head>
<body>
<!-- 整體結構 -->
<div class="wrap">
<!-- 圖片 -->
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4aa0cbfad7de34618c4bebdbdeee4e1.jpg?thumb=1&w=1226&h=460&f=webp&q=90" >
<!-- 分類列表區域 (列表， 每一項)-->
<ul class="list">
<li>
<a href="">手機 電話卡 <span>></span> </a>
<!-- 當鼠標移動到li上時，顯示出右邊的遮罩層。此時要保證li和遮罩層是一個父子關係 -->
<div class="mask">
<!-- 佈局內容 -->
手機 電話卡
</div>
</li>
<li>
<a href="">電視 盒子 <span>></span> </a>
<div class="mask">
<!-- 佈局內容 -->
電視 盒子
</div>
</li>
<li>
<a href="">筆記本 顯示器 平板 <span>></span> </a>
<div class="mask">
<!-- 佈局內容 -->
筆記本 顯示器 平板
</div>
</li>
<li>
<a href="">家電 插線板 <span>></span> </a>
<div class="mask">
<!-- 佈局內容 -->
家電 插線板
</div>
</li>
<li>
<a href="">出行 穿戴 <span>></span> </a>
<div class="mask">
<!-- 佈局內容 -->
出行 穿戴
</div>
</li>
<li>
<a href="">智能 路由器 <span>></span> </a>
<div class="mask">
<!-- 佈局內容 -->
智能 路由器
</div>
</li>
<li>
<a href="">電源 配件 <span>></span> </a>
<div class="mask">
<!-- 佈局內容 -->
電源 配件
</div>
</li>
<li>
<a href="">健康 兒童 <span>></span> </a>
<div class="mask">
<!-- 佈局內容 -->
健康 兒童
</div>
</li>
<li>
<a href="">耳機 音響 <span>></span> </a>
<div class="mask">
<!-- 佈局內容 -->
耳機 音響
</div>
</li>
<li>
<a href="">生活 箱包 <span>></span></a>
<div class="mask">
<!-- 佈局內容 -->
生活 箱包
</div>
</li>
</ul>
<!-- 左箭頭 -->
<span class="left"><</span>
<!-- 右箭頭 -->
<span class="right">></span>
<!-- 指示器 - 5個點 -->
<div class="marker">
<span id="marker_first"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
CSS樣式代碼：
* {
margin: 0;
padding: 0;
}
/* 外層最大的div */
.wrap {
width: 1226px;
height: 460px;
border: 2px solid black;
/* 整塊區域水平居中,並且往下移動 */
/* 兩個值: 上下 左右 三個值:上 左右 下 */
margin: 0px auto;
margin-top: 100px;
/* 相對定位 - 保證wrap是list,right,left,marker的參照物 */
position: relative;
}
/* 圖片 */
.wrap>img {
width: 100%;
height: 100%;
}
/* 分類列表區域 */
.list {
width: 234px;
height: 420px;
background-color: rgba(105, 101, 101, 0.6);
/* 去掉無序列表的列表符號 */
list-style: none;
/* 添加上下填充 */
padding: 20px 0;
/* 絕對定位 - 相對於父元素 */
position: absolute;
/* 調整位置 - left,right,top,bottom */
left: 0;
top: 0;
}
.list>li {
/* 此時不光要調整li的高度,還要保證裏面的文字能夠垂直居中 */
line-height: 42px;
color: #fff;
font-size: 14px;
/* 把li當作子元素mask的參照物 - 因爲每一個li的位置都是不同的,但是右邊mask的位置都是一樣的,所以,li無法作爲參照物*/
/* position: relative; */
}
/* 給每一項li添加懸浮效果,懸浮之後更改每一項li的背景顏色 */
.list>li:hover {
background-color: #ff6700;
}
/* a標籤的文字顏色要單獨修改 */
/* 如果要保證li這一行都是可以點擊的,那必須要讓a標籤寬度充滿這一行 */
.list>li>a {
color: #fff;
/* 去掉下劃線 */
text-decoration: none;
/* 修改a元素的特性, 行屬性標籤是不能更改寬度的 */
/* 將a元素由行元素更改爲塊元素 */
display: block;
/* 添加左右填充 */
padding-left: 29px;
padding-right: 24px;
}
/* 讓span標籤中的箭頭,移動到最右邊 */
.list>li>a>span {
float: right;
}
/* 遮罩層 mask */
.mask {
width: 992px;
height: 460px;
background-color: #fff;
/* 絕對定位 */
position: absolute;
/* 位置調整 - left,right,top,bottom */
left: 234px;
top: 0;
/* 提升層級 */
z-index: 1000;
/* 隱藏掉 */
display: none;
/* 字體相關屬性 */
font-size: 100px;
text-align: center;
line-height: 460px;
color: rgb(255, 0, 0);
}
/* 當鼠標移動到每一行時,每一個列表項時,讓對應的右邊的內容區域顯示出來 */
.list>li:hover>.mask {
/* 顯示出來 */
display: block;
}
/* 左箭頭 span是行元素,是不能修改寬高的.*/
.left {
font-size: 30px;
width: 41px;
height: 69px;
/* 將元素設置爲行內塊元素,即可支持寬高修改 */
display: inline-block;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 69px;
color: #ccabad;
/* 加個小手 */
cursor: pointer;
/* 絕對定位 - 父元素進行位置調整*/
position: absolute;
/* 調整位置 */
left: 234px;
/* 定位之後的元素垂直居中 - top:50% 是距離父元素高度的一半*/
top: 50%;
/* 讓當前元素往上移動右箭頭區域高度的一半 50% 是當前元素高度的一半*/
transform: translateY(-34.5px);
}
/* 左箭頭懸浮效果,更改背景顏色 */
.left:hover {
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}
/* 右箭頭 */
.right {
font-size: 30px;
width: 41px;
height: 69px;
/* 將元素設置爲行內塊元素,即可支持寬高修改 */
display: inline-block;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 69px;
color: #ccabad;
/* 加個小手 */
cursor: pointer;
/* 絕對定位 - 父元素進行位置調整*/
position: absolute;
/* 調整位置 */
right: 0;
/* 定位之後的元素垂直居中 - top:50% 是距離父元素高度的一半*/
top: 50%;
/* 讓當前元素往上移動右箭頭區域高度的一半 50% 是當前元素高度的一半*/
transform: translateY(-34.5px);
}
/* 右箭頭懸浮效果,更改背景顏色 */
.right:hover {
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}
/* 指示器 - 5個點 */
.marker {
/* 假數據 */
/* width: 100px;
height: 10px; */
/* background-color: yellow; */
/* 絕對定位 - 相對於父元素位置調整 */
position: absolute;
/* 調整位置 */
right: 30px;
bottom: 25px;
/* 字體大小爲0 - 解決子元素span之間的水平間距問題 */
font-size: 0;
text-align: center;
}
/* span和a標籤是一樣的,都是行屬性標籤,無法設置寬高 */
.marker>span {
/* 更改寬高 */
width: 6px;
height: 6px;
/* 行元素 - 行內塊元素 */
display: inline-block;
background-color: rgba(0, 0, 0, 0.4);
/* 設置邊框 2px */
border: 2px solid rgba(255, 255, 255, 0.4);
/* 正方形畫成一個圓形 半徑 = (width 6px + border 4px) / 2 */
border-radius: 5px;
/*
調間距兩種做法
1.調一個方向上的.
2.設置兩個方向的,元素中間的間距是兩個元素左右間距的和.
區別:
在於元素居中上.
*/
/* margin-left: 8px; */
margin: 0 4px;
}
/* 將第一個點設置爲選中狀態 */
#marker_first {
background-color: rgba(255, 255, 255, 0.4);
/* 修改邊框顏色 */
border-color: rgba(0, 0, 0, 0.4);
}
/* 給span添加懸浮效果,懸浮上之後更改背景顏色和邊框顏色 */
.marker>span:hover {
background-color: rgba(255, 255, 255, 0.4);
/* 修改邊框顏色 */
border-color: rgba(0, 0, 0, 0.4);
}