html网页鼠标样式、css精灵、iconfont、过渡动画笔记
2024-06-01 22:07:50
总结：
插入图片：margin padding float postion width height
背景图片 background控制 background-size 大小 background-position 位置
鼠标样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ui><li style="cursor: default;">小白[默认]</li><li style="cursor: pointer;">小手</li><li style="cursor: text;">文本</li><li style="cursor: move;">移动</li></ui></body></html>outline轮廓线
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ui><li style="cursor: default;">小白[默认]</li><li style="cursor: pointer;">小手</li><li style="cursor: text;">文本</li><li style="cursor: move;">移动</li></ui></body></html>resize 防止文本域拖拽
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">textarea{resize: none; /*防止文本域拖拽变形*/outline: none; /*取消轮廓线*/width: 400px;height: 120px;border: 12px dashed green;background-color: #6e6e6e;color: hotpink;}input{display: block;height: 120px;width:400px;outline: 12px double hotpink;border: 5px solid green;background-color: #AAA;margin: 12px;}</style></head><body><textarea cols="30" rows="70">正文内容</textarea><input placeholder="今天有什么新鲜的事？说说吧"></body></html>图片与文字居中
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;background-color: pink;margin-left: auto;margin-right: auto; /*左右自动auto 盒子就可以水平居中对齐*/text-align: center;}/*vertical-align:middle; 对于块级元素无效*/img{ /*行内块元素*//*vertical-align: baseline;*/ /*默认对准基线*//*vertical-align: middle;*/ /*文字与图片中线对齐*//*vertical-align: top;*/ /*文字与图片的顶部对齐*/vertical-align: bottom; /*文字与图片的底线对齐*/}textarea{height: 60px;width: 900px;vertical-align: middle;resize: none; /*禁止文本域拖拽*/}</style></head><body><div>文字居中</div><hr/><img src="data:images/2.jpg">我不尴尬，尴尬的就是别人<hr>用户留言<textarea></textarea></body></html>解决块级元素底部间隙
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 222px;height: 220px;background: green;}/* 解决方案1转换为块级元素 2 vertical-align:top */img{/*display: block;*//*vertical-align: baseline;*/vertical-align: top;}</style></head><body><div><img src="data:images/3.jpg"></div></body></html>word-break 自动换行 主要处理英文单词
normal 默认
break-all 允许单词内换行
keep-all 只能在半角空格或者连字符处换行 z-index
white-space 设置检索对象内文本显示方式 通常是强制一行显示
normal 默认处理
nowrap 强制在同一行内显示所有文本，直到文本遇到br或者才能换行
text-overflow 文字溢出
clip 直接裁剪
ellipsis 超出部分 省略号代替
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 120px;height: 20px;border: 1px solid green;/*word-break: break-all;*/ /*允许单词拆开显示*/word-break: keep-all; /*不允许拆开字符 除非连字符 - Z-index*/}</style></head><body><div>Day is My Brothday happy me to</div></body></html>white-space
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*默认的自动换行 nowrap会强制显示在一行*/div{width: 120px;height: 20px;border: 1px solid green;white-space: nowrap; /*强制一行显示*/}</style></head><body><div>你好，我的名叫叫安娜，我是安迪的好朋友</div></body></html>text-overflow 超出文字
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 120px;height: 20px;border: 1px solid green;white-space: nowrap; /*将文字强制一行*/overflow: hidden; /*超出部分隐藏*//*text-overflow: clip;*/ /*直接裁剪*/text-overflow: ellipsis; /*超出部分省略号代替*/}</style></head><body><div>我是安迪，我是安南的好朋友皮特。</div></body></html>CSS精灵技术 裁剪图片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*原理就是有一张图片，通过设置backgroiund-position:-100px -200px来截取图片*/div:first-child{width: 12px;height: 20px;background: url(images/jd.png) -2px -101px no-repeat; /*图片时网上移动。所以是负值*/margin: 100px auto;}div:nth-child(2){width: 218px;height: 50px;background: url(images/jd.png) no-repeat -2px -324px;margin: 0 auto;}div:nth-child(3){width: 19px;height: 19px;background: url(images/jd.png) -1px -411px no-repeat;margin: 0 auto;}p{width: 54px;height: 49px;background: url(images/jd.png) no-repeat 0 -438px;margin: 0 auto;}</style></head><body><div></div><div></div><div></div><p></p></body></html>作业 使用精灵拼出好看的图片文字
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 1027px;margin: 150px auto;height: 117px;/*background-color: green;*/padding-top: 10px;}span{background: url(images/abcd.jpg) no-repeat;float: left;margin-right: 5px;}span:first-child{width: 101px;height: 117px;background-position: -368px -411px;}span:nth-child(2){width: 114px;height: 110px;background-position: -369px -277px;}span:nth-child(3){width: 144px;height: 111px;background-position: -104px -277px;}span:nth-child(4){width: 106px;height: 115px;background-position: 0 -5px;}span:nth-child(5){width: 112px;height: 113px;background-position: -256px -275px;}span:nth-child(6){width: 98px;height: 106px;background-position: -362px -8px;}span:nth-child(7){width: 103px;height: 106px;background-position: -389px -143px;}span:nth-child(8){width: 106px;height: 115px;background-position: 0 -5px;}span:nth-child(9){width: 103px;height: 110px;background-position: -239px -8px;}span:last-child{width: 106px;height: 109px;background-position: -494px -143px;}span:nth-child(5n){margin-right: 0;}.clearfix{clear: both; /*清除浮动*/display: none; /*空盒子隐藏起来*/}.box{/*width: 100px;*/height: 100px;background-color: red;}</style></head><body><div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><div class="clearfix"></div><!-- 添加空盒子 清除浮动 --></div><div class="box"></div></body></html>王者荣耀导航栏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>王者荣耀</title><style type="text/css">/*清除浮动的两中方式1 在浮动对象标签后添加空标签 clear:both 清除浮动2 在父元素标签内添加 overflow:hidden 出发BFC清除浮动*/body{background-color: #009;}nav{background-color: #000;overflow: hidden; /*出发BFC可以清除浮动*/border-radius: 10px;}a{float: left;width: 196px;height: 53px;text-align: center;line-height: 53px;color: #FFF;font-weight: bold;text-decoration: none; /*取消下划线*/background: url(images/sp.png) no-repeat -389px -303px;margin: 1px 5px;font-size: 25px;}a:hover{/*text-decoration:underline;*/color: white;background-position: -170px -300px;}</style></head><body><nav><a href="#">游戏首页</a><a href="#">英雄介绍</a><a href="#">充值专区</a><a href="#">兑换奖励</a><a href="#">帮助</a><a href="#">客户服务</a></nav></body></html>icofont 可以在网站上搜索下载
网站：https://fontello.com/
https://icomoon.io/app
https://fontawesome.dashgame.com/#basic
https://www.iamxk.com/icons8-website
https://icons8.com/?ref=iamxk
https://icomoon.io/
inconfont 注意：一定要生成incon fot文件才可以
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>https://icomoon.io/</title><!-- <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> --><style type="text/css">@font-face { /*电脑中没有的字体，需要在这里声明*/font-family: 'icomoon';src: url('fonts/icomoon.eot?r2bhug');src: url('fonts/icomoon.eot?r2bhug#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?r2bhug') format('truetype'),url('fonts/icomoon.woff?r2bhug') format('woff'),url('fonts/icomoon.svg?r2bhug#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span{font-family: "icomoon"; /*一定要和声明的font-family: "incomoon"相同 否则没有效果;*/font-size: 100px;color: hotpink;}div{height: 2px;background-color: deeppink;}div::after{ /*伪元素选择器*/font-family: "icomoon";/*一定要和声明的font-family: "incomoon"相同 否则没有效果;*/content: "\e9e0";font-size: 100px;color: yellow;}</style></head><body><span></span><span></span><span></span><span></span><div></div></body></html>阿里巴巴iconfont图标文字
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>https://www.iconfont.cn/</title><!-- 需要在此网站上https://www.iconfont.cn/下载iconfont包 --><style type="text/css">@font-face { /*拷贝项目下面生成的 @font-face*/font-family: 'iconfont';src:url('阿里巴巴/alibaba/iconfont.woff2?t=1642771478703') format('woff2'),url('阿里巴巴/alibaba/iconfont.woff?t=1642771478703') format('woff'),url('阿里巴巴/alibaba/iconfont.ttf?t=1642771478703') format('truetype');}.iconfont { /*定义使用 iconfont 的样式*/font-family: "iconfont" !important;font-size: 160px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}body{background-color: AAA;}div{height: 10px;background-color: red;}.clearfix{clear: both; /*清除浮动*//*display: none;*/ /*空盒子隐藏起来*/}.box{border: 1px dashed green;width: 180px;height: 220px;background-color: #80acd8;/*padding: 5px;*/}.box span{display: block; /*需要转换为块级元素*/margin: 10px;height: 160px;width: 160px;background-color: #d7f7a7;}h4{text-align: center; /*文字居中*/color: #FFF;}</style></head><body><span class="iconfont"></span><span class="iconfont"></span><span class="iconfont"></span><span class="iconfont"></span><span class="iconfont"></span><div></div><div class="box"><span class="iconfont"></span><h4>雾炮车</h4></div></body></html>css实现图片左右拉开适配内容文字[推拉门效果]
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}a{ /*实现推拉门效果是不可以给宽值的，要拉伸图片实现宽度自由*/margin: 100px;display: inline-block; /*转换为行块内元素*/height: 33px;background: url(images/ao.png) no-repeat;padding-left: 15px; /*左边撑开15px*/color: #FFF;text-decoration: none; /*取消下划线*/line-height: 33px;}a span{display: inline-block;height: 33px;background: url(images/ao.png) no-repeat right; /*图片右边*/padding-right: 15px; /*右边撑开15px*/}</style></head><body><a href="#"><span>首页</span></a><a href="#"><span>中国人民中央银行行长</span></a><a href="#"><span>二维码支付</span></a></body></html>微信导航栏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>微信</title><style type="text/css">/*公共部分模块*/*{margin: 0;padding: 0;}body{background: url(images/wx.jpg) repeat-x;/* body背景图片 沿x轴平铺*/}a{ /*a标签*/text-decoration: none; /*取消下划线*/}ul{list-style: none; /*取消样式*/}nav{height: 75px;}li{float: left; /*浮动*/margin: 0 10px; /*上下 左右*/padding-top: 21px;}li a{display: block;background: url(images/to.png) no-repeat;color: #FFF;font-size: 14px;line-height: 33px;padding-left: 15px; /*左偏移15px*/}li a span{display: block;line-height: 33px;background: url(images/to.png) no-repeat right center;padding-right: 15px; /*右偏移15px*/}/*鼠标经过时更换背景图片*/li a:hover{background: url(images/ao.png) no-repeat;}li a span:hover{background: url(images/ao.png) no-repeat right center;padding-right: 15px; /*右偏移15px*/}</style></head><body><nav><ul><li><a href="#"><span>首页</span></a></li><li><a href="#"><span>帮助与反馈</span></a></li><li><a href="#"><span>公众号平台</span></a></li><li><a href="#"><span>开发者文档</span></a></li><li><a href="#"><span>招商投资入口</span></a></li></ul></nav></body></html>伪元素选择器after和before
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/*.box 类选择器 :hover伪元素选择器 ::after伪元素选择器[该元素不存在]*/div::before{content: "欢庆探家";background-color: deeppink;border: 1px solid green;display: block;height: 100px;width: 100px;}/*区别类选择器 伪类选择器 就是选取对象伪元素选择器 本质上就是一个元素[标签 盒子]是行内元素 没有宽高*/div::after{content: "小蝴蝶";display: block;height: 200px;width: 200px;border: 1px solid orange;}</style></head><body><div></div><div>是</div><p></p><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"><title>Document</title><style type="text/css">div{width: 296px;height: 180px;margin: 20px auto;position: relative; /*相对定位 子绝父相*/}/*鼠标经过的时候插入一个伪元素*/div:hover::after{content: "";width: 100%;height: 100%;border: 10px solid rgba(255, 0, 0,.3);position: absolute; /*绝对定位*/display: block;top: 0;left: 0;box-sizing: border-box; /*padding 和margin都算入width中*/}</style></head><body><div><img src="data:images/mi.jpg" ></div><div><img src="data:images/mi.jpg" ></div><div><img src="data:images/mi.jpg" ></div><div><img src="data:images/mi.jpg" ></div></body></html>鼠标经过时过渡动画显示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 200px;height: 100px;background-color: deeppink;/*transition 要过渡的属性 花费的时间 运动的曲线 何时开始*//*transition: width 0.6s ease 0s , height 0.3s ease-in 1s;*//*过渡需要写在div里，不是hover里 所有属性都在变化用all 后边可以省略*//*transition: all 0.6s;*/transition: width 1s,height 3s; /*默认是ease先块后慢*/}div:hover{ /*鼠标经过时宽度变为800px*/width: 600px;height: 600px;}</style></head><body><div></div></body></html>html网页鼠标样式、css精灵、iconfont、过渡动画笔记相关推荐
- 鼠标样式css设置 cursor
鼠标样式 cursor: http://www.worldtimzone.com/mozilla/testcase/css3cursors.html 转载于:https://www.cnblogs.c ...
- CSS高级篇——过渡动画
CSS Transitions 让我们不写一行 JavaScript 代码也能实现过渡动画. 举一个最简单的例子: a:link {color: hsl(36,50%,50%); } a:hover ...
- 【LVGL 学习】样式（style）过渡动画学习
transition:过渡动画 当一个控件的状态发生改变时,可以让样式也发生变化以提醒用户.通过过渡动画(transition)可以让样式的改变更自然.例如,按钮在点击时,以及开关在切换时,都具有一小 ...
- HTML网页设计：CSS渐变、过渡
一.CSS3浏览器前缀 1.-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀 2.-moz- -moz-box-shadow 所 ...
- HTML5网页设计样式-CSS基础知识
CSS概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页内容的外观(样式),并允许将样式信息和网页内容分离的一种标记语言. HTML与CSS的关系:&quo ...
- HTML5网页设计样式-CSS设置文字样式
字体 font-family 文字大小 font-size 文字的加粗 font-weight 文字的倾斜 font-style 以上四个在这篇已经有过大致介绍(见http://t.csdn.cn/I ...
- 【动画消消乐】纯CSS加载/过渡动画学习笔记合集（1-50）
Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍一下 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入 ...
- html实现游戏鼠标样式,巧妙运用CSS立刻改变鼠标的样式
巧妙运用CSS立刻改变鼠标的样式 互联网 发布时间:2008-10-17 19:27:05 作者:佚名 我要评论 用惯了Windows的人对各种各样的鼠标样式一定不会陌生.当鼠标移动到不同 ...
- CSS超链接样式和鼠标样式
文章目录 CSS超链接样式和鼠标样式 超链接样式 超链接伪类 简化超链接样式 鼠标样式 浏览器鼠标样式 自定义鼠标样式 CSS超链接样式和鼠标样式 超链接样式 超链接伪类 语法 a:link {} a ...
最新文章
- 知乎 高级操作系统_知乎高赞：Linux！为何他一人就写出这么强的系统，中国却做不出来？...
- 如何解决Spring Data Maven构建的“生命周期配置未涵盖的插件执行”
- juddi MySQL_JUDDI v3部署并连接MySQL数据库
- Swift - 12 - 区间运算符和for-in
- “花钱矩阵”下共享单车的出路何在？
- 解析 WordPress 插件机制
- php基于数组的分页实现
- 人工智能可控核聚变量子计算机,中国终于实现了可控核聚变
- el表达式 循环_EL表达式+JSTL+Ajax 047
- python 自动登录网站_分析某网站，并利用python自动登陆该网站，下载网站内容...
- cacti中个别流量图超过80M不显示解决办法
- 全国计算机二级c语言怎么复习,全国计算机二级C语言考试复习五要点
- Python 输入整数进行排序
- 我所知道坦克大战（单机版）之添加爆炸效果、击毙坦克后产生爆炸
- Postgresql学习03-C外部函数创建，及与Plsql自定义函数效率对比
- pandas 第二章 pandas基础
- 串口的空闲中断+DMA接收(附F4代码)
- 【教学类-22-01】20221207《八款字体的描字帖-2*4格横条-用订书机》（中班描字)
- C语言 随机起名和记录
- 如何（以及为什么）在Word文档中使用隐藏文本