image.png

持续踩坑中。。。。。。。

1. :nth-child() css选择器失效？

.options-item:nth-child(1) {
        background-color: #2AADE5;
    }

注意：.options-item 和 :nth-child(1)之间不能有空格，否则就失效。

2. 绝对定位的居中

此问题转载于https://www.php.cn/css-tutorial-409962.html
1、兼容性不错的主流css绝对定位居中的用法：

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

注意：这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。
2、css3的出现，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，可以这样实现css绝对定位居中：

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

3、margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

4、使用css3盒模型:flex布局实现css绝对定位居中。这种情况是在不考虑低版本浏览器的情况下可以使用。

3.网站标志使用

 <link rel='icon' href='image.png' type='image/x-ico' />

4.阿里巴巴的矢量图库如何使用

其实下面这个方法不好，彩图不好弄

1.找到我们喜欢的图，放入咱们的购物车中

image.png

2.将图片加入项目中

image.png

3.在项目中导入css 并使用图标（我选择的是 Font class 的方式）

image.png

引入css文件

 <link rel="stylesheet" href="//at.alicdn.com/t/font_1840871_qmosky0l5l.css">

页面中使用图标 注意了class 一定是iconfont + 图标的名称

<i class="iconfont  icon-tianqiyubao"></i>

5.html页面识别 \n

只要在结果所在的 div 的 css 设置：

white-space: pre-line;

然后页面就能成功识别 '\n' 并整齐的显示结果了。

6.maven项目资源过滤了icon图表解决方法

在pom.xml中加入这段话

</dependencies>
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
        <pluginManagement>
            <plugins>
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <configuration>
                        <encoding>utf-8</encoding>
                        <useDefaultDelimiters>true</useDefaultDelimiters>
                        <nonFilteredFileExtensions>
                            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                        </nonFilteredFileExtensions>
                    </configuration>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
</project>