html+css部分面试题（4）+拼多多商家入驻网页轮播图hover效果

最新推荐文章于 2022-07-22 20:28:23 发布

Astar stars

最新推荐文章于 2022-07-22 20:28:23 发布

阅读量672

点赞数 2

分类专栏： html+css面试题文章标签： html 前端 css

本文链接：https://blog.csdn.net/astar2022/article/details/125845295

版权

html+css面试题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

31:为什么要初始化样式？

32. BFC 是什么?

33.HTML 与 XHTML——二者有什么区别？

34.html 常见兼容性问题？

35.对 WEB 标准以及 W3C 的理解与认识

补充：拼多多商家入驻页面轮播图hover效果实现

31:为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异。

但是初始化 CSS 会对搜索引擎优化造成小影响。

32. BFC 是什么?

BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin重叠的问题。

创建BFC

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

开启BFC后，元素将会具体如下的特性：

1、父元素的垂直外边距不会和子元素重叠（解决父子外边距重叠的问题）

2、开启BFC的元素不会被浮动元素所覆盖

3、开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）

33.HTML 与 XHTML——二者有什么区别？

1. 所有的标记都必须要有一个相应的结束标记。

2. 所有标签的元素和属性的名字都必须使用小写。

3. 所有的 XML 标记都必须合理嵌套。

4. 所有的属性必须用引号 "" 括起来。

5. 把所有 < 和 & 特殊符号用编码表示。

6. 给所有属性赋一个值。

7. 不要在注释内容中使用 "--" 。

8. 图片必须有说明文字。

34.html 常见兼容性问题？

浏览器默认的margin和padding不同
解决方案：加一个全局的 *{margin:0;padding:0;} 来统一

35.对 WEB 标准以及 W3C 的理解与认识

(1).标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、

(2):使用外链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、

(3):更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

补充：拼多多商家入驻页面轮播图hover效果实现

通过上面的动态图我们可以看出，当鼠标移入轮播图时，会出现一个左右切换图片的按钮，当我们把鼠标移入到按钮时图片颜色进一步加深。我们要实现的便是这样的hover效果。

这个效果要实现其实上具体不难也就是考验我们对于目标的选中和opactity（透明度）的运用。

方法：首先给两个按钮设置opacity为0，然后当鼠标移入轮播图时，给它一个小一点的透明度，当鼠标移入按钮时，给它一个大一点的透明度。

代码如下：

html部分：

<div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./img/背景图1.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/背景图2.png" alt="" />
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev prev"></div>
                    <div class="swiper-button-next next"></div>
                </div>
  </div>

css部分：

.prev,
.next {
  opacity: 0;
  padding: 20px 12px;
  transition: all 0.5s;
  color: white;
  background-color: rgb(0, 0, 0);
}
/* hover动画设置 */
.swiper:hover .prev,
.swiper:hover .next {
  opacity: 0.3;
}
.swiper .prev:hover,
.swiper .next:hover {
  opacity: 0.8;
}

通过以上代码就可以实现了，轮播图暂时是用swiper插件做的，想要了解的话可以看我之前小米官网（3）那篇文章，本篇内容到此结束，如果可以帮助大家，那就是我的荣幸了。