html与css后阶段搭配使用案例总结

一、图片精灵

1.图片精灵主要来实现引用一张很大的图片，里面有很多的小图片，但可能只要用到其中的一两个小图片。原理就是把不需要的图片隐藏，展示自己所需要那一两个图片。

2.

如果只想要在页面展示第一列的四张图片，就可以用图片精灵的方法。整张大图片用背景图片的方式插入。

3.

1. 操作步骤：a.首先利用ps，Axure或者其他软件去测量这一列四张图片的坐标和每张小图片的宽高，并标记好。用background-position 进行定位

b.打开vscode创建html文件和css文件，进行链接。

c.html文件应该写的：

d.css文件写的样式

二、二级菜单

1. 二级菜单应用场景主要是网站页面导航栏，鼠标悬浮在导航栏的字那里，出现二级菜单的下拉框。
2. 这种出现的二级菜单都是一列或几列排序，可以用html无序列表进行实现。鼠标不悬浮上去不出现，用display:none进行隐藏；当鼠标悬浮上去用伪元素选择器：hover的样式搭配display:block进行展现。
3. a:鼠标未悬浮上去：

鼠标悬浮上去：

b.html

c.css

三、粘性布局：

1. 应用场景主要是网站页面的导航栏随着滚动条向下滑的时候不会消失而固定在页面那不动。主要用position:sticky来实现。并且要给写了该样式的类添加top:xxx px;而且要注意优先级，把导航栏的优先级设置为最大，用z-index来实现，效果才能实现。
2. 案例展示

1. 实现这种结构（先上下结构然后左右结构）最上面一行随着下面内容滚动而固定在那显示，除了上述说的，还应该注意左边导航栏的位置，要让它固定在那不动，要给左边的整个导航栏的类属性加position:fixed样式。    四、flex弹性布局
2. 1.flex属性很多，能达到的效果很多，下面主要就说一下网站页面一个一个个小卡片式的整齐大体布局也可以用它来实现。

 

1. html

 

1. css

 

1. 注意用到的属性，首先要知道在父元素写display:flex，然后采用行排列，列布局的方法flex-direction:row;以及换行样式：flex-wrap:wrap;来实现