html li 怎么合并,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

html li 怎么合并,HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）...相关推荐

css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享发布时间:2009-10-15 12:48:01 作者:佚名我要评论可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
Web前端知识CSS（清浮动的方法、CSS精灵图、滑动门）
一.清浮动的方法清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点:不够灵活,适用于高度固定的布局中 2.为浮动元素的父级盒子设置浮动优缺点:会产生新的浮动问题 3.为浮动元素的父盒 ...
【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
php多重滑动门,CSS如何实现滑动门效果
CSS实现滑动门效果主要通过设置伪元素的样式来实现,在鼠标滑过时给元素设置display:block让它显示,鼠标滑出时隐藏一个网站的导航栏对于网站来说有着举足轻重的地位,导航栏的风格也是各式各样的 ...
CSS——CSS滑动门及其应用（制作微信导航栏） ※
滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一 ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
gulp css 压缩合并
//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方concat = require('g ...

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

html li 怎么合并,HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）...相关推荐

最新文章

热门文章