当前栏目: Html :: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | > | >> | 浏览样式: 普通 | 列表 |
![]() ![]() ![]() |
标签:CSS | 垂直布局 | 自适应 | |
CSS垂直布局自适应高度解决方案 适合做总高度固定,行高不固定的自适应高度解决方案。IE8以下不支持 运行代码查看效果! ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 193 |
![]() ![]() ![]() |
标签:浮动布局 | 绝对定位布局 | flex弹性盒子布局 | 圣杯布局 | 双飞翼布局 | 表格布局 | 网格布局 | |
三栏布局,三栏就是三个栏目板块放在一行,左右定宽,中间自适应。 左右宽度300px,中间宽度自适应。(部分中间栏要放在文档流前面优先渲染) 【示例】 提示:您可以先修改部分代码再运行 ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 216 |
![]() ![]() ![]() |
标签:js | a标签 | |
1、替换当前窗口,可后退 2、替换当前窗口,不可后退 3、在新窗口打开,可重复打开多个 4、在新窗口中打开,只能打开一个 ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 240 |
![]() ![]() ![]() |
标签:HTML | 高亮关键字 | 解决方案 | |
在网页中高亮关键字。 本以为一个 innerHTML replace 就能实现的简单操作,却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法, 希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的,忽略过程,直接跳过看结果吧~ 常用做法:正则替换 ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 272 |
![]() ![]() ![]() |
标签:DataSet | data属性 | |
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。 HTML5 Dataset 存储的例子 为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的名称,我们为其HTML标签里直接预置这首歌的更多信息,在HTML源码上看起来可以这样来写: <span id="music-latch" class="musique" data-date="2013" data-genre="Electronic" data-album="Settle (Deluxe)" data-artist="Disclosure" data-composer="Howard Lawrence & Guy Lawrence"> Latch (feat. Sam Smith) < /span> ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 383 |
![]() ![]() ![]() |
标签:calc样式计算 | less | 编译bug | |
对于前端er来说,Less或Sass已经是一项必备的基本技能,有了这个利器,可以省下前端开发者的很多编码时间,让你写CSS如行云流水一般,然后最近我在Less里加入calc时确发现了有点问题,我在Less中这么写: div {width : calc(100% - 30px);} 结果Less把这个当成运算式去执行了,结果给我解析成这样: ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 470 |
![]() ![]() ![]() |
标签:步骤 | step | |
用HTML+CSS实现的步骤条效果,Step组件的功能是让"流程可视化",即让用户在操作时不要迷失方向,帮助用户定位,避免不明确操作的高成本。Step组件采用步骤轴的图形化方式,用"高亮"图标表明用户所在的位置,用"次亮"图标标明用户完成了哪些步骤,用"不亮"图标标明未完成的步骤,让用户对于整个流程一目了然。 提示:您可以先修改部分代码再运行 ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 528 |
![]() ![]() ![]() |
标签:css | 文本超出 | 多行 | 隐藏 | 省略号 | |
首先,要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 550 |
![]() ![]() ![]() |
标签:margin | 重叠 | 盒模型 | 尺寸 | |
JS获取宽高 通过JS获取盒模型对应的宽和高,有以下几种方法: 为了方便书写,以下用dom来表示获取的HTML的节点。 ... ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 650 |
![]() ![]() ![]() |
标签:~ | 选择器 | |
根据部分属性值选择 如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。 假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点: p[class~="important"] {color: red;} ![]() |
作者: admin | 类别: Html | 评论: 0 | TrackBack Disabled | 人气: 964 |