首页 > 分享 > CSS

CSS

最新推荐文章于 2023-04-12 10:22:51 发布

做想做的, 于 2021-03-18 12:43:01 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

定义:让一个元素在页面中隐藏或者显示出来

1. display 属性 display:block 把元素转成块级元素、显示元素display:inline把元素转成行内元素display:none 隐藏对象并且不保留元素位置 2. visibility 可见性 visibilty:inherit [默认]集成上一个父对象的可见性,(父可见,子就可见。父不可见,子也不可见)visibilty:visible 对象可见visibilty:hidden 对象隐藏,但是位置保留

想要隐藏元素,同时不保留元素位置使用:display:none;相反想要隐藏元素同时保留元素位置使用:visibilty:visible

3. overflow 针对溢出的部分进行显示和隐藏 overflow:visible [默认] 全部显示。不剪切内容,也不添加滚动条,overflow:hidden 超出盒子大小的部分就隐藏overflow:scroll 总是显示滚动条,不管内容是否溢出overflow:auto 在需要的时候剪切内容并添加滚动条

如果有定位的盒子,慎用 overflow:hidden,因为盒子可能会人为的超出盒子的部分,但是overflow:hidden会把多余的部分隐藏

4. outline 隐藏表单的轮廓线

给表单添加ontline:0;或者 ontline:none; 样式之后就可以去掉默认的蓝色边框
防止拖拽文本域 : resize:none ;

<style> input { outline: none; } /*文本域禁止拖拽*/ textarea { resize: none; } </style> <!--取消表单轮廓线--> <input type="text"> <!--禁止文本域禁止拖拽--> <!--文本域尽量放一行显示,否则页面上会有对应的空白部分--> <textarea name="" id="" cols="30" rows="10"></textarea> 123456789101112131415 5. 溢出的文字用省略号表示

单行文本溢出显示省略号
必须满足三个条件:

先强制一行内显示文本

white-space: nowrap //不换行 默认是(normal自动换行) 1 超出的部分隐藏

overflow:hidden 1 文字用省略号替代超出部分

text-overflow:ellipsis 1

示例代码如下:

<style> div { width: 150px; height: 80px; background-color: skyblue; margin: 100px auto; /*默认 如果文字显示不开自动换行*/ /*white-space: normal;*/ /*如果显示不开,必须一行强制显示*/ white-space: nowrap; /* 超出的部分隐藏*/ overflow:hidden; /*文字用省略号替代超出部分*/ text-overflow: ellipsis; } </style> <div> 节约水资源,节约粮食,保护大自然。八荣八耻记心中。 </div>

1234567891011121314151617181920 鼠标样式 cursor

语法:li {cursor : pointer ;}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

<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> 1234567

相关知识

基于HTML5、DIV与CSS的宠物狗个性化服务网站前端设计与实现
130套宠物CSS模板动物行业响应式宠物饲养Html5网站模板动物标本馆官方网站模板动物世界专题展示模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
宠物网页html+css.zip
javascript宠物网站代码 宠物网页设计
使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)
宠物护理的网页制作(html+css+js)
css 制作出窝旅行面试练习
html5宠物网站模板源码
动物主题网页设计(小白必看)
基于html宠物用品商城项目的设计与实现(学生网页设计作业源码)

网址: CSS https://m.mcbbbk.com/newsview210170.html

所属分类:萌宠日常
上一篇: 养狗的4种傻瓜行为,你做了吗?#
下一篇: Android Studio属性