草庐IT

CSS-Grid-Cell

全部标签

css - :hover 上的重叠 div

我的div在悬停时会沿高度增长,而在悬停时我希望它们与所有其他div重叠,而不是像我的示例中那样插入它们。#container{width:300px;}#containeradiv{float:left;width:100px;height:60px;-webkit-transition:all0.25sease;}#container.color1{background:#444;}#container.color2{background:#555;}#container.color3{background:#666;}#container.color4{background:#7

css - :hover 上的重叠 div

我的div在悬停时会沿高度增长,而在悬停时我希望它们与所有其他div重叠,而不是像我的示例中那样插入它们。#container{width:300px;}#containeradiv{float:left;width:100px;height:60px;-webkit-transition:all0.25sease;}#container.color1{background:#444;}#container.color2{background:#555;}#container.color3{background:#666;}#container.color4{background:#7

html - CSS:包含与水平规则对齐的 block 的多列布局

我正在尝试为以下布局创建CSS。这与表格非常相似,但我使用它来呈现不包含表格数据的XML。我想要两列或多列以及贯穿这些列的一条或多条水平线(不可见线)。规则之间的垂直间距与表格的行高完全一样,由该行单元格中内容的最大高度决定。此“表格”中的所有“单元格”都包含两个可选block。上面的block在上面的规则下方对齐。下面的block在下面的规则上方对齐。这是一个例子:上面和下面的block都是可选的,因此每个“单元格”都将具有以下配置之一。block没有固定的高度;它们可能包含根据“单元格”的宽度换行的文本。因为这很像一张table,所以我尝试用display:table渲染它.第一个

html - CSS:包含与水平规则对齐的 block 的多列布局

我正在尝试为以下布局创建CSS。这与表格非常相似,但我使用它来呈现不包含表格数据的XML。我想要两列或多列以及贯穿这些列的一条或多条水平线(不可见线)。规则之间的垂直间距与表格的行高完全一样,由该行单元格中内容的最大高度决定。此“表格”中的所有“单元格”都包含两个可选block。上面的block在上面的规则下方对齐。下面的block在下面的规则上方对齐。这是一个例子:上面和下面的block都是可选的,因此每个“单元格”都将具有以下配置之一。block没有固定的高度;它们可能包含根据“单元格”的宽度换行的文本。因为这很像一张table,所以我尝试用display:table渲染它.第一个

jquery - CSS 或 jQuery 滑动边框底部

这是我拥有的:http://jsfiddle.net/axe3J/当我将鼠标悬停在2-5上时,我试图使底部边框滑动并从蓝色变为红色。我从未使用过jQuery,所以我希望只使用CSS就可以实现。提前致谢。HTML:12345CSS:li{display:inline;}.button{padding:5px35px5px35px;background-color:transparent;text-decoration:none;}.button:hover{color:#d0332b;border-bottom:7pxsolid#d0332b;}#current{border-botto

jquery - CSS 或 jQuery 滑动边框底部

这是我拥有的:http://jsfiddle.net/axe3J/当我将鼠标悬停在2-5上时,我试图使底部边框滑动并从蓝色变为红色。我从未使用过jQuery,所以我希望只使用CSS就可以实现。提前致谢。HTML:12345CSS:li{display:inline;}.button{padding:5px35px5px35px;background-color:transparent;text-decoration:none;}.button:hover{color:#d0332b;border-bottom:7pxsolid#d0332b;}#current{border-botto

javascript - 使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html

我打算开发一个angularJS客户端,我将在其中使用Angular组件。这将导致多个.js/.css文件。为了避免手动引用每个新添加的js/css文件,我打算使用grunt-include-source任务。问题是,在配置Gruntfile.js之后,“gruntincludeSource”任务运行,返回“完成,没有错误”。状态,但没有在index.html文件中进行更新。我的项目结构如附图所示(我使用WebStorm作为IDE)。我的index.html文件如下:RavenApp我的Gruntfile.js如下:module.exports=function(grunt){grun

javascript - 使用 grunt 将本地 *.js 和 *.css 文件自动引用到 index.html

我打算开发一个angularJS客户端,我将在其中使用Angular组件。这将导致多个.js/.css文件。为了避免手动引用每个新添加的js/css文件,我打算使用grunt-include-source任务。问题是,在配置Gruntfile.js之后,“gruntincludeSource”任务运行,返回“完成,没有错误”。状态,但没有在index.html文件中进行更新。我的项目结构如附图所示(我使用WebStorm作为IDE)。我的index.html文件如下:RavenApp我的Gruntfile.js如下:module.exports=function(grunt){grun

javascript - CSS - 在单击之前向上滑动一个不可见的 div

我有一个fiddle我想要一个点击事件将scrollTop动画化到div.panel-two的页面。我尝试了一些jQuery插件,但没有任何效果。我遇到的问题是,如果div不可见并且无法为scrollIntoView设置动画,我就无法使用scrollTop。这是html:×FoundationDotZURBComSlashSitesLoremipsumdolorsitametDonecidipsumodio.Crasaccumsanconsecteturnibh,vitaepretiumduihendreritsed.Cumsociisnatoquepenatibusetm

javascript - CSS - 在单击之前向上滑动一个不可见的 div

我有一个fiddle我想要一个点击事件将scrollTop动画化到div.panel-two的页面。我尝试了一些jQuery插件,但没有任何效果。我遇到的问题是,如果div不可见并且无法为scrollIntoView设置动画,我就无法使用scrollTop。这是html:×FoundationDotZURBComSlashSitesLoremipsumdolorsitametDonecidipsumodio.Crasaccumsanconsecteturnibh,vitaepretiumduihendreritsed.Cumsociisnatoquepenatibusetm