css入门学习day04笔记

最新推荐文章于 2024-06-06 16:53:37 发布

Perryc

最新推荐文章于 2024-06-06 16:53:37 发布

阅读量176

点赞数

分类专栏： HTML基础文章标签： css布局 css定位布局实践 css代码

本文链接：https://blog.csdn.net/Perryc/article/details/98869927

版权

这篇博客深入探讨了CSS布局的几种常见方法，包括绝对定位、固定定位、粘滞定位的应用，以及模态框的创建。在绝对定位中，元素会脱离正常文档流并固定在特定位置。固定定位让元素在页面滚动时保持在屏幕的某个位置。粘滞定位则允许元素在达到特定位置后变为固定。此外，还介绍了如何利用模态框来增强用户体验。最后，文章提到了动画布局和伸缩盒布局，用于实现更灵活的网页设计，确保元素在伸缩时保持良好布局。

摘要由CSDN通过智能技术生成

css布局实践（二）

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style>
		body {
		}
		.outer {
			background-color: #ccc;
			width: 800px;
			margin: 100px auto;
			position: relative;
		}
		.outer > div:nth-child(1), 
		.outer > div:nth-child(3) {
			height: 100px;
		}
		.outer > div.one {
			background-color: lightblue;
		}
		.outer > div.two {
			background-color: pink;
			position: absolute;
			/*width: 100px;*/
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: .5;
		}
		.outer > div.three {
			background-color: teal;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</div>
</body>
</html>

在这里插入图片描述

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style>
		p {
			margin: 0;
		}
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.container {

		}
		.aside {
			position: sticky;
			float: right;;
			width: 100px;
			background-color: pink;
			top: 200px;
		}
		.aside > ul > li {
			height: 100px;
			line-height: 100px;
			border-bottom: 1px solid #fff;
			position: relative;
		}
		.aside > ul > li:hover > div {
			display: block;
		}
		.aside > ul > li > div {
			background-color: teal;
			width: 200px;

			position: absolute;
			top: 0;
			right: 120px;
			
			display: none;
		}
		.wrapper {
			width: 1200px;
			margin: 0 auto;
		}
		a {
			text-decoration: none;
		}
		.top_nav a{
			color: #333;
			font-weight: bold;

		}
		.top_nav ul.nav {
			background-color: teal;
			position: relative;

		}
		.top_nav ul.nav::after {
			display: block;
			content: "";
			clear: both;
		}
		.top_nav ul.nav > li {
			float: left;
			width: 100px;
			text-align: