CSS初探学习总结提高 五

Posted xj_love

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS初探学习总结提高 五相关的知识,希望对你有一定的参考价值。

一.鼠标及文字溢出隐藏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标及文字溢出隐藏</title>
	<style type="text/css">
		div 
			/*display: none; */  /*隐藏元素 不是删除  看不见了而已,但是元素一直存在页面中 但是不保留位置  相对block显示*/
			/*visibility: hidden;*/  /*隐藏元素  他和 display none 最大的区别是 他保留位置  visible显示*/
			/*overflow: hidden; *//*  溢出隐藏 */
		
		input 
			/*outline: 0 solid red;*/
			/*border: 0;*/
		
		textarea 
			resize: none;/* 防止文本域拖拽*/
			outline:  none; /*取消轮廓线*/
			width: 400px;
			height: 120px;
			border: 1px solid pink;
			background-color: #f6e7e7;
			color: hotpink;
			vertical-align: middle; /*让标签中线对齐*/
			/*vertical-align: top;*/ /*靠顶对齐,解决低版本浏览器图片底部有缝隙*/
		
		div div:first-child 
			width: 100px;
			height: 20px;
			background-color: pink;
			white-space: nowrap; /*强制文字一行*/
			overflow: hidden;   /*其次加上这句,才能用text-overflow*/
			text-overflow: ellipsis; /*elipsis 多余省略号, clip 直接裁剪*/
		
		div div:last-child 
			width: 50px;
			height: 20px;
			background-color: skyblue;
			word-break: break-all; /* 对于英文来说*/
		
	</style>
</head>
<body>
	<fieldset>
		<legend>鼠标样式</legend>
		<ul>
		<li style="cursor: default;">我是默认鼠标样式 cursor: default;</li>
		<li style="cursor: pointer;">我是小手鼠标样式 cursor: pointer;</li>
		<li style="cursor: move;">我是拖拽鼠标样式 cursor: move;</li>
		<li style="cursor: text;">我是输入鼠标样式 cursor: text;</li>
	</ul>
	</fieldset>
	<fieldset>
		<legend>表单轮廓及防止文本域拖拽</legend>
		<input type="text" name="">
		<br>
		<br>
		用户留言:<textarea cols="30" rows="10"></textarea>
	</fieldset>
	<fieldset>
		<legend>超长的文字处理</legend>
		<div>
			<div>我是刘德华,对就是这么帅气的刘德华</div>
			<div>my name is liudehua</div>
		</div>
		
	</fieldset>
</body>
</html>

二.CSS精灵技术及滑动门

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS精灵技术及滑动门</title>
	<style type="text/css">
		.name
			/*width: 100%;
			height: 150px;*/
		
		.name div 
			background: url(image/abcd.jpg) no-repeat;
		
		.name div:first-child 
			width: 107px;
			height: 105px;
			background-position: -250px -560px;/* 用ps工具获取精灵图片想要图案的位置,大小。*/
			float: left;
		
		.name div:last-child 
			width: 106px;
			height: 113px;
			background-position: -388px -146px;
			float: left;
		
		.clearfix:before, .clearfix:after  /*双伪元素清除浮动*/
			content: "";
			display: block;  /* 触发bfc 防止外边距合并 */
		
		.clearfix:after 
			clear: both;
		
		.clearfix 
			*zoom: 1;   /*只在ie6,7中生效*/
		
		a 
			/*height: 30px;*/
			display: block;
	        background: url(image/to.png) no-repeat;
	        color: #fff;
	        font-size: 14px;
	        line-height: 33px;
	        padding-left: 15px;
	        text-decoration: none;

		
		a span 
			display: block;
	        line-height: 33px;
	        background: url(image/to.png) no-repeat right center;
	        padding-right: 15px;
		

	</style>
</head>
<body>
	<div>
		<p>CSS精灵技术的目的:页面请求服务器图片时,为了减少请求次数,把要用的图片资源,放在一张大图上,一起请求回来</p>
		<div class="name clearfix">
			<div></div>
			<div></div>
		</div>
	</div>
	<div class="scrollView">
		<hr>
		<h1>滑动门</h1>
		<a href="#"><span>首页</span></a>
		<a href="#"><span>楚乔传</span></a>
		<a href="#"><span>公司简介</span></a>
	</div>
	
</body>
</html>

三.字体图标的使用及过度效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>字体图标的使用及过度效果</title>
	<style type="text/css">
		@font-face   /* 电脑中没有的字体,我们需要声明 */
			font-family: 'icomoon';  /*调用的时候也要这个*/
			src:  url('font/icomoon.eot?7kkyc2');
			src:  url('font/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
			url('font/icomoon.ttf?7kkyc2') format('truetype'),
			url('font/icomoon.woff?7kkyc2') format('woff'),
			url('font/icomoon.svg?7kkyc2#icomoon') format('svg');
			font-weight: normal;
			font-style: normal;
		
		span::before 
			font-family: "icomoon";
			font-size: 100px;
			color: pink;
			content: "\\e902";
		
		div 
			width: 100px;
			height: 50px;
			background-color: pink;
			transition: all 1s;   /*过度效果,all标识所有标签,也可以单独设置标签,逗号隔开*/
		

		div:hover 
			width: 200px;
			height: 100px;
		
	</style>
</head>
<body>
	<span></span>
	<h3>过渡效果</h3>
	<div></div>
</body>
</html>

以上是关于CSS初探学习总结提高 五的主要内容,如果未能解决你的问题,请参考以下文章

CSS初探学习总结提高 二

CSS初探学习总结提高 六

CSS初探学习总结提高 六

CSS初探学习总结提高 四

CSS初探学习总结提高 四

CSS初探学习总结提高 一