美文网首页PHP学习笔记
PHP从入门到精通,037第三章HTML5+CSS3——CSS3

PHP从入门到精通,037第三章HTML5+CSS3——CSS3

作者: 极客研习社 | 来源:发表于2019-05-21 12:31 被阅读1次

(一)新增的伪类选择器:before和:after

:before——在盒子的内部的前面插入一个行显示的盒子
:after ——在盒子的内部的后面插入一个行显示的盒子
注意:这两个选择器必须和content一起使用,即使没有内容插入,也要写个空字符串。

<head>
    <style type="text/css">
     input {
      float:left;
      height:20px;
}
     div:before {
      content:"";
      width:25px;
      height:25px;
      background:url(./images/tu1.png) no-repeat;
      display:line-block;
      float:left;
     }
    div:after {
      content:"";
      width:25px;
      height:25px;
      background:url(./images/tu2.png) no-repeat;
      display:line-block;
      float:left
     }
    </style>
</head>
<body>
    <div>
        <input type="text" name="sousuo">
    </div>
</body>

相关文章

网友评论

    本文标题:PHP从入门到精通,037第三章HTML5+CSS3——CSS3

    本文链接:https://www.haomeiwen.com/subject/oqidzqtx.html