定位的练习之二级菜单、弹出层和轮播图

最新推荐文章于 2024-03-25 14:12:31 发布

码界索隆

最新推荐文章于 2024-03-25 14:12:31 发布

阅读量335

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/COOL66BOY/article/details/123118262

版权

文章目录

二级菜单
弹出层
轮播图

透明，每个颜色都是有透明通道的（0~1）
设置透明的方式：
（1）rgb(红(0~255), 绿(0~255), 蓝(0~255), alpha(0~1)); alpha中1是不透明，0是完全透明。
（2）hex: #红绿蓝透; 十六进制写法。
（3）设置属性opacity：0~1;

二级菜单

主要原理：用定位的方法固定菜单在浏览器顶部，在一级菜单下面设置一个二级的菜单盒子，用display为none的方式先隐藏起来，然后鼠标移上一级菜单上面就去掉display为none的属性样式。

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/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <ul class="clearfix">
            <li>
                <div class="yiji">Lorem.</div>
                <div class="erji">
                    <div class="zhexianlan"></div>
                    <div class="title clearfix">
                        <a href="">Lorem.</a>
                        <a href="">Quis!</a>
                        <a href="">Iure?</a>
                        <a href="">Fugiat?</a>
                        <a href="">Pariatur!</a>
                    </div>
            </li>
            <li>
                <div class="yiji">Aliquid?</div>
                <div class="erji">
                    <div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione recusandae cupiditate similique. Ipsam aperiam deserunt vitae dolorem ab maxime dolore optio, facere dolorum ea laborum rem deleniti nisi pariatur expedita!</div>
                    <div class="zhexianlan"></div>
                </div>
            </li>
            <li>
                <div class="yiji">Sunt?</div>
                <div class="erji">
                    <div class="title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est aliquam quos fuga, nobis accusantium aliquid. At omnis a atque explicabo nulla deleniti, delectus quos quidem id eaque, excepturi cupiditate laudantium?</div>
                    <div class="zhexianlan"></div>
                </div>
            </li>
        </ul>
    </header>
</body>
</html>

css代码：

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

header{
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    background-color: #ccc;
    border-bottom: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
}

header ul{
    width: 500px;
    height: 30px;
    margin: 0 auto;
}

header ul li {
    text-align: center;
    width: 150px;
    float: right;
    margin-right:25px ;    
    box-sizing: border-box;
}

header ul :first-child{
    margin-right: 0;
    
}

.neirong{
    line-height: 1.5;
}

header ul li:hover .yiji{
    background-color: #fff;
    border: 1px solid #eee;
    margin: 0 -1px;
    border-top: none;
}

header ul li:hover .erji{
    display: block;
}

header ul li .erji{
    width: 150px;
    margin: 0 -1px;
    border: 1px solid #eee;
    border-top: none;
    position: relative;
    display: none;
}

header ul li:hover .erji .zhexianlan{
    width: 150px;
    height: 3px;
    background-color:#fff;
    position: absolute;
    top: -3px; 
}

header ul li .erji .title a{
    margin: 0 14px;
    float: left;
}

header ul li .erji .title a:nth-child(2n){
    float: right;
}

效果图：
在这里插入图片描述

弹出层

主要原理：设置一个暗幕背景，用固定定位固定。遮住除弹出来的弹框以外部分。

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/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="main">
        <div class="img">
            <img src="./img/douyu.png" alt="">
        </div>
        <div class="zhebu">
            <div class="tangchuceng">
               <header>
                   <div class="title clearfix">安全登录</div>
                   <div class="close clearfix">×</div>
               </header>
               <div class="neirong">
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, perferendis veniam inventore nulla pariatur aspernatur vel suscipit corrupti sunt et autem! Dolorem veritatis vitae repellendus sit eaque accusamus nam ipsa!
               </div>
        </div>
       
    </div>
</body>
</html>

css代码：

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

img{
    width: 100%;
}

.zhebu{
    position:fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0, .5);
}

.main .zhebu .tangchuceng{
    color: #333;
    background-color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 515px;
    border-radius: 5px;
}

.main .zhebu .tangchuceng header .title{
    float: left;
    font-size: 18px;
    color: #34495e;
    font-weight: bold;
    font-family: 微软雅黑;
    padding-bottom: 6px;
}

.main .zhebu .tangchuceng header .close{
    float: right;
    font-size: 30px;
    color: #ccc;
    font-weight: bold;
    padding-bottom: 6px;
    margin-top: -7px;
    cursor: pointer;
}

.main .zhebu .tangchuceng header{
    padding:20px 20px 0 20px;
}

.main .zhebu .tangchuceng .neirong{
    padding: 0 20px;
    margin-top:54px;
}

效果图：
在这里插入图片描述

轮播图

主要原理:将图片放在同一行，通过控制绝对定位的position实现图片的转换。

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/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="lunbotu">
        <div class="imggroup">
            <img src="./img/1.jpeg" alt="">
            <img src="./img/2.jpeg" alt="">
            <img src="./img/3.jpeg" alt="">
        </div>
        <div class="point">
            <div class="left">👈</div>
            <div class="right">👉</div>
        </div>
        <div class="zhemu">  
            <div class="wenzilan">
                <!-- 未解决问题：解决circles高度坍塌后会与wenzi换行以及cirles与wenzi
                代码顺序更换后也会造成换行   -->
                <div class="circles">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
                <div class="wenzi">自由式滑雪大跳台谷凌爱逆转夺金</div> 
            </div>  
           
        </div>
    </div>
</body>
</html>

css代码：

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

body{
    position: relative;
}

.lunbotu{
    width: 560px;
    height: 305px;
    position: absolute;
    right: 290px;
    overflow: hidden;
    cursor: pointer;
}

.lunbotu .imggroup img{
    width: 560px;
    height: 305px;
    float: right;
}

.lunbotu .point .left,.right{
    position: absolute;
    line-height: 305px;
    font-size: 42px;
    color: rgb(0, 0, 0, .3);
}

.lunbotu .point .left{
    left: 0;
}

.lunbotu .point .right{
    right: 0;
}

.lunbotu .point .left:hover,.right:hover{
    color:  rgb(0, 0, 0, 1);
}

.lunbotu .zhemu{
    background-color: rgb(0, 0, 0, .5);
    position: absolute;
    width: 570px;
    height: 66px;
    bottom: 0;
}

.lunbotu .zhemu .wenzilan{
    width: 560px;
    height: 30px;
    margin-top: 38px;
}

.lunbotu .zhemu .wenzilan .wenzi{
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    margin-left: 10px;
}

.lunbotu .zhemu .wenzilan .circles{
    margin-right: 18px;
}

.lunbotu .zhemu .wenzilan .circle{
    width: 9px;
    height: 9px;
    background-color: #949495;
    border-radius: 50%;
    float: right;
    margin: 0 4px;
}

.lunbotu .zhemu .wenzilan .circle:hover{
    width: 11px;
    height: 11px;
    background-color: #4372c1;
    margin: 0 3px;
}