CSS练习-导航栏斜线分隔-利用伪元素 - 五木十架-html教程-PHP中文网

CSS练习-导航栏斜线分隔-利用伪元素 - 五木十架

php中文网

发布： 2016-05-22 17:19:45

原创

2186人浏览过

开始切第一张图了，第一个遇到的问题是顶部导航栏这里，用斜线分割。想到的思路是用伪类:before或者:after实现

先写html结构。

<span style="color: #008000;"><!--</span><span style="color: #008000;"> 导航栏begin </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="header_right fr"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>About<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>Features<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>Blog<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="link"</span><span style="color: #0000ff;">></span>Shop<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="alarm fr"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./images/alarm.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="alarm"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">images</span><span style="color: #0000ff;">><</span><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="alarm_number"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
 <span style="color: #008000;"><!--</span><span style="color: #008000;"> 导航栏end </span><span style="color: #008000;">--></span>

登录后复制

再是样式

<span style="color: #800000;">.link:before</span>{<span style="color: #ff0000;">content</span>:<span style="color: #0000ff;"> "/"</span>;<span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;">0 24px</span>;<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> grey</span>;}<span style="color: #800000;">
.link:first-child:before</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;}

登录后复制

先用：bofore，设定内容是"/"，前后margin，颜色。再用first-child将第一个元素之前的伪类去掉。

立即学习“前端免费学习笔记（深入）”；