找到 1575 篇文章 关于 CSS
84 次浏览
要设置列之间规则的样式,请使用 column-rule-style 属性。您可以尝试运行以下代码来实现 column-rule-style 属性。示例在线演示 .demo { column-count: 4; column-gap: 50px; column-rule-color: maroon; column-rule-style: dashed; } 这是演示文本。这是演示 ... 阅读更多
119 次浏览
使用 justify-content 属性和值 space-around 在弹性项目之间添加空格。您可以尝试运行以下代码来实现 space-between 值示例在线演示 .mycontainer { display: flex; background-color: red; justify-content: space-between; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } 测验 Q1 Q2 Q3 Q4
1K+ 次浏览
使用 :hover 选择器添加悬停效果。要赋予圆角效果,请使用 border-radius 属性。您可以尝试运行以下代码来使用 CSS 设置圆角活动和悬停按钮:示例在线演示 .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration: none; border-radius: 5px; } .demo a.active { background-color: orange; color: white; border-radius: 5px; } .demo a:hover:not(.active) { background-color: yellow; } 我们的测验
94 次浏览
使用 flex-direction 属性和 row 值水平设置弹性项目。您可以尝试运行以下代码来实现 row 值示例在线演示 .mycontainer { display: flex; flex-direction: row; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } 测验 Q1 Q2 Q3 Q4 Q5 Q6
147 次浏览
使用 flex 属性在一行中添加 flex-grow、flex-shrink 和 flex-basis 属性。您可以尝试运行以下代码来实现 flex 属性示例在线演示 .mycontainer { display: flex; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } 测验 Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9
97 次浏览
使用 flex-direction 属性和 column 值垂直设置弹性项目您可以尝试运行以下代码来实现 column 值:示例在线演示 .mycontainer { display: flex; flex-direction: column; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } 测验 Q1 Q2 Q3 Q4 Q5 Q6
125 次浏览
使用 order 属性指定弹性项目相对于同一容器内其他弹性项目的顺序。示例您可以尝试运行以下代码来实现 order 属性 - 在线演示 .mycontainer { display: flex; background-color: orange; align-content: space-between; height: 150px; width: 600px; flex-wrap: wrap; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } 测验 Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
187 次浏览
使用 flex-flow 属性在一个属性中设置 flex-direction 和 flex-wrap 属性。您可以尝试运行以下代码来实现 flex-flow 属性示例在线演示 .mycontainer { display: flex; background-color: orange; flex-flow: column wrap; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } 测验 Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9
367 次浏览
使用 align-content 属性来对齐弹性线。您可以尝试运行以下代码来实现 align-content 属性:示例在线演示 .mycontainer { display: flex; background-color: RED; align-content: space-between; height: 150px; width: 600px; flex-wrap: wrap; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } 测验 Q1 Q2 Q3 Q4 Q5 Q6
106 次浏览
使用 align-items 属性并设置值为 flex-end 以将弹性项目对齐到底部。您可以尝试运行以下代码来实现 flex-end 值:示例在线演示 .mycontainer { display: flex; height: 300px; background-color: red; align-items: flex-end; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } 测验 Q1 Q2 Q3 Q4