请帮帮我!我花了两天的时间来了解这种情况:
我找到了一个网站:http://www.wpbeginner.com,它的侧边栏中有令人惊叹的小工具图标,可以指向不同的页面。然后我试着做一些类似的东西。我得到了他们的窗口小部件代码。
<div class="guideicons">
<a href="http://www.wpbeginner.com/start-a-wordpress-blog/" class="guideicon starting">Starting a<br>Blog</a>
<a href="http://www.wpbeginner.com/wordpress-performance-speed/" class="guideicon speed">WordPress<br>Performance</a>
<a href="http://www.wpbeginner.com/wordpress-security/" class="guideicon security">WordPress<br>Security</a>
<a href="http://www.wpbeginner.com/wordpress-seo/" class="guideicon seo">WordPress<br>SEO</a>
<a href="http://www.wpbeginner.com/common-wordpress-errors-and-how-to-fix-them/" class="guideicon errors">WordPress<br>Errors</a>
<a href="http://www.wpbeginner.com/wp-tutorials/how-to-start-an-online-store/" class="guideicon store">Building an<br>Online Store</a>
</div>
现在我想了解两件事
首先,如您所见,他在开头添加了这个标记,然后
“class=”向导图标开始“.向导图标+图标名称=图标和它的名称出现在网页上他做了什么使它发生?
其次,排列2列,每列有3个图标,他是如何通过这个简单的代码html5完成的?
非常感谢
发布于 2018-06-15 05:39:03
他在.sidebar a.guideicon类中将宽度设置为47%。因为宽度被设置为容器宽度的47%,所以不能容纳超过2个图标,因此它会溢出到下一行。
打开开发人员工具,调整宽度。如果将宽度设置为10%左右,它们将全部放在同一行中。
发布于 2018-06-15 06:02:42
如果你查看这个侧边栏,你可以看到哪个类做了什么。在您的示例中,他使用类guideicon
来实现相同的样式,并使用规则.sidebar a.guideicon
访问此侧栏中的所有a
标记。然后,他使用第二个类,例如speed
来添加一个图标,使用:before
伪选择器从他们的图标池中添加一个图标,规则如下:content: "\f00b";
& font-family: Wpbeginner;
。这就是Font Awesome是如何工作的(我不确定它现在是否还像这样工作)。
如果你想像这样添加你自己的图标,你只需要这样做:
https://codepen.io/anon/pen/ZRJPEv
我希望我能帮上忙
https://stackoverflow.com/questions/50866006
复制相似问题