华为网页界面上边栏（html+css小案例）

最新推荐文章于 2023-05-29 23:06:01 发布

～余温

最新推荐文章于 2023-05-29 23:06:01 发布

阅读量314

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/shzbbsns/article/details/126173377

版权

首先先给大家推荐个大部分网页都要用到的小矢量图网站：iconfont-阿里巴巴矢量图标库

复制svg代码到html里面就能使用，可以选择自己喜欢的颜色

小案例的效果图（主要是知道怎么利用矢量图穿插进去并且改变它的参数）

html的代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="images/favicon.icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="hw.css">
</head>
<body>
    <div class="counter-top">
        <div class="wrap">
            <div class="counter-top-one">
                <a href="#">
                    <span>登录</span>
                    <svg t="1659337541091" class="icon icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23259" width="12" height="12"><path d="M768 733.866667L674.133333 640H392.533333L298.666667 733.866667V810.666667h469.333333v-76.8z m42.666667-17.066667V853.333333H256v-136.533333L375.466667 597.333333h311.466666l123.733334 119.466667z m-85.333334-354.133333c0 106.666667-85.333333 192-192 192S341.333333 469.333333 341.333333 362.666667 426.666667 170.666667 533.333333 170.666667 725.333333 256 725.333333 362.666667z m-42.666666 0C682.666667 281.6 614.4 213.333333 533.333333 213.333333S384 281.6 384 362.666667s68.266667 149.333333 149.333333 149.333333S682.666667 443.733333 682.666667 362.666667z" fill="#e6e6e6" p-id="23260"></path></svg>
                </a>
            </div>
            <div class="counter-top-two">
                <a href="#">
                    <svg t="1659336596778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17045" width="12" height="12"><path d="M511.1 512.9l1.8-1.8-1.8 1.8z" fill="#ffffff" p-id="17046"></path><path d="M510.9 510.9l2.2 2.2c-0.7-0.8-1.4-1.5-2.2-2.2z" fill="#ffffff" p-id="17047"></path><path d="M512.1 648.1c8.3 0 15.8-3.1 21.5-8.3l2.2-2.2 21.5-21.5L743 430.4c12.4-12.4 12.4-32.8 0-45.3-12.4-12.4-32.8-12.4-45.3 0L512 570.9 326.2 385.2c-12.4-12.4-32.8-12.4-45.3 0-12.4 12.4-12.4 32.8 0.1 45.2l185.7 185.7 21.8 21.8 1.8 1.8c5.7 5.3 13.4 8.5 21.8 8.4z" fill="#ffffff" p-id="17048"></path><path d="M512.9 511.1l-1.8 1.8 1.8-1.8z" fill="#ffffff" p-id="17049"></path><path d="M513.1 513.1l-2.2-2.2c0.7 0.8 1.4 1.5 2.2 2.2z" fill="#ffffff" p-id="17050"></path></svg>
                    <span>选择区域/语言</span>
                    <svg t="1659337449337" class="icon icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22307" width="12" height="12"><path d="M523.377778 955.733333C278.755556 955.733333 79.644444 756.622222 79.644444 512c0-244.622222 199.111111-443.733333 443.733334-443.733333S967.111111 267.377778 967.111111 512c0 244.622222-199.111111 443.733333-443.733333 443.733333z m0-849.54074C299.614815 106.192593 117.57037 288.237037 117.57037 512c0 223.762963 182.044444 405.807407 405.807408 405.807407C747.140741 917.807407 929.185185 735.762963 929.185185 512c0-223.762963-182.044444-405.807407-405.807407-405.807407z" fill="#ffffff" p-id="22308"></path><path d="M523.377778 955.733333c-127.051852 0-225.659259-195.318519-225.659259-443.733333 0-248.414815 98.607407-443.733333 225.659259-443.733333S749.037037 263.585185 749.037037 512c0 248.414815-100.503704 443.733333-225.659259 443.733333z m0-849.54074c-102.4 0-187.733333 185.837037-187.733334 405.807407 0 219.97037 85.333333 405.807407 187.733334 405.807407s187.733333-185.837037 187.733333-405.807407c0-219.97037-87.22963-405.807407-187.733333-405.807407z" fill="#ffffff" p-id="22309"></path><path d="M523.377778 352.711111c-117.57037 0-235.140741-30.340741-339.437037-87.22963-9.481481-5.688889-13.274074-17.066667-7.585185-26.548148 5.688889-9.481481 17.066667-13.274074 26.548148-7.585185 96.711111 53.096296 208.592593 81.540741 320.474074 81.540741 113.777778 0 223.762963-28.444444 322.37037-83.437037 9.481481-5.688889 20.859259-1.896296 26.548148 7.585185 5.688889 9.481481 1.896296 20.859259-7.585185 26.548148-104.296296 58.785185-221.866667 89.125926-341.333333 89.125926zM197.214815 805.925926c-7.585185 0-13.274074-3.792593-17.066667-9.481482-5.688889-9.481481-1.896296-20.859259 7.585185-26.548148 102.4-54.992593 218.074074-85.333333 333.748148-85.333333 115.674074 0 231.348148 28.444444 333.748149 83.437037 9.481481 5.688889 13.274074 17.066667 7.585185 26.548148-5.688889 9.481481-17.066667 13.274074-26.548148 7.585185-96.711111-53.096296-204.8-79.644444-314.785186-79.644444-109.985185 0-219.97037 28.444444-316.681481 79.644444-1.896296 3.792593-3.792593 3.792593-7.585185 3.792593z" fill="#ffffff" p-id="22310"></path><path d="M948.148148 534.755556H98.607407c-11.377778 0-18.962963-7.585185-18.962963-18.962963s7.585185-18.962963 18.962963-18.962963H948.148148c11.377778 0 18.962963 7.585185 18.962963 18.962963s-9.481481 18.962963-18.962963 18.962963z" fill="#ffffff" p-id="22311"></path></svg>
                </a>
            </div>
            <div class="counter-top-three">
                <a href="#">
                    <svg t="1659336596778" class="icon icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17045" width="12" height="12"><path d="M511.1 512.9l1.8-1.8-1.8 1.8z" fill="#ffffff" p-id="17046"></path><path d="M510.9 510.9l2.2 2.2c-0.7-0.8-1.4-1.5-2.2-2.2z" fill="#ffffff" p-id="17047"></path><path d="M512.1 648.1c8.3 0 15.8-3.1 21.5-8.3l2.2-2.2 21.5-21.5L743 430.4c12.4-12.4 12.4-32.8 0-45.3-12.4-12.4-32.8-12.4-45.3 0L512 570.9 326.2 385.2c-12.4-12.4-32.8-12.4-45.3 0-12.4 12.4-12.4 32.8 0.1 45.2l185.7 185.7 21.8 21.8 1.8 1.8c5.7 5.3 13.4 8.5 21.8 8.4z" fill="#ffffff" p-id="17048"></path><path d="M512.9 511.1l-1.8 1.8 1.8-1.8z" fill="#ffffff" p-id="17049"></path><path d="M513.1 513.1l-2.2-2.2c0.7 0.8 1.4 1.5 2.2 2.2z" fill="#ffffff" p-id="17050"></path></svg>
                    <span>集团网站</span>
                   <svg t="1659336739683" class="icon icon1" viewBox="0 0 1265 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21216" width="12" height="12"><path d="M896.522039 1013.519059c-71.840627 0-143.691294-0.923608-215.501804 0.421647-31.794196 0.592314-43.008-12.187608-42.767059-43.339294 0.973804-125.128784 0.843294-250.277647 0.080314-375.406431-0.180706-29.224157 10.390588-42.134588 40.658824-41.984 143.671216 0.732863 287.352471 0.712784 431.023686 0.010039 28.892863-0.140549 38.831686 12.478745 38.701176 39.946039-0.582275 127.447843-0.592314 254.905725-0.010039 382.363608 0.13051 28.581647-12.267922 38.771451-40.146824 38.339765C1037.894275 1012.796235 967.198118 1013.519059 896.522039 1013.519059zM532.630588 470.949647c30.438902 0.652549 44.584157-9.175843 44.323137-41.712941-1.013961-126.323451-0.76298-252.656941-0.140549-378.990431 0.140549-27.788549-10.541176-40.076549-38.992314-39.936C410.332863 10.912627 282.844863 10.902588 155.356863 10.320314c-28.400941-0.13051-39.183059 12.227765-39.052549 39.986196 0.602353 126.323451 0.712784 252.66698-0.080314 378.990431-0.180706 29.465098 10.731922 42.154667 40.899765 41.592471 62.564392-1.164549 125.168941-0.351373 187.753412-0.351373C407.471686 470.548078 470.076235 469.614431 532.630588 470.949647zM536.977569 1013.820235c27.989333 0.421647 39.956078-10.62149 39.825569-38.972235-0.602353-127.488-0.612392-254.986039 0.010039-382.474039 0.140549-28.390902-11.986824-39.233255-39.835608-39.092706-126.33349 0.612392-252.66698 0.712784-378.990431-0.060235-29.43498-0.180706-41.923765 10.832314-41.743059 40.919843 0.783059 126.323451 0.793098 252.66698-0.010039 378.990431-0.190745 30.157804 12.288 41.281255 41.763137 40.739137 62.564392-1.144471 125.168941-0.351373 187.753412-0.351373C409.489569 1013.519059 473.248627 1012.856471 536.977569 1013.820235zM1048.70651 470.357333c57.805804-0.903529 98.745725-40.949961 99.338039-98.193569 0.903529-86.959686 0.853333-173.94949 0.090353-260.919216-0.512-58.368-39.654902-99.528784-97.380392-100.261647C947.561412 9.687843 844.328157 9.778196 741.135059 10.942745c-57.675294 0.652549-101.295686 44.303059-102.118902 101.827765-1.224784 85.795137-1.375373 171.640471 0.070275 257.435608 0.963765 57.173333 46.120157 99.599059 103.464157 100.22149 49.854745 0.542118 99.729569 0.110431 149.594353 0.110431C944.338824 470.528 996.532706 471.17051 1048.70651 470.357333zM746.636549 428.102275c-43.871373-0.391529-65.054118-20.158745-65.395451-62.765176-0.672627-83.435922-0.64251-166.881882 0.020078-250.307765 0.311216-38.701176 21.343373-61.239216 59.883922-61.620706 103.122824-1.024 206.275765-0.712784 309.408627-0.100392 34.063059 0.200784 56.96251 19.917804 57.876078 52.756078 2.469647 89.108078 2.881255 178.396863 0.150588 267.484863-1.15451 37.737412-24.224627 54.061176-62.955922 54.492863-50.979137 0.572235-101.978353 0.140549-152.967529 0.140549C843.976784 428.202667 795.306667 428.533961 746.636549 428.102275z" p-id="21217" fill="#ffffff"></path></svg>
            </a>
            </div>
        </div>
    </div>
</body>
</html>

css代码部分

*{
    text-decoration: none;
    padding: 0;
    margin: 0;
}
.counter-top{
    height: 24px;
    background-color: black;
}
.wrap{
    line-height: 24px;
    width: 1393.6px;
    height: 24px;
    padding: 0 25px;
    margin-right: 47.8px;
}
.counter-top div{
    float: right;
    padding: 0 10px;
    margin-left: 10px;
}
.counter-top a>span{
    float: right;
    display: block;
    color: #ccc;
    font-size: 12px;
    line-height: 24px;
}
.icon{
    float: right;
    margin-top: 6px;
    /* margin-right: 5px; */
}
.counter-top-one{
    width: 41px;
    height: 25px;
}
.counter-top-two{
    width: 105.8px;
    height: 25px;
}
.icon1{
    margin-right: 5px;
}
.counter-top-three{
    width: 85px;
    height: 25px;
    transition: all .2s;
}