第二十五章CSS中的技巧（导航栏、下拉列表）

news2024/11/18 1:51:16

1.CSS精灵

1.什么是CSS精灵

英文叫法 CSS sprites，通常被解释为“CSS图像拼合”或“CSS贴图定位”;其实就是把网页中一些背景图片整合到一张图片文件中，再利用css“background-image”，

“background-repeat”,“background-position”的组合进行背景定位，background-position用数字能精确的定位出背景图片的位置。适用于一般小图标，不适合大背景大布局背景。

2.CSS精灵优缺点

优点:

1、减少网页的http请求，从而大大的提高页面的性能;

2、图片命名上的困扰;

3、更换风格方便。

缺点:

必须要限定容器大小符合背景图元素位置，需要计算。

2.CSS滑动门技术

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。如微信官网导航。

滑动门核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度，以便能适应不同字数的导航栏。

滑动门核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度，以便能适应不同字数的导

子阴影航栏。

先给一个a标签，用来装背景图的左边圆角，a不给宽度，由文字撑开宽度，再在a里面加一个span 盒子还是用之前的背景图的，但是是装背景图的右边圆角，字写在 span 里面的，span 又是属于a的，

3.CSS小箭头

平常在网页中，经常会有空心箭头，除了用图片外，可以用CSS来实现。基本思路是，用CSS绘制两个三角形，通过绝对定位让两三角形不完全重叠，例如制作向右的空心箭头，位于前面的三角形border颜色是需要的颜色，后面的三角形border颜色与包裹它们的div背景色一致，然后设置前面三角形的left值比后者的left多1px，这样就可容易生成空心箭头，但是在ie8以下浏览器中，需要设置父元素和子元素的优先级，否则制作的三角形无法显示。

html代码：

CSS代码：

style>
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 100px;
			height: 500px;
			margin: 0 auto;
			border: 1px solid royalblue;
			background: white;
		}
		.arrow-box{
			width: 30px;
			height: 30px;
			margin: 20px auto;
			position: relative;
		}
		.right{
			width: 20px;
			height: 20px;
			position: absolute;
			left: 0;
			top: 0;
			border: 1px solid blue;
		}
		.right-arrow1,.right-arrow2{
			width: 0;
			height: 0;
			display: block;
            position: absolute;
            left: 0;
            top: 0;
            border-top: 10px transparent dashed;
            border-right: 10px transparent dashed;
            border-bottom: 10px transparent dashed;
            border-left: 10px white solid;
            overflow: hidden;
		}
		.right-arrow1{
			left: 1px;
			border-left: 10px blue solid;
		}
		.right-arrow2{
			border-left: 10px white solid;
		}
		.left{
			width: 20px;
			height: 20px;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			border: 1px solid blue;
		}
		.left-arrow1,.left-arrow2{
			width: 0;
			height: 0;
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 5;
		border-top: 10px transparent dashed;
            border-right: 10px transparent dashed;
            border-bottom: 10px transparent dashed;
            border-left: 10px white solid;
            overflow: hidden;
		}
		.left-arrow1{
			border-right: 10px blue solid;
			
		}
		.left-arrow2{
			left:1px;
			border-right: 10px white solid;
		}
		</style>