WMVVMW-CSDN博客

原创 img图片底部空白区域怎么解决

解决页面img图片底部有空白区域平时插入图片经常会遇到这种底部会有空白区域的问题，并不是img高度设置的问题，方式一设置img为块级元素，就可以解决这个问题<style> img { display: block; width: 188px; height: 235px; } </style>方式二<style> img{ vertical-align: top;

2021-05-25 17:37:14 334

css字体图标引入方法在网页中将小图标制作成字体是很多网站的常用做法，为的是减少页面请求。先推荐一个字体图标库（阿里巴巴矢量图标库）https://www.iconfont.cn/一、首先根据项目按需选择好自己需要的图标，添加至入库二、都选好后，将库中的图标添加至项目中，没有项目可先创建项目，添加在项目里后，将项目下载至本地，解压出来即可三、最后就可以在代码中引入图标了（字体图标文件里的html文件里可打开查看图标的代码）注...

2021-05-25 16:23:11 715

原创万能清除法解决高度塌陷

高度塌陷父级元素高度自适应，子级元素float后或者子元素脱离文档流时，造成父元素高度为0，称为高度塌陷问题。万能清除法解决高度塌陷/* 万能清除法 */.clear-fix::after { content:""; width:100%; height:0; display:block; clear:both; overflow:hidden; visibility:hidden;}/* 用于兼容低版本ie */.clear-fix{

2021-05-20 16:38:20 247

原创 html+css实现元素在浏览器居中

实现元素在浏览器居中1、已知元素的宽高大小给固定定位，左边与上边方向50%，再给元素margin（外边距）左和上自身宽高的一般负值 width: 300px;height: 400px;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -200px; <style> div{ width: 300px; height: 4

2021-05-20 08:39:31 445

原创 html+css实现轮播图

html+css实现轮播图1、利用a标签的锚点属性来实现。2、给对应的图片盒子设置ID属性值。3、将图片盒子的ID属性值加入对应的a标签中的href属性。4、图片盒子加浮动或者flex让其在一行内显示。5、父盒子添加overflow:hidden;属性让超出的图片隐藏。注意：图片与a标签在同一个父级元素下不同的元素中示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="

2021-05-19 21:15:54 4758 1

原创 img实现垂直居中

当在一个给定宽高盒子内加入img标签插入一张图片，图片宽高小于盒子时，图片默认在左上角显示。实现代码：style样式<style>div{width:600px;height:500px;background-color:#86d2f0;margin:100pxauto;border:1pxsolidred;/*第一步*/text-align:cent...

2021-05-18 18:30:20 1153

原创 CSS精灵图的使用

css精灵图（sprite）是通过将多个图片融合到一张图里面，通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。

2021-05-15 15:43:42 134

Wjc_1hh的博客