Html+Css实训总结-------bug收集

最新推荐文章于 2024-06-26 18:06:02 发布

Caiyun6666

最新推荐文章于 2024-06-26 18:06:02 发布

阅读量1.2k

点赞数 2

分类专栏： bug 文章标签： css html

本文链接：https://blog.csdn.net/qq_48718857/article/details/107786046

版权

bug 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、圆角按钮button点击后出现矩形框线

错误示例在这里插入图片描述解决方式：

{
outline：none
}

解决之后的正确示例
在这里插入图片描述

二：图标引用方法混乱

方法1

 @font-face {
    font-family: ccy;
    src: url("../font/fontAbout/iconfont.woff");
    src: url("../font/fontAbout/iconfont.ttf");
}
span{
   font-family:ccy
}

<span>&xe9b2</span>

在这里插入图片描述
其中@font-face 在自定义字体以便以后引用，后缀名为woff即为火狐浏览器适配，后缀名为tff即为谷歌浏览器适配文件

方法2：

<head>
  <link rel="stylesheet" href="../font/fontAbout/iconfont.css">
  </head>
  <body>
  <span class="iconfont icon-twitter"></span>

在这里插入图片描述
ps:字体库路径不能错误

三、固定定位显示问题

设定position:fixed后,红圈部分被覆盖
错误示例：
在这里插入图片描述解决方法：
给下面的第一个部分设置margin-top:(nav高度)即可
正确示例：

四、选择器问题

在这里插入图片描述伪类选择器过于复杂

解决方法：给每个大类取名字，小的用伪类选择器

五、按钮旋转抖动问题

错误示例：
在选中按钮时旋转后依旧是选中状态出现抖动

解决方法：
给按钮外面加一个正方形div，用他控制按钮的旋转

六、placeholder颜色问题

  input::-webkit-input-placeholder{
    color: #213869;
    margin-left: 20px;
    font-size: 25px;
}
::-moz-placeholder{
    color: #213869;
    font-size: 18px;
    opacity: 1;/*这里之前是没有的，发现问题后才加上去的*/
}