- 博客(4)
- 收藏
- 关注
RSS订阅原创 通过linear-gradient实现背景图片的虚化
有时我们需要用精美的照片作为内容的背景，但是又担心背景“喧宾夺主”干扰了用户的注意力。这时候，就可以尝试在图片上面蒙上一层半透明的图层。 我们在background-image设置两张图片，排在前面的是用于虚化的linear-gradient模板，将显示在上层；排在后面的背景图片将显示在下层，为了不把背景图片完全遮住，这里需要将模板设置为半透明。 body::before { content: ""; position: fixed; top: 0; left: 0; widt.
2021-04-02 16:54:06
904
1
原创 在下拉列表框中实现placeholder
我们知道表格的input只要有输入框，一般都可以设置Placeholder来提醒用户。然而，下拉列表外观类似一个输入框，却无法设置placeholder。 这里采用一个替代的方式实现，我们可以把第一个选项设置为代替的“提示选项”，将其默认设置为selected和disabled，这样用户也不会误选这个选项。 <select name="role" required> <option selected disabled value="">选择你的职业</.
2021-04-02 16:46:40
1272
原创 几种居中方式：text-align、margin、flex
在进行网页排版过程中，经常遇到需要将内容居中。居中的方式多种多样，针对不同的内容类型，选择适合的方式将事半功倍。 文本居中 第一种常见方式是将文本居中 p { text-align: center; } 通过margin居中 这种方式适用于display属性是block或者inline-block时适用，因为inline element无法设置文字方向的margin。下面的代码使用了margin属性的shorthand，第一个值0将交叉轴方向margin设为0，第二个值auto将主轴方向.
2021-04-02 16:36:23
636
原创 通过CSS一次性在所有外部链接后面插入图标
最近在开始自学前端，目前主要跟着mdn上的教程走，CSS教程学了一半。看孙叫兽博文时受到启发，决定在自学过程中把一些经验教训记录下来，供以后自己和他人参考。 任务 有时候我们需要在外部链接后面加上如下图的独特图标，有两种方法： 在html文档外部链接后面直接插入图像，display设置为inline-block，再调整大小就可以。但是在有很多外链的页面里这种方法效率很低，需要重复大量代码； 第二种方法就是直接在CSS里通过attribute selector选中全部外链，在通过 ::after..
2021-03-19 18:40:39
837
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人