随笔分类 - css
摘要：鼠标指向菜单,出现二级菜单,移动到二级菜单上点击 这个功能实现HTML如下 外层框 btn-list-group 第1个btn是显示的菜单入口 当鼠标hover下拉框时btn-list-group,显示下拉按钮组btn-list-area btn-list-area绝对定位于btn-list-gro
阅读全文
摘要：使用grid布局 参考资料http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html flex布局还没完全用利索,但这个grid布局却真比较好用. 例如37开的左右分栏布局.不用再写很多CSS了.只需要如下 经常使用册格布局的,这
阅读全文
摘要：单选框与复选框原生控件美化有多种解决方案,现在采用经典的input+label的方式自己实现一种 思路: input 和label 通过id和for属性关联,点击label时,input选中状态改变 透明化input,并且绝对定位,脱离文档流,不影响label空间占用 label包含一个b元素用于模
阅读全文
摘要：使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布局上复杂一些 使用position:sticky,能让元素在离视口的距离达到指定值时,固定不动.而未
阅读全文
摘要：flex介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解了flex布局之后,发现其功能非常强大. 当指定一个div display: flex之后,里面的子元素会按flex布局.常用的册格,各种经典网页布局,如上左右下,还有
阅读全文
摘要：做TAB选项卡页的时候,当前活动的选项卡有边框,同时下边和面板之间无边框 记得以前实现过,但再用的时候却又不会了.现在实现如下. // tab页标题区域的HTML : 一个div下的若干span,每个span对应一个选项卡. <div class="tabs"> <span class="tab-l
阅读全文
摘要：writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; 文本超过一行时,显示为省略号 谷歌浏览器元素获得焦点时有个蓝色背景如何去掉 FF,EDGE下有焦点时是一个虚线框
阅读全文
摘要：今天研究了一下这个CSS,以前用得不多. 作用: 给框加阴影 代码和示例: { box-shadow:3px 3px 2px 5px red;}/*参数依次为 水平阴影 垂直阴影 模糊范围 投影距离 阴影颜色*/ 可以加多个阴影,要用逗号隔开.阴影值为负则出现在反向. 最后一个投影距离,使用了第4个
阅读全文
摘要：box-sizing这个属性可规定盒子大小是否包含padding和border 1.以下三个值: box-sizing:content-box;/*盒子宽度就是内容的宽度,不包含border,padding.有这个属性之前就是这种情况*/ box-sizing:border-box;/*盒子宽度包含
阅读全文
摘要：a,span做成按钮样式时,文字会被选中.加以下CSS可以让其不选中.测试三大浏览器都可以 示例如下 选择时,选不中 按钮a 按钮span 不加时,可以选中 不加
阅读全文
摘要：top leftmenu container 有一种布局如下,头区贴顶固定,滚动不跟随.左侧菜单也固定,也不跟随.只有右侧的内容区要有竖滚动条,并且滚动条只在这内容区域内.要如何实现? *关键位置在于,html设置了overflow:hidden.而container设置了竖滚动条 并且 从html
阅读全文
摘要：要求:网页布局中,页脚在底部.内容不够一页时,在底部.内容超过一页时,出现卷动条,页脚也在被挤到底部 1.测试的这个文章介绍的办法 链接: http://www.cnblogs.com/chenyuming507950417/p/4003651.html 经测试,这个办法可以实现要求. 2.测试代码
阅读全文
摘要：CC3的多列属性Multi-column 一直都很想了解这个属性,总是忘了.今天可以研究一下,回想起想了解它的原因,大概是觉得它很容易分开几列.可能会有很多好处和方便. CC3的多列属性Multi-column 一直都很想了解这个属性,总是忘了.今天可以研究一下,回想起想了解它的原因,大概是觉得它很
阅读全文
摘要：原始问题和解决方法请参考 淘宝UED官方博客:inline-block 前世今生 有空隙 有空隙 有空隙 解决办法,参考自上面链接,并做过FF(32.0.3) IE6-11 chrome(版本 35.0.1916.114 m)的测试 紧凑 紧凑 紧凑
阅读全文
摘要：媒体查询,这个词还是没完全明白,看了长篇大论的解释也没能明白.目前只知道它可以实现在不同屏幕设备上载入不同CSS的功能. 1.为什么要在不同屏幕设备上加载不同的CSS表呢,因为有这种要求了,屏幕大小不同,页面的布局也要相应变化,再者,像手机这样小屏幕主要还是浏览功能,一些表单就不用显示出来了.只在桌
阅读全文
摘要：常用的行内元素：a、span、img、input、lable、select、strong、textarea常用的块级元素：div、h1~h6、dl、ul、ol对行内元素 设置宽度width 无效。 设置高度height 无效，可以通过line-height来设置。 设置margin 只有左右margin有效，上下无效。 设置padding 只有左右padding有效，上下则无效。行内元素不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
阅读全文
