html如何制作一个手机商城网页通栏

最新推荐文章于 2024-08-17 18:47:23 发布

Yongjoy

最新推荐文章于 2024-08-17 18:47:23 发布

阅读量551

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/yoig_/article/details/127565598

版权

代码如下

主体部分

<div id="head-nav">
        <div class="nav-content-left">
            <ul class="content-left">
                <li>官网</li>
                <span class="sep">|</span>
                <li>商城</li>
                <span class="sep">|</span>
                <li>服务</li>
                <span class="sep">|</span>
                <li>智能硬件</li>
                <span class="sep">|</span>
                <li>云服务</li>
                <span class="sep">|</span>
                <li>天星数科</li>
                <span class="sep">|</span>
                <li>有品</li>
                <span class="sep">|</span>
            </ul>
        </div>
        <div class="nav-content-right">
            <ul class="content-right">
                <li>购物车</li>
                <li>个人中心</li>
            </ul>
        </div>
    </div>

css部分

 * {
            padding: 0;
            margin: 0;
        }

        /* 给通栏整体进行设置*/
        #head-nav {
            width: 100%;
            height: 40px;
            background-color: #333333;
        }

        #head-nav div {
            float: left;
        }

        /* 嵌套的盒子（装内容） */
        .nav-content-left {
            width: 1200px;
            height: 40px;
        }

        .nav-content-right {
            width: 720px;
            height: 40px;
        }

        li {
            /* 去掉列表前的圆点 */
            list-style-type: none;
            font-size: 20px;
            line-height: 40px;
            color: #a2a2a2;
            margin: 0 35px;
        }

        /* 列表部分 */
        .nav-content-left .content-left li {
            float: left;

        }

        .nav-content-right .content-right li {
            float: right;
        }

        .sep {
            margin: 0 .3em;
            float: left;
            color: #424242;
            line-height: 40px;
        }