您现在的位置是:网站首页> 编程资料编程资料
CSS中下拉菜单和表单以及弹出层的简单笔记CSS3模拟动画下拉菜单效果CSS导航栏及弹窗示例代码CSS下拉菜单简单制作教程 你值得拥有的CSS下拉菜单效果纯html+css制作三级下拉菜单基于CSS实现的4级下拉菜单效果代码CSS实现的灰色下拉菜单效果代码基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果css3实现的多级渐变下拉菜单导航效果代码纯CSS实现酷黑风格三级下拉菜单效果代码
2021-09-05
1354人已围观
简介 这篇文章主要介绍了CSS中下拉菜单和表单以及弹出层的简单笔记,是一些CSS入门学习中的基础知识,需要的朋友可以参考下
下拉菜单
display:block,盒子会由收缩包围元素变为扩展填充父元素
position:absolute是相对于父元素的绝对位置,其坐标都是相对于父元素的,比如对齐下拉菜单
- .mene li ul{
- display:block;
- position:absolute;
- left:0;
- top:100%;
- }
表单
input的type:
text:基本的单行文本框。
password:文本显示为掩码。
checkbox:复选框。
radio:单选按钮。
submit:提交表单的按钮。
time、date、search:HTML5 文本框的变体。
多行文本框 textarea
select元素生成下拉列表,每一个候选选项用option文本元素生成
利用float和span(等行内元素)可以达到水平排列的效果,但如何选择是个问题
cursor:point会使鼠标停在元素上光标变为小手
transition添加过渡效果,有五个过渡属性:
transition-property,过渡的 CSS 属性名,比如 color、width;
transition-duration,过渡的持续时间,以秒或毫秒设定,比如 2s、500ms;
transition-timing-function,过渡的调速函数,决定动画效果是否平滑,是先慢后快还
是先快后慢,比如 ease-in、ease-out、ease-in-out 或 linear(默认值);
transition-delay,过渡开始前的延迟时间,以秒或毫秒设定,比如 1s、200ms;
transition,过渡的简写属性,例如 transition:color 2s ease-in 1ms;。
- input {border-color:black; transition:border-color 2s;}
- input:focus {border-color:green;}
- //请注意,使用 transition 属性时要针对所有浏览器添加厂商前缀。
- //添加前缀版本
- border-radius:10px; -webkit-transition:2s width;
弹出层
CSS 中有一个 z-index 属性,用于控制元素的在堆叠上下文中的次序。换句话说,通过它可以改变元素堆叠时的默认次序。z-index 值较大的元素,在堆叠层次中位于z-index 值较小的元素上方。z-index 属性的值可以是 0 到任意大的数值;负值也可以,但在某些浏览器中并不可靠。默认情况下,所有堆叠元素的 z-index 的值为 auto,相当于 0。
相关内容
- Markdown.css样式简介通过CSS3的object-fit来调整图片适配尺寸的技巧简介CSS计数器counter()的用法简介CSS中的伪元素简介简介CSS中的各种选择符CSS3 Columns分列式布局方法简介定义css设备类型-Media Queries图表简介及使用方法css3背景图片透明叠加属性cross-fade简介及用法实例
- CSS3中box-shadow的用法介绍CSS3阴影效果样式库box-shadows.css 53种css3 box-shadow阴影(外阴影与外发光)图示讲解详解CSS3阴影 box-shadow的使用和技巧总结 CSS3实现多重边框的方法总结详解CSS3的box-shadow属性制作边框阴影效果的方法CSS3 box-shadow属性实例详解
- 使用CSS3制作一个简单的Chrome模拟器css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- CSS中使用Flexbox来达到居中效果的实例利用CSS3的flexbox实现水平垂直居中与三列等高布局Flexbox制作CSS布局实现水平垂直居中的简单实例CSS3的Flexbox骰子布局的实现及问题讲解基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南css使用flexbox布局容器内多元素水平居中css3弹性盒模型(Flexbox)详细介绍CSS3 Flexbox中flex-shrink属性的用法示例介绍CSS Flexbox的具体用法详解
- 使用icon fonts来辅助CSS处理图片纯CSS3实现的动态天气小图标特效源码纯CSS3实现天气动画图标特效源码详解CSS中iconfont的使用CSS3制作ajax loader icon实现思路及代码CSS3 icon font完全指南(CSS3 font 会取代icon图标)使用css如何制作时间ICON方法实践z-blog用CSS定义分类RSS订阅图标CSS icon图标之纯CSS实现带动画效果的天气图标
- 使用CSS实现页面复选框的方法HTML+CSS实现单选框、复选框美观的样式利用CSS3实现单选框动画特效示例代码纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框CSS3实现的表单单选框、复选框特效CSS3实现复选框动画特效示例代码 CSS自定义绿色复选框按钮样式纯CSS实现自定义单选框和复选框功能
- 使用clrs.cc来进行炫酷的CSS调色CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS中一些常用的文本属性整理CSS文本属性的使用方法css对于颜色和文本属性的控制-CSS教程-网页制作-网页教学网
- 简单的CSS叠加外边距示例解决margin 外边距合并问题 详解CSS外边距折叠引发的问题详解css外边距折叠(margin collapsing)详解css边距重叠的几种解决方案css控制边界与边框示例(内边距、外边距使用方法)CSS外边距合并代码css 空白外边距互相叠加的解决方法CSS外边距叠加的问题,CSS教程CSS 外边距(margin)重叠及防止方法
- 使用CSS为文档添加样式的简单示例CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题