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