仿微信导航栏

最新推荐文章于 2021-08-21 23:49:26 发布

qq_18314469

最新推荐文章于 2021-08-21 23:49:26 发布

阅读量305

点赞数

分类专栏： CSS html

本文链接：https://blog.csdn.net/qq_18314469/article/details/84571664

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

问题：

1. 导航栏背景：

获得微信官网的背景图片，将图片设置为背景并且只在 “X” 轴方向重复显示，“Y” 轴不重复，设置 background 属性：

background: url('../pictures/3S9sFMD.jpg');  (设置背景图片)
background-repeat: repeat-x;  (设置"X"轴方向重复)

background 相关属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

2. 当鼠标经过导航栏中的链接时 “显示背景图片” ，用到 “滑动块” ，解决如下：

滑动块的特点：不设置 width ，只设置 height ，元素的宽度由内部的文本决定，背景宽度随文本长度而定；起始 width 为 0，不显示背景，为了将背景显示出来，可设置元素的 padding-left 和 padding-right 的值撑开盒子。

背景图片：

思路：

首先将图片两端的两个小椭圆显示出来，使用如下的元素嵌套方式：

<a> <span>首页</span> </a> 其中 a 标签用来显示 “左半圆” ，“右半圆” 用 span 显示。

两个元素的背景都是设置为该图片并设置左右内边距：

background ：url ("../pictures/3w4CwHw.png") no-repeat ；

padding-left ：15px；（用于 a 标签） padding-right ：15px；（用于 span 标签）

此时会发现出现 “两个” 左半圆（ a 标签和 span 标签显示同样的背景，因为背景默认的对齐方式是左对齐）如下：

此时只需要设置 span 的背景图片对齐方式为右对齐即可：background-position ：right （该属性可设置背景图片 X 和 Y 方向的对齐方式，设置一个属性，另外一个默认为 “center” ）或者 background : url() no-repeat right ;

当鼠标经过超链接时，需要 a 和 span 同时显示各自的背景图片才可以，设置如下：

a:hover { background: url("../pictures/3w4CwHw.png") no-repeat ; }

a:hover span { background: url("../pictures/3w4CwHw.png") no-repeat right ; } (该选择器为父子选择器，当鼠标经过链接时，span 的样式)

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信导航栏</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .avg {
            height: 75px;
            padding: 0 193px;

            /*text-align: center;*/
        }
        .wx {
            display: block;
            vertical-align: center;
            /*background: url("../pictures/jingling.png") no-repeat;*/
        }
        .wx-img {
            dislpay: inline-block;
            width: 130px ;
            height: 45px ;
            vertical-align: middle;
            margin-top: 14px;
            margin-right: 77px;
            float: left;
        }
        .guide {
            list-style: none;
            display: inline-block;
            margin-top: 18px;
        }
        .guide a {
            display: inline-block;
            color: #fff;
            font-size: 14px;
            height: 33px;
            font-weight: 400;
            padding-left: 16px;
            line-height: 33px;
            text-decoration: none;
            margin: 0 1px;
        }
        .guide span {
            display: inline-block;
            height: 33px;
            padding-right: 16px;
        }
        .guide a:first-child {
            background: url("../pictures/lTcb_ve.png") no-repeat;
        }

        .guide a:hover {
            background: url("../pictures/3w4CwHw.png") no-repeat;

        }

        .guide a:hover span {
            background: url("../pictures/3w4CwHw.png") no-repeat right;
        }

    </style>
</head>
<body style="background: url('../pictures/3S9sFMD.jpg'); background-repeat: repeat-x;">
    <div class="avg">

        <a >
            <img src="../pictures/dNEBuK6.png" class="wx-img" >
        </a>

        <ul class="guide">
            <a style="font-weight: 600;background: url('../pictures/lTcb_ve.png') no-repeat;" href="https://weixin.qq.com/">
                <span style="background: url('../pictures/lTcb_ve.png') no-repeat ;">首页</span>
            </a>

            <a href="http://kf.qq.com/product/weixin.html">
                <span>帮助与反馈</span>
            </a>
            <a href="https://mp.weixin.qq.com/">
                <span>公众平台</span>
            </a>
            <a href="https://open.weixin.qq.com/">
                <span>微信支付</span>
            </a>
            <a href="https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F">
                <span>微信网页版</span>
            </a>
            <a href="https://wx.qq.com/">
                <span>表情开放平台</span>
            </a>
            <a href="https://ad.weixin.qq.com/">
                <span>微信广告</span>
            </a>
        </ul>

    </div>
</body>
</html>