【前端学习之HTML&CSS】-- 视觉格式化模型之三 定位练习
文章目录
本文具体内容参考了B站渡一教育的课程,原课程链接如下:
渡一教育课程
前言
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;
}
结果展示
三、轮播图
代码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"><</div>
<div class="right">></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;
}
结果展示
总结
关于视觉格式化模型的内容我们已经学习完毕,尤其是最后一节关于定位的内容,我们在各种各样复杂而神奇的样式中都能看到他的身影,希望大家能够在练习中彻底掌握这几种布局。