前端学习-day6

TSyyds
107 阅读6分钟

定位练习

1. 二级菜单

第一步，设置一级菜单内容及样式

HTML文件

<body>
    <header class="header">
        <ul class="topnav clearfix">
            <li><a href="">新闻</a></li>
            <li><a href="">财经</a></li>
            <li><a href="">科技</a></li>
            <li><a href="">能源</a></li>
            <li><a href="">生活</a></li>
            <li><a href="">风景</a></li>
        </ul>
    </header>
</body>
</html>

CSS文件-第一步

/* 解决高度坍塌 */
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
/* 设置一级菜单格式 */
.header{
    background: lightblue;
    color: black;
    height: 40px;
    line-height: 40px;
    /* line-height与height的值相等（40px），文本上下居中 */
}
/* 选中主topnav下的所有li子元素 */
.header .topnav>li{
    float: left;/* 将li设置为左浮动 */
    margin: 0 20px;
    background: red;/* 添加背景颜色方便观察效果，最终删除 */
    padding: 0 10px;
}

第二步，设置二级菜单内容及样式

HTML文件

<li>
    <a href="">科技</a>
    <div class="submenu">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
    </div>
</li>

出现问题1：

二级菜单01.jpg

截取 CSS文件-第一步 中的片段
.header .topnav>li{
    float: left;
    margin: 0 20px;
    background: red;
    padding: 0 10px;/* 设置左右内边距为10px，但未设置宽度，即宽度为默认值auto */
}

浮动元素的宽度为auto时表示宽度适应内容，内容较多时，宽度被撑开，导致显示出现问题

解决办法1：

将设置padding改为设置width

.header .topnav>li{
    float: left;
    margin: 0 20px;
    background: red;
    width: 150px;
    text-align: center;
}

/* 设置二级菜单内容的样式 */
.header .topnav>li .submenu{
    text-align: left;
    line-height: 1.5;
    width: 300px;
}

出现问题2：

二级菜单02.jpg

解决办法2：

设置一级菜单li的高度，该值等于整个一级菜单栏的高度（40px）

/* 设置一级菜单鼠标悬停时的状态 悬停时颜色变化并出现上、左、右边框 */
.header .topnav>li:hover{
    background: blue;
    border: 2px solid black;
    border-bottom: none;/* 无下边框 */
}

出现问题3：

二级菜单03.jpg

问题出现原因，加上边框后，盒子尺寸发生变化，挤开了后面的盒子

解决办法3：

水平方向：若想边框不改变盒子的尺寸，可以设置box-sizing为border-box，水平方向不再位移

垂直方向：添加上边框导致行高增加，可以通过减小行高来调整

.header .topnav>li{
    float: left;
    margin: 0 20px;
    background: red;
    width: 150px;
    text-align: center;
    box-sizing: border-box
}

.header .topnav>li .submenu{
    text-align: left;
    line-height: 1.5;
    width: 300px;
}

.header .topnav>li:hover{
    background: blue;
    border: 2px solid black;
    border-bottom: none;
    line-height: 38px
}

二级菜单的隐藏和调出

第一步：将二级菜单的display设置为none，表示不生成盒子，内容会被隐藏
.header .topnav>li .submenu{
    /* 不生成盒子 */
    display: none; 
}
第二步：将鼠标悬停在一级菜单上时的二级菜单的display设置为block，内容出现
.header .topnav>li:hover .submenu{
    display: block;
}

CSS文件

 /* 补充设置一级菜单样式 */
.header .topnav>li{
    float: left;
    margin: 0 20px;
    background: red;
    width: 150px;
    text-align: center;
    height: 40px; /* 定高 */
    box-sizing: border-box; /* 盒子尺寸设置为边框盒的尺寸 */
    position： relative;/* 此处定位是为其子元素submenu提供基准 */
}
 /* 设置二级菜单样式 */
.header .topnav>li .submenu{
    text-align: left;
    line-height: 1.5;
    width: 300px;
    display: none;/* 鼠标未悬停时不显示二级菜单 */
    border: 2px solid black;/* 二级菜单边框 */
    box-sizing: border-box;/* 盒子尺寸设置为边框盒的尺寸 */
    position: absolute;/* 绝对定位，其包含块为父元素li的填充盒 */
    right: -2px;/* 相对于li元素右移2个像素 */
    background: #fff;
}
/* 设置鼠标悬停时二级菜单样式 */
.header .topnav>li:hover{
    background: blue;
    border: 2px solid black;
    border-bottom: none;
    line-height: 38px;
}

.header .topnav>li:hover .submenu{
    display: block;
}

出现问题4：

二级菜单04.jpg

解决办法4：

  1. 设置一个新元素（绝对定位），设置合适的背景颜色，将这段边框覆盖
  2. 加上一个伪元素选择器，如下
在鼠标悬停时，li元素后会生成一个绝对定位伪元素，内容为空，以背景颜色覆盖冗余边框
.header .topnav>li:hover::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    bottom: 0;
    left: 0;
    background: blue;
}

补充

若想要设置菜单栏固定在视窗中，则可以使用固定定位fixed

.header{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}

设置宽度的原因：一旦涉及绝对定位、固定定位，宽度的默认取值为auto，会根据内容发生变化，所以需要设置宽度，防止发生问题

2. 弹出层

透明效果

每个颜色都具有透明通道, 取值为0 ~ 1，1为完全不透明，0为完全透明

  1. rgba(红, 绿, 蓝, alpha)

  2. hex： #红绿蓝透

HTML文件

<body>
    <div class="main">
        <img src="./source/douyu.png" alt="">
    </div>

    <!-- 遮罩层 -->
    <div class="modal">
        <div class="container">
            <div>
                Lorem ipsum dolor sit amet.
                <div class="close">X</div>  
            </div>
             
        </div>
    </div>
</body>

CSS文件

img{
    width: 100%;
}

/* 遮罩层样式 */
.modal{
    position: fixed;/* 固定定位 */
    width: 100%;/* 宽度为整个视口 */
    height: 100%;/* 高度为整个视口 */
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);/* 小数点前的0可以省略 */
}

/* 弹出层样式 */
.modal .container{
    width: 404px;
    height: 512px;
    background-color: #fff;
    position: absolute;/* 绝对定位 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;/* 弹出层居中：上下左右为0，margin为auto */
    box-sizing: border-box;
    padding: 1em;
    border-radius: 6px;/* 倒圆角 */
}

/* 关闭按钮样式 */
.modal .container .close{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;/* 该值为50%时，为圆 */
    color: #fff;
    text-align: center;
    line-height: 30px;
    position: absolute;/* 绝对定位，包含块为container */
    top: -15px;
    right: -15px;/* 此处数值可以通过调试得来 */
    border: 2px solid #fff;
    cursor: pointer;/* 鼠标悬停时的显示样式 */
}

3. 轮播图（静态页面）

HTML文件

<body>
    <div class="banner">
        <div class="imgs">
            <a href=""><img src="./source/1.jpg" alt=""></a>
            <a href=""><img src="./source/2.jpg" alt=""></a>
            <a href=""><img src="./source/3.jpg" alt=""></a>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <div class="modal">
            <div class="title">
                <h2>美丽风景图</h2>
            </div>
            <div class="dots">
            	<ul>
                	<li></li>
               	 	<li></li>
              	 	<li></li>
           		 </ul>
        	</div>
        </div>
    </div>
</body>

CSS文件

/* 设置轮播窗口样式 */
.banner{
    width: 520px;
    height: 304px;
    margin: 0 auto;/* 上下外边距为零，宽度自适应 */
    overflow: hidden;/* 溢出隐藏 */
    position: relative;/* 相对定位 */
}

/* 设置所有图片的总宽度 */
.banner .imgs{
    width: 1560px;
    height: 304px;
}

/* 设置所有图片的统一尺寸 */
.banner .imgs img{
    width: 520px;
    height: 304px;
}

/* 图片元素左浮动 */
.banner .imgs a{
    float: left;
}

/* 设置左右切换按钮样式 */
.banner .left,
.banner .right{
    position: absolute;/* 绝对定位，相对于banner */
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    margin: auto;/* 上下为零，垂直居中 */
    font-size: 3em;
    text-align: center;/* 文本左右居中 */
    font-family: Arial;
    color: #fff;
    line-height: 50px;/* 行高等于高度，文本垂直居中 */
}

/* 鼠标悬停时的按钮样式 */
.banner .left:hover,
.banner .right:hover{
    background: #fff;
    color: #f40;
    border-radius: 50%;/* 鼠标悬停时边框为圆 */
    cursor: pointer;/* 指针悬停样式 */
}

.banner .left{
    left: 20px;/* 左切换按钮距离banner左边框20px */
}

.banner .right{
    right: 20px;/* 右切换按钮距离banner右边框20px */
}

/* 轮播视窗下方的半透明蒙版样式 */
.banner .modal{
    width: 100%;
    height: 30px;
    background: rgba(0,0,0,.3);
    position: absolute;/* 绝对定位。相对于banner */
    left: 0;
    bottom: 0;/* 左、下距离为0，确定蒙版位置 */
    color: #fff;
    line-height: 30px;/* 行高等于高度，垂直居中 */
    padding: 0 20px;
    box-sizing: border-box;/* 盒子尺寸为边框盒尺寸 */
}

/* 蒙版标题左浮动 */
.banner .modal .title{
    float: left;
    font-weight: bold;
}

/* 蒙版圆点切换按钮右浮动 */
.banner .modal .dots{
    float: right;
}

/* 利用无序列表的样式来表现蒙版圆形切换按钮 */
.banner .modal .dots li{
    width: 8px;
    height: 8px;
    background: #ccc;
    display: inline-block;/* 设置为行块盒，特性为不独占一行，且盒模型中所有尺寸都有效 */
    margin: 0 2px;
    border-radius: 50%;/* 设置为圆形 */
    cursor: pointer;/* 设置光标样式 */
}

/* 鼠标悬停时背景色 */
.banner .modal .dots li:hover{
    background: lightblue;
}
avatar
文章
阅读
粉丝