qzmjef 发表于 2024-6-29 13:53:29

纯用HTML＋css做导航条


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.先定义一个盒子，用（css＋div）的方式，<span style="color: black;">而后</span>加上背景色，<span style="color: black;">这儿</span>是盒子的背景色。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-16f8e568c35c47c60bdbfb87db5cee94_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.再用css定义<span style="color: black;">没</span>序列表，并且用到float=left（<span style="color: black;">这儿</span>是浮动的意思）。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-f44fff1af5ccc82ffacd8be9506a8b1a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.重点来了，用:hover样式（鼠标悬停样式）</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-23796818993ddb3e61438c73b9e13a28_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.<span style="color: black;">而后</span>就到了2级导航（继续用css定义）。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-522ed9732678e71b17873043ce4f6c9f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.最后是HTML-body部分。（要用css＋div<span style="color: black;">办法</span>，<span style="color: black;">这般</span>就能很好的利用css定义的属性）</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-cf0b629a51b707a52a26608ff971c0c8_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">根据</span>上面图中的代码按<span style="color: black;">次序</span>来输入<span style="color: black;">就可</span>看到如下效果</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-c6e246d9d7963386facd7fc0a53ec737_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-bf139591d3e23719408a1fabc56e1928_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">代码内容很简单适合小白看，<span style="color: black;">要紧</span>代码有注释，有误评论区@我。<span style="color: black;">倘若</span>觉得有用给个赞呗(=^▽^=)。</p>




m5k1umn 发表于 2024-9-30 00:30:54

这篇文章真的让我受益匪浅，外链发布感谢分享！

7wu1wm0 发表于 2024-10-17 08:12:52

这篇文章真的让我受益匪浅，外链发布感谢分享！

j8typz 发表于 2024-11-5 21:16:14

谢谢、感谢、感恩、辛苦了、有你真好等。
页: [1]
查看完整版本: 纯用HTML＋css做导航条