CSS

最新推荐文章于 2024-11-04 07:45:03 发布
最新推荐文章于 2024-11-04 07:45:03 发布
阅读量61 收藏
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56706590/article/details/119981343
版权

五、解决ie6下固定定位失效问题

1.fixed

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: fixed;
				left: 50px;
				top: 50px;
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>
	<body style="height: 3000px;">
		<div id="test">
			
		</div>
	</body>
</html>

2.滚动条

① html 身上永远都不会有滚动条
② 如果 html 和 body 当中只有一个有 overflow属性，那么滚动条出现在html的上一层，也就是窗口
③ 如果要让 body 身上出现滚动条，那么 html 和 body 都要有 overflow属性

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				margin: 30px;
				height: 80%;
				border: 1px solid;
				overflow: hidden;
			}
			body{
				margin: 30px;
				height: 80%;
				border: 1px solid deeppink;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="test" style="height: 3000px;">
		</div>
	</body>
</html>

3.禁止系统滚动条

禁止系统滚动条的做法：
① 将 html、body 都设置为 overflow:hidden
② 再声明一个元素 wrap ，充当视口
③将 wrap 元素设置为 overflow:auto，使滚动条出现在其身上

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				height: 100%;
				border: 1px solid deeppink;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="test" style="height: 3000px;">
			</div>
		</div>
	</body>
</html>

4.利用绝对定位模拟固定定位

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				height: 100%;
				border: 1px solid deeppink;
				overflow: auto;
			}
			#pink{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<!-- 初始包含块: 是一个视窗大小的矩形 -->
		<div id="wrap">
			<div id="pink">
				
			</div>
			<div id="test" style="height: 3000px;">
				
			</div>
		</div>
	</body>
</html>

5.绝对定位

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 200px;
				height: 200px;
				background: pink;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body style="height: 3000px;">
		<div id="test">
			
		</div>
	</body>
</html>

四、新增UI方案

3.新增UI样式

（4）边框图片

在这里插入图片描述
① border-image-source
在这里插入图片描述
② border-image-slice
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
③ border-image-repeat
在这里插入图片描述
④ border-image-width
在这里插入图片描述
⑤ border-image-outset
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				border: 50px solid;
				border-image-source: url(img/border-image.png);
				border-image-slice: 33.333333%;
				border-image-repeat: round;
				border-image-width: 30px;
				border-image-outset:10px;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

效果
在这里插入图片描述

（5）css2背景

① background-color
在这里插入图片描述
② background-image
在这里插入图片描述
③ background-repeat
在这里插入图片描述
④ background-position
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				background-color:pink;
				/* background-image: url(img/border-image.png),url(img/avatar.jpg); */
				background-image: url(img/avatar.jpg);
				background-repeat: no-repeat;
				background-position: 10% 10%;
				background-position: -40px -40px;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

⑤ background-attachment
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				background-image: url(img/avatar.jpg);
				background-repeat: no-repeat;
				background-attachment: fixed;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="test">
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
		</div>
	</body>
</html>
（6）css3背景

① background-origin
在这里插入图片描述
② background-clip
在这里插入图片描述
示例： 默认情况下背景图片是从 padding box 开始绘制，从 border box 开始剪裁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 300px;
				height: 300px;
				border: 50px solid rgba(0,0,0,.2);
				padding: 50px;
				background-color:pink;
				background-image: url(img/avatar.jpg);
				background-repeat: repeat;
				background-origin: padding-box;
				-webkit-background-clip: text;
				font: bold 80px/300px "微软雅黑";
				text-align: center;
				color: rgba(0,0,0,.3);
			}
		</style>
	</head>
	<body>
		<div id="test">
			哈哈
		</div>
	</body>
</html>

效果
在这里插入图片描述

③ background-size
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 300px;
				height: 300px;
				border: 50px solid rgba(0,0,0,.2);
				padding: 50px;
				background-color:pink;
				background-image: url(img/avatar.jpg);
				background-repeat: no-repeat;
				background-origin: padding-box;
				background-clip: border-box;
				background-size: 100%;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

效果
在这里插入图片描述

④ background
在这里插入图片描述

weixin_56706590
关注
css3详解
2301_79683791的博客
03-03 2543
CSS新手指南，CSS3必会知识，css3该怎么学，CSS入门技巧
css 预处理器
且听风吟的博客
02-11 8848
由于多个项目中用到了sass和less，所以就学习了一下相关知识，记录下来方便随时查看。 前言 css是用来编写网站样式，但是，其写法比较一成不变。 如果想要使用 css 实现 js 一样的变量、常量等，就会比较臃肿，难以维护。 所以，作为css的扩展，出现了css预处理器。 CSS预处理器 css预处理器定义了一种新的语言，主要是通过用一种专门的编程语言，为css添加一些编程特性，再编译生成css文件。 它可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，对于那些需要大量样式表和样
CSS三角形
guizi0809的博客
09-07 3741
一、css三角形的原理 将一个div的宽度和高度设置为0，然后设置边框样式 .triangle{ width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid blue; border-bottom: 100px solid orange; border-left: 100px solid green; } 得到一个由四个三角形组合形成的正方形 将对应位置的边框颜色设
css渐变
weixin_46352558的博客
08-09 2283
1、 中间向两边渐变。
CSS 浮动
m0_52861684的博客
08-28 5255
CSS浮动。
CSS Reset & Modern CSS Reset
YF云飞的博客
08-01 1万+
CSS Reset & Modern CSS Reset
【CSS】滚动条样式详解
热门推荐
NineWaited的博客
08-21 4万+
浏览器设置滚动条样式详解
CSS 之 渐变色边框
weixin_45092437的博客
12-06 2万+
我下面列举三种方案来帮你排忧解难： 1、 border-image 2、 伪元素+透明边框 3、 background-image+background-clip+background-origin
css 字体倾斜
zmyalh的博客
11-30 1975
【代码】css 字体倾斜。
css小手样式
麋鹿的鹿
11-27 7765
cursor: pointer;
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
postcss-variables-prefixer:PostCSS 插件为所有 css 自定义属性添加前缀
08-04
postcss-变量-前缀 PostCSS 插件为所有 css 自定义属性添加前缀。 用法 使用 ： 在您的项目目录中安装postcss 、 postcss-cli和postcss-variables-prefixer ： npm install postcss postcss-cli postcss-...
2024 CSS保姆级教程二 - BFC详解
最新发布
qq_37779333的博客
11-04 662
先看下MDN上关于BFC的定义：​​块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。​​具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。​通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。​。
【前端基础】CSS进阶
qq_41413652的博客
11-01 811
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 661
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS浮雕效果
p_s_p的博客
10-30 318
【代码】CSS浮雕效果。
CSS编程完全参考手册
资源摘要信息:"CSS完全参考手册.chm是一个包含了大量关于CSS(层叠样式表)信息的电子文档。CSS是一种用于控制网页表现和布局的样式表语言。它由W3C制定标准，是网页设计和开发中不可或缺的一部分。CSS完全参考手册....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值