zoukankan      html  css  js  c++  java
  • css绘制小箭头和三角形

    在前端日常工作中,会有一些需要用纯css实现的小标志,如小箭头或三角形,下面简单地实现一下

    1. 制作小箭头
      .arrow{
          width: 20px;
          height: 20px;
          margin-top: 50px;
          margin-left: 50px;
          border-top: 1px solid #000;
          border-left: 1px solid #000;
          transform: rotate(45deg);/*旋转角度*/
      }
      <div class="arrow"></div>
    2. 制作三角形
      .triangle{
          width: 0;
          height: 0;
          border-width: 100px;
          border-style: solid;
          border-color: red transparent transparent transparent;
          transform:rotate(45deg);
      }
      <div class="triangle"></div>
    3.  让多个元素在一行显示

      (1)display:inline把元素转化为行内元素,但是宽高属性不起作用
      (2)display:inline-block可以让元素在一行显示,但是他会受空格、换行键的影响,会有默认间距
      =>解决办法:
      1.去掉空格和换行键的影响 让标签全都在一行(这种方法不推荐,阅读性不好)
      2.给加了display:inline-block属性的元素的父元素加一个属性font-size:0

      display:inline-block在ie6 7下不兼容的解决办法?
      dispaly:inline;//css hack ie浏览器可以识别
      zoom:1;//触发css hack的layout

      (3)利用浮动floa:left/right,但是需要清浮动

  • 相关阅读:
    ElasticSearch 2 (10)
    zookeeper 配置
    zookeeper
    ES 聚合函数
    win 7安装 linux
    Elasticsearch分布式搜索集群配置
    Elasticsearch 插件安装
    为Elasticsearch添加中文分词,对比分词器效果
    .net 4.0 网站发布(转)
    ssm 网页
  • 原文地址:https://www.cnblogs.com/lhjfly/p/10256860.html
Copyright © 2011-2022 走看看