提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

【前端学习之HTML&CSS】-- 视觉格式化模型之三 定位练习

amp定位HTML学习前端CSS -- 模型
2023-09-11 14:16:44 时间

【前端学习之HTML&CSS】-- 视觉格式化模型之三 定位练习

文章目录


本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

lc own

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。

上一篇博客主要负责视觉格式化模型中关于定位的相关内容。通过定位我们可以实现手动控制元素在包含块中的精准位置.本篇博客是关于定位内容的练习。

一、二级菜单

代码HTML + CSS

<!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>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/routine.css">
</head>
<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>
                <div class="submenu">
                    <ul>
                        <li>Lorem, ipsum.</li>
                        <li>Cum, recusandae.</li>
                        <li>Minima, nesciunt!</li>
                        <li>Harum, necessitatibus!</li>
                        <li>Impedit, velit.</li>
                    </ul>
                </div>
            </li>
            <li><a href="">网站导航</a></li>
        </ul>
    </header>
</body>
</html>

.clearfix::after{
    /* 解决高度坍塌 */
    /* 那里高度坍塌，给他的父元素加上此属性 */
    content: "";
    display: block;
    clear: both;
}
.header{
    background-color: #e3e4e5;
    color: #999;
    height: 40px;
    line-height: 40px;
    position: fixed;
    /* 固定定位宽度适应内容 */
    width: 100%;
    left: 0;
    top: 0;
}
.header .topnav>li{
    float: left;
    margin: 0 20px;
    width: 100px;
    text-align: center;
    height: 40px;
    box-sizing: border-box;
    /* 改变边框不改变盒子左右尺寸 */
    position: relative;
}
.header .topnav>li:hover{
    background-color: #fff;
    border: 2px solid #ccc;
    border-bottom: none;
    /* 保证上下尺寸不变 */
    line-height: 36px;

}
.header .topnav>li .submenu{
    text-align: center;
    line-height: 1.5;
    width: 200px;
    /* 隐藏该盒子 */
    display: none;
    border: 2px solid #ccc;
    box-sizing: border-box;
    /* 为了使子菜单的右侧与顶级菜单右侧同齐 */
    position: absolute;
    /* 测试得出 */
    right: -2px;
}
.header .topnav>li:hover .submenu{
    display: block;
}
/* 用于掩盖顶级菜单和二级菜单之间的边框 */
.header .topnav>li:hover::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: #fff;
    left: 0;
    bottom: 0;
}

结果展示

在这里插入图片描述

二、弹出层

代码HTML + CSS

<!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>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/routine.css">
</head>
<body>
    <div class="main">
        <img src="./img/tongji.jpeg" alt="tongji_email">
    </div>
    <!-- 蒙层/遮罩 -->
    <div class="modal">
        <div class="container">
            <div class="content">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae doloremque impedit magni tenetur nesciunt eum quia debitis aperiam? Eligendi, necessitatibus?
            </div>
            <div class="close">
                X
            </div>
        </div>
    </div>
</body>
</html>

.main img{
    width: 100%;
}
.modal{
    position: fixed;
    /* 相对于视口 */
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* 半透明效果 */
    background-color: RGBA(0,0,0,.5);
}
.modal .container{
    width: 404px;
    height: 512px;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    padding: 1em;
    border-radius: 6px;
}
.modal .container .close{
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: chocolate;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 20px;
    right: +5px;
    top: +5px;
    border: 2px solid #fff;
    /* 光标变手 */
    cursor: pointer;
}

结果展示

lc

三、轮播图

代码HTML + CSS

<!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>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/routine.css">
</head>
<body>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="imgs">
            <a href="https://photo.cctv.com/2022/03/15/PHOAKfr3RsnwKmYAJvag9Zb9220315.shtml?spm=C35449.P80754075394.S41437.4#GKzbUC5clHyi220315_1">
                <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/e66d159186b0b6bee8023d73c2ed99ec.jpeg?x-bce-process=image/crop,x_0,y_0,w_665,h_362" alt="">
            </a>
            <a href="https://photo.cctv.com/2022/03/15/PHOAUh2CoYghpNWKXxiekaGT220315.shtml?spm=C35449.P80754075394.S41437.23#g8q7IiKAWPFZ220315_1">
                <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/d35b959bf7f78bb021ba6eb04e6ab3a7.jpeg?x-bce-process=image/crop,x_0,y_0,w_665,h_362" alt="">
            </a>
            <a href="https://photo.cctv.com/2022/03/15/PHOAMRXOgTLhZ7Mm7aK042G6220315.shtml?spm=C35449.P80754075394.S41437.4#MybNMiTObH2220315_10">
                <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/4e87eeb064bdb96d1bbff5601d40d52e.jpeg?x-bce-process=image/crop,x_0,y_0,w_665,h_362" alt="">
            </a>
        </div>
        <!-- <\> -->
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <div class="modal">
            <div class="newtitle">
                <h2>关注嘉然，顿顿解馋</h2>
            </div>
            <div class="dots">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

.banner{
    width: 520px;
    height: 304px;
    /* border: 1px solid; */
    margin: 1em auto;
    /* 溢出隐藏，就实现了只显示一张图片 */
    overflow: hidden;
    position: relative;
}
.banner .imgs{
    width: 1560px;
    height: 304px;
    /* 实现轮播就可以通过调整margin-left实现 */
}
.banner .imgs a{
    float: left;
}
.banner .imgs img{
    width: 520px;
    height: 304px;
}
.banner .left, 
.banner .right{
    position: absolute;
    width: 50px;
    height: 50px;
    color: #fff;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 3em;
    text-align: center;
    border-radius: 50%;
    font-family: Arial;
    line-height: 50px;
    cursor: pointer;
}
.banner .left{
    left: 20px;
}
.banner .right{
    right: 20px;
}
.banner .left:hover, 
.banner .right:hover{
    background-color: #fff;
    color: #f40;
}
.banner .modal{
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,.3);
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    line-height: 40px;
    padding: 0 20px;
}
.banner .modal .newtitle{
    float: left;
    color: #fff;
    font-weight: bold;
}
.banner .modal .dots{
    float: right;
    color: #fff;
}
.banner .modal .dots li{
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 1px;
    background-color: #ccc;
    cursor: pointer;
}
.banner .modal .dots li:hover{
    background-color: #369;
}

结果展示

lc

总结

关于视觉格式化模型的内容我们已经学习完毕，尤其是最后一节关于定位的内容，我们在各种各样复杂而神奇的样式中都能看到他的身影，希望大家能够在练习中彻底掌握这几种布局。

相关文章