css入门学习day04笔记

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

Perryc

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

阅读量154

点赞数

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

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

版权

css布局实践（二）绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绝对定位</title> <style> body { } .outer { background-color: #cc...

摘要由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:

最低0.47元/天解锁文章

Perryc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门学习day04笔记

css布局实践（二）绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绝对定位</title> <style> body { } .outer { background-color: #cc...
复制链接

扫一扫