1000字范文 > 【css教程】web前端入门学习 css（7）精灵图字体图标 css三角鼠标样式表单轮

【css教程】web前端入门学习 css（7）精灵图字体图标 css三角鼠标样式表单轮

时间：2023-04-18 08:33:11

文章目录

精灵图为什么需要精灵图？精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角（用边框border制作）案例：京东三角css用户界面样式更改用户鼠标样式cursor取消表单轮廓线input{outline:none;} textarea{outline:none;}取消文本框拖拽textarea{resize:none;} vertical-align垂直对齐属性（垂直居中：vertical-align:middle;）解决图片底部默认空白缝隙问题溢出文字省略号显示单行文本溢出省略号显示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;多行文本溢出省略号显示布局技巧margin负值的巧妙运用（消除重合的边框）如何让鼠标经过盒子时显示边框文字环绕浮动图片简化布局行内块的巧妙运用（制作页面/页号跳转）三角形强化（案例：京东秒杀三角）css初始化（重新设置浏览器样式）（复制粘贴一坨代码）

精灵图

为什么需要精灵图？

精灵图的使用

精灵图课堂案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>精灵图使用</title><style>.box1 {width: 60px;height: 60px;margin: 100px auto;background: url(sprites.png) no-repeat -182px 0;}.box2 {width: 27px;height: 25px;/* background-color: pink; */margin: 200px;background: url(sprites.png) no-repeat -155px -106px;}</style></head><body><div class="box1"></div><div class="box2"></div></body></html>

用精灵图拼出自己的名字

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>利用精灵图拼出自己名字</title><style>span {display: inline-block;background: url(images/abcd.jpg) no-repeat;}.p {width: 100px;height: 112px;/* background-color: pink; */background-position: -493px -276px;}.i {width: 60px;height: 108px;/* background-color: pink; */background-position: -327px -142px;}.n {width: 108px;height: 109px;/* background-color: pink; */background-position: -215px -141px;}.k {width: 105px;height: 114px;/* background-color: pink; */background-position: -495px -142px;}</style></head><body><span class="p">p</span><span class="i">i</span><span class="n">n</span><span class="k">k</span></body></html>

字体图标

字体图标的下载

字体图标的引入

注意：字体图标也可不用复制右边那个，用反斜杠“\”加那上面的代码就能有同样效果，如“\e947”

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>字体图标的使用</title><style>/* 字体声明 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?p4ssmb');src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?p4ssmb') format('truetype'),url('fonts/icomoon.woff?p4ssmb') format('woff'),url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';font-size: 100px;color: pink;}</style></head><body><span></span><span></span></body></html>

字体图标的追加

css三角（用边框border制作）

案例：京东三角

代码在上面

css用户界面样式

更改用户鼠标样式cursor

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户界面样式-鼠标样式</title></head><body><ul><li style="cursor: default;">我是默认的小白鼠标样式</li><li style="cursor: pointer;">我是鼠标小手样式</li><li style="cursor: move;">我是鼠标移动样式</li><li style="cursor: text;">我是鼠标文本样式</li><li style="cursor: not-allowed;">我是鼠标禁止样式</li></ul></body></html>

取消表单轮廓线input{outline:none;} textarea{outline:none;}

代码，下面

取消文本框拖拽textarea{resize:none;}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户界面样式-表单轮廓和防止拖拽文本域</title><style>input, textarea {/* 取消表单轮廓 */outline: none;}textarea {/* 防止拖拽文本域 */resize: none;}</style></head><body><input type="text"><textarea name="" id="" cols="30" rows="10"></textarea></body></html>

vertical-align垂直对齐属性（垂直居中：vertical-align:middle;）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>利用vertical-align实现图片文字垂直居中对齐</title><style>img {/* vertical-align: bottom; *//* 让图片和文字垂直居中 */vertical-align: middle;/* vertical-align: top; */}textarea {vertical-align: middle;}</style></head><body><img src="蜥蜴女仆.gif" alt=""> pink老师是刘德华<br><textarea name="" id="" cols="30" rows="10"></textarea> 请您留言</body></html>

解决图片底部默认空白缝隙问题

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片底侧空白缝隙解决方案</title><style>div {border: 2px solid red;}img {/* vertical-align: middle; */display: block;}</style></head><body><div><img src="蜥蜴女仆.gif" alt=""></div></body></html>

溢出文字省略号显示

单行文本溢出省略号显示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>单行文本溢出显示省略号</title><style>div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 这个单词的意思是如果文字显示不开自动换行 *//* white-space: normal; *//* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */white-space: nowrap;/* 2.溢出的部分隐藏起来 */overflow: hidden;/* 3. 文字溢出的时候用省略号来显示 */text-overflow: ellipsis;}</style></head><body><div>啥也不说，此处省略一万字</div></body></html>

多行文本溢出省略号显示

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>单行文本溢出显示省略号</title><style>div {width: 150px;height: 65px;background-color: pink;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 3;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}</style></head><body><div>啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字</div></body></html>

布局技巧

margin负值的巧妙运用（消除重合的边框）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin负值的巧妙运用</title><style>ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}/* ul li:hover {1. 如果盒子没有定位，则鼠标经过添加相对定位即可position: relative;border: 1px solid blue;} */ul li:hover {/* 2.如果li都有定位，则利用 z-index提高层级 */z-index: 1;border: 1px solid blue;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body></html>

如何让鼠标经过盒子时显示边框

代码见上

文字环绕浮动图片简化布局

图片浮动，文字标准流即可（因为浮动最初设计出来就是为了做文字环绕效果的）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文字围绕浮动元素的妙用</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 70px;background-color: pink;margin: 0 auto;padding: 5px;}.pic {float: left;width: 80px;height: 70px;margin-right: 5px;}.pic img {height: 100%;}</style></head><body><div class="box"><div class="pic"><img src="蜥蜴女仆.gif" alt=""></div><p>【集锦】热身赛-巴西0-1秘鲁内马尔替补两人血染赛场</p></div></body></html>

行内块的巧妙运用（制作页面/页号跳转）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行内块的巧妙运用</title><style>* {margin: 0;padding: 0;}.box {text-align: center;}.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none;}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}</style></head><body><div class="box"><a href="#" class="prev"><<上一页</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="elp">...</a><a href="#" class="next">>>下一页</a>到第 <input type="text">页<button>确定</button></div></body></html>

三角形强化（案例：京东秒杀三角）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS三角强化的巧妙运用</title><style>.box1 {width: 0;height: 0;/* 把上边框宽度调大 *//* border-top: 100px solid transparent;border-right: 50px solid skyblue; *//* 左边和下边的边框宽度设置为0 *//* border-bottom: 0 solid blue;border-left: 0 solid green; *//* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2. 样式都是solid */border-style: solid;/* 3. 上边框宽度要大，右边框宽度稍小，其余的边框该为 0 */border-width: 100px 50px 0 0 ;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color:red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style></head><body><div class="box1"></div><div class="price"><span class="miaosha">¥1650<i></i></span><span class="origin">¥5650</span></div></body></html>

css初始化（重新设置浏览器样式）（复制粘贴一坨代码）

京东初始化代码：

使用时直接粘贴到style文件头部即可

style.css

/* 把我们所有标签的内外边距清零 */* {margin: 0;padding: 0}/* em 和 i 斜体的文字不倾斜 */em,i {font-style: normal}/* 去掉li 的小圆点 */li {list-style: none}img {/* border 0 照顾低版本浏览器如果图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer}a {color: #666;text-decoration: none}a:hover {color: #c81623}button,input {/* "\5B8B\4F53" 就是宋体的意思这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif}body {/* CSS3 抗锯齿形让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666}.hide,.none {display: none}/* 清除浮动 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0}.clearfix {*zoom: 1}

【css教程】web前端入门学习 css（7）精灵图字体图标 css三角鼠标样式表单轮廓线文本框拖拽垂直对齐图底空白缝隙 margin负值溢出文字省略号文字环绕 css初始化

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。