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

电玩女神 2021-11-05 02:12 285阅读 0赞

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

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

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

效果：

![20190809181604411.gif][]

代码：

2.微信滑动门

查看原理：[如何使用滑动门][Link 1]

效果：

![20190809181118726.gif][]

代码：

3. 增加icomoon字体图标 ，

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

[网站][Link 2]

下载好的包：

![20190810164613120.png][]

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

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

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 > 标签内。               ![20190810164943725.png][]

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

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

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

网址前 icon ：位置放到项目根目录下。 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70][]

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

<input type="text" name="" list="datalists">
        <datalist id="datalists">
            <option value="百度"></option>
            <option value="百度"></option>
            <option value="腾讯"></option>
            <option value="阿里巴巴"></option>
            <option value="酷狗"></option> 
            <option value="百白何"></option>
        </datalist>

6.纯css 三角形原理

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

[20190809181604411.gif]: /images/20211104/8311ad916198430f8ff09b998288ba71.png
[Link 1]: https://blog.csdn.net/weixin_40980087/article/details/81393689
[20190809181118726.gif]: /images/20211104/0930262c59384cc49b9c3c7c8827f545.png
[Link 2]: https://icomoon.io/
[20190810164613120.png]: /images/20211104/eb23cb77e900484ba77d8b596d075169.png
[20190810164943725.png]: /images/20211104/23a482d81d364242928fc01c5ab1298a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70]: /images/20211104/bd95af049f6244ccaaf8665aa1b35cc7.png