【成长笔记】html生成网页头部信息

一、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my小米商城</title>
    <link rel="shortcut icon" href="img/favicon.ico">
    <style>
        body{
            margin: 0;
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
        }

        .header{
            height: 40px;
            line-height: 40px;
            /*height,line-height 一起使用*/
            background-color: #333;
            color: #b0b0b0;
            /*background-color,color 一起使用*/
            font-size: 24px;

        }

        .container{
            width: 1190px;  /*居中*/
            margin: 0 auto;
        }

        .left{
            float: left;  /*此处是为了飘起来*/
        }

        .right{
            float: right;  /*此处是为了飘起来*/
        }

        .menus a, .account a, .car a{
            text-decoration: none;  /*下划线*/
            display: inline-block;
            /*margin: 0 5px;*/
            padding:0 15px;  /*使用padding的效果要比使用margin的大好多，原因未知*/

        }

        /*.header .car a {*/
            /*display: inline-block;*/
            /*height: 40px;*/
            /*padding: 0 15px;*/
            /*margin-left: 20px;*/
            /*background-color: #424242;*/
        /*}*/

        .header .car a{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            margin-left: 20px;
            background-color: #424242;

        }



    </style>


</head>
<body>
<div class="header">
    <div class="container">
        <div class="menus left">
            <a>小米商场</a>
            <a>MIUI</a>
            <a>IoT</a>
            <a>云服务</a>
        </div>
        <div class="car right">
            <a>购物车(0)</a>
        </div>
        <div class="account right">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
    </div>

</div>

</body>
</html>
二、效果展示

在这里插入图片描述
原文链接：https://blog.csdn.net/qq_24790545/article/details/104932812