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);
}