资讯专栏INFORMATION COLUMN

css 写步骤样式

Vultr / 939人阅读

摘要:第一步第二步第三步

css:

.status-bar {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  width: 800px;
  border-radius: 1px;
  overflow: hidden;
}
.status-bar li {
  background: #656565;
  display: table-cell;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  position: relative;
}
.status-bar li .triangle-right-bg {
  display: inline-block;
  width: 0px;
  height: 0px;
  border-style: solid;
  position: absolute;
  z-index: 1;
  border-width: 18px;
  right: -36px;
  border-color: transparent transparent transparent #444;
  top: -3px;
}
.status-bar li .triangle-right {
  display: inline-block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 15px;
  position: absolute;
  right: -30px;
  z-index: 1;
  border-color: transparent transparent transparent #656565;
}
.status-bar li.checked {
  background: #779900;
}
.status-bar li.checked .triangle-right {
  border-color: transparent transparent transparent #779900;
}

html:

  • 第一步
  • 第二步
  • 第三步

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111532.html

相关文章

  • CSS语义思维

    摘要:除了其本身的语法规则,我们必须自我约束,引入语义规则,不仅仅是为了提高可读性这样的理由,而是拉近人与机器的距离,让我们在思维上更加和代码契合,这样才能写出优秀的程序。 前一阵子在项目组中讲了一个关于CSS的Session,在讲之前我曾收到了许多意见,大部分是希望能讲讲CSS实用性的技术,比如盒模型,CSS3之类的。干货人人都喜欢,因为看得见摸得着,拿来就有用,但我最后还是决定讲一些湿货...

    icattlecoder 评论0 收藏0
  • CSS语义思维

    摘要:除了其本身的语法规则,我们必须自我约束,引入语义规则,不仅仅是为了提高可读性这样的理由,而是拉近人与机器的距离,让我们在思维上更加和代码契合,这样才能写出优秀的程序。 前一阵子在项目组中讲了一个关于CSS的Session,在讲之前我曾收到了许多意见,大部分是希望能讲讲CSS实用性的技术,比如盒模型,CSS3之类的。干货人人都喜欢,因为看得见摸得着,拿来就有用,但我最后还是决定讲一些湿货...

    hqman 评论0 收藏0
  • 什么是CSS Modules ?我们为什么需要他们

    摘要:我们将去探索它的目的和主旨。这到底是什么呢我们为什么要这么做呢我们很快就进行介绍。我们不需要人为处理和文件。我们不写纯,我们需要在一个类似这样的文件中取写我们所有的标签。这就是样式也有作用域的原因。换句话说消除了特殊性问题。 原文地址:https://css-tricks.com/css-mo...最近我对CSS Modules比较好奇。如果你曾经听说过他们,那么这篇博客正适合你。我们...

    dongfangyiyu 评论0 收藏0
  • 正确分析结构使用正确的HTML标签。CSS样式一起。

    摘要:,把他们的宽度平分三份,。三份都一样,所以共同属性写在中。,存在换行时,基本都使用块级元素等等,如果不存在换行的话才使用标签。,整理代码,把相同样式写到一起。在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left。 2,把他们的宽度平分三份,33.3%。三份都一样,所以共同属性写在comment...

    DTeam 评论0 收藏0
  • 移动端网页怎么做?

    摘要:移动端网页最大的特点是什么自适应不同尺寸的屏幕高大上的叫法响应式知道了自适应网页怎么做岂不是能很好解决问题了那么自适应网页怎么做呢网上关于这方面的文章有很多,我简单的整理一下。 移动端网页最大的特点是什么?自适应不同尺寸的屏幕!高大上的叫法:响应式!知道了自适应网页怎么做岂不是能很好解决问题了?那么自适应网页怎么做呢?网上关于这方面的文章有很多,我简单的整理一下。 一、 HTML设置 ...

    luoyibu 评论0 收藏0

发表评论

0条评论

Vultr

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<