HTML小白入门基础_6

最新推荐文章于 2023-03-27 20:16:26 发布

有点东西：）

最新推荐文章于 2023-03-27 20:16:26 发布

阅读量530

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_52612800/article/details/116540045

版权

写在前面

本篇内容是应用视觉设计的后半部分总结，直接进入正题吧。本期有一些动画效果无法展示，就请各位读者脑补一下吧。本系列内容是对freecodecamp社区内容的总结。

正文

第一个是实现这样一种效果，将一个标签放在左边，将另一个标签放在上一个标签的剩余部分，比如实现下面这种效果。

<style>
	.left{
    
	background-color:red;
	width:40%;
	float:left;
	}
	.right{
    
	background-color:blue;
	width:50%;
	float:right;
	}
</style>
<h2 class="left">我左边有空</h2>
<h2 class="right">我在右边</h2>

在这里插入图片描述
之前在上一篇说到过设置标签的相对位置，可能会出现重叠，现在我们可以通过设定，决定让谁显示在上层，使用的属性是
z-index，赋值越高显示的优先级越高。

<style>
	.first{
    
	z-index:2;
	width:40%;
	height:200px;
	background-color:red;
	}
	.second{
    
	z-index:1;
	width:40%;
	height:200px;
	background-color:blue;
	position:absolute;
	top:50px;
	left:50px;
	}
</style>
<div class="second"></div>
<div class="first"></div>

在这里插入图片描述
之前讲过 margin 属性，用来设置元素与边界的元素，当为其赋值为 auto 时，元素就会出现在页面中间；

<style>
	.box{
    
	background-color:red;
	margin:auto;
	width:40px;
	height:40px;
	}
</style>
<div class="box"></div>

在这里插入图片描述
下一部分的内容是通过#XXXXXX这种方式设置互补颜色以提高对比度以引起注意，之前提到过，在这就不做代码演示了，互补即相加等于F+1.

下面介绍的是设置颜色的色调，用到的属性是 hsl(颜色，饱和度，轻度)
颜色是使用0-360之间的数字表示的，饱和度就是灰色的程度，100%为完全没有，0%为全灰，轻度是白色或者黑色程度，0%为黑色，100%为白色。

<style> 
	body{
    
	background-color:hsl(0,100%,50%);
	}
	.obox{
    
	background-color:hsl(0,0%,50%);
	height:20px;
	width:20px;
	}
	.tbox{
    
	background-color:hsl(0,100%,0%);
	height:20px;
	width:20px;
	}
	.sbox{
    
	background-color:hsl(100,100%,50%);
	height:20px;
	width:20px;
	}
</style>
<body>
	<div class="obox"></div>
	<div class="tbox">

最低0.47元/天解锁文章

有点东西：）

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML小白入门基础_6

写在前面正文第一个是实现这样一种效果，将一个标签放在左边，将另一个标签放在上一个标签的剩余部分，比如实现下面这种效果。<style> .left{ background-color:red; width:40%; float:left; } .right{ background-color:blue; width:50%; float:right; }</style><h2 class="left">我左边有空</h2><
复制链接

扫一扫