摘要：总所周知，在CSS的世界中有很多样式和效果看起来简单实则不那么简单，就比如一个小小的▲符号元件，也是通过指定样式产生的，而并不是开箱即用的产物。 要掌握如何设计一个理想的▲符号元件，我们就必须先深入了解边框border的结构组成。 代码如下： .frame { background-color: # 阅读全文

摘要：写一个简单的横向布局导航栏对li元素指定属性display: inline-block来横向排布li元素。 ul li { display: inline-block; } 结果li元素之间出现间隙： 之所以会出现间隙，是由于无序列表项之间的占位符导致的： 对此我们有一下三种行之有效的解决之道： 通 阅读全文

摘要：使用伪类选择器:hover配合相邻兄弟选择器+，实现鼠标触发一个元素，响应两个元素的样式。 代码如下： <style> .header-bar-search { display: inline-block; height: 50px; font-size: 16px; margin-top: 100 阅读全文