HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）

1.实现多个div盒子横排列，鼠标点上去后显示border，相连的border合并。

     ：利用position：relative的层级比标准流高（后来居上原则），与margin-left：-1px；

       若都有position：relative 利用z-index提高层级

效果：

代码：

 

2.微信滑动门

查看原理：如何使用滑动门

效果：

代码：

        

            

                首页
            
            

                    公众平台
            
            

                技术与支持
            
            

                公众平台
            
            

                帮助与反馈
            
        
    

 

 

3. 增加icomoon字体图标 ，

   本质其实是文字，可以改变透明度、旋转度，颜色、产生阴影、透明效果等. 体积小。

     网站

           下载好的包：

                       

  1. 将fonts 复制到项目目录下。

   2.打开demo.html  ，复制红框的图案到想要放入的位置。  

   3.声明 字体。

//链接外部CSS样式


@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?6ps2qh');
    src:  url('../fonts/icomoon.eot?6ps2qh#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?6ps2qh') format('truetype'),
    url('../fonts/icomoon.woff?6ps2qh') format('woff'),
    url('../fonts/icomoon.svg?6ps2qh#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

4   引用字体： 

• 额外加标签法       :1.  打开demo.html  ，复制红框的图案到 < i > 标签内。               

                                     2.设置字体样式      font-family: 'icomoon' ;

  

• 伪元素插入法      ：div ::after { content : " \e93f"  }    //content是图片红框前的字符。

                 注意：伪元素的好处在于不用多写一个i盒子 。并且after 伪元素也可以算是一个盒子。也可以使用position等

 

网址前 icon ：位置放到项目根目录下。 

 

注意：   SVG转为字体图标： import icons  -> xx.svg

               追加字体图标：import icons  -> selecttion.json 

 

 

 

 

4.去掉 设置的li 的上下左右边框：

     思路：让父级的大小与子级大小一样，子级会有多余的border， 多余的用overflow隐藏

               但是问题又来了，这样子级的宽度不高li会掉下来。

               解决在div（父级） 与li（子级）之间加一个宽度比父级大的的宽度高 ul

 

 

5、让搜索框下面显示数据 datalist

 

 

6.纯css 三角形原理

均分原理。当div的宽高是0时，设置border时，会从中心向上下左右四个角均分四个border