前端特效总结

1、前端的一些小的效果

a. ”透明的方块“

在这里插入图片描述

/*
	只需要对 div 设置:background: rgba(57, 61, 82, 0.7)就可以,第四个参数表示透明度的程度,取值为 0-1
*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			.main{
				width: 200px;
				height: 200px;
				background: rgba(57, 61, 82, 0.7)
			}
			
		</style>
		
	</head>
	<body>
		
		<div class="main">
			
		</div>
		
	</body>
</html>

b. 在输入框中加入图标

在这里插入图片描述

在输入中有些小图标,实际上方法有多种:

  • 把输入框的"border"属性设置为0,然后用 div 包住图标和输入框,后给这个div设置一个border,看起来是 input 的border
  • 图标不动,去掉 input 的background,然后将 input margin-left 设置为负值,在设置一个 text-indent:32px; 则开始输入值得位置改变了

第一种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}
.text input{border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}

</style>
</head>

<body>
<div class="text">
	<input type="text"/>
</div>
</body>
</html>

第二种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.text{width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}

	input{
		margin-left: -20px;
		width: 200px;
		height: 40px;
		text-indent: 49px;
		background: none;
	}

</style>
</head>

<body>
<div class="text">
	<input type="text"/>
</div>
</body>
</html>

2、易忘记的一些知识点

a. a标签设置宽高

a 标签需要设置 display:block 才可以设置宽高

3、绝对定位和相对定个位

须知:

  • 相对定位:
    • 相对自己原来的位置进行位置的偏移
    • 原来的位置还存在
    • left:-100px; 可以设置负值,表示向相反的位置变化
  • 绝对定位
    • 相对于“离自己最近的拥有定位属性的父级元素”进行位置参考
    • 原来位置消失
    • 后来者居上,默认 后面的元素会将前面的元素覆盖掉
  • 注意
    • 只有设置了 position属性,元素的 left , top ,bottom , right 属性值才生效
    • z-index 表示覆盖的优先级的值,值越大,覆盖时在最上层,如果不指定默认为0
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			.box{
				width: 400px;
				height: 400px;
				margin: 0 auto;
				background: #009688;
				position: relative;		/* 让下层的子元素的绝对定位生效 */
			}
			
			.demo{
				width: 200px;
				height: 200px;
				background: #00F7DE;
				
				position: absolute;		/* 加了该属性下面的定位值才生效 */
				left: 100px;
				top: 100px;
			}
			
		</style>
		
	</head>
	<body>
	<div class="box">
			<div class="demo"></div>
		</div>	
	</body>
</html>

在这里插入图片描述

有定位属性的元素位置是不会“挤”的,不像 float 一样会挤其他的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			.box{
				width: 400px;
				height: 400px;
				margin: 0 auto;
				background: #009688;
				position: relative;		/* 让下层的子元素的绝对定位生效 */
			}
			
			.demo{
				width: 200px;
				height: 200px;
				background: red;
				
				position: absolute;		/* 加了该属性下面的定位值才生效 */
				left: 100px;
				top: 100px;
			}
			
			.demo2{
				width: 200px;
				height: 200px;
				background: green;
				
				position: absolute;		/* 加了该属性下面的定位值才生效 */
				left: 150px;
				top: 150px;
			}
			
		</style>
		
	</head>
	<body>
		<div class="box">
			<div class="demo"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

在这里插入图片描述

4、比较特殊的属性

overflow: 如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
	- scroll:表示以“滚动条”方式显示完所有的内容
	- hidden:隐藏掉“溢出”的部分

white-space: nowrap;规定段落中的文本不进行换行:

text-overflow:ellipsis; 如果文本超过固定的长度,只会显示部分的文字,显示不全用“..."代替

5、盒子模型

5.1 padding 属性会把盒子撑开(撑大)

  • padding 没有负值,margin 有负值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style> 
		.parent{
			width: 400px;
			height: 400px;
			background: green;
			
			padding-top: 100px;  /*  发现自己被变大了*/
		}
		
		.son{
			width: 200px;
			height: 200px;
			background: red;
			border: 1px solid red;
		}
	</style>
	<body>
		
		<div class="parent">
			<div class="son">	
			</div>
		</div>
	</body>
</html>

发现 parent 盒子被变大了,实际上任何的 padding 值都会撑大

在这里插入图片描述

5.2 margin 值

  • 上下外边距的值会进行合并(取最大值,作为两个 div 之间的距离)
  • 左右盒子之间的外边距会进行累加,两div之间的距离是 margin-right + margin-left 之间的值

5.3 父子div的层级关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<style>
		.parent{
			width: 400px;
			height: 400px;
			background: green;}
		
		.son{
			width: 200px;
			height: 200px;
			background: red;
			margin-top: 100px; }
	</style>
	
	<body>
		
		<div class="parent">
			<div class="son">		
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

解决办法

设置 overflow: hidden; 属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.parent{
			width: 400px;
			height: 400px;
			background: green;
			/* 设置该属性 */
			overflow: hidden;
		}
		.son{
			width: 200px;
			height: 200px;
			background: red;
			margin-top: 100px;
		}
		
	</style>
	
	<body>
		<div class="parent">
			<div class="son">
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

发现子div 和 父 div 一起移动和 body 保持100px

但是 margin-left 会生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<style>
		
		.parent{
			width: 400px;
			height: 400px;
			background: green;
		 	
		}
		
		.son{
			width: 200px;
			height: 200px;
			background: red;
			margin-left: 100px;
		}
		
	</style>
	
	<body>
		
		<div class="parent">
			<div class="son">	
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

阅读更多

没有更多推荐了,返回首页