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初探学习总结提高 五的主要内容，如果未能解决你的问题，请参考以下文章