[HTML&CSS品优购]-快速导航栏布局+[今夜，披星戴月]

Posted 2022-01-03 勇敢*牛牛

web知识点积累

网站标签图标的生成

<title>品优购</title>
    <link rel="shortcut icon" href="favicon.ico" />

网站TDK三大标签SEO优化

• SEO搜索引擎优化
• 目的是对网站进行深度优化
• 页面必须有三个标签来负荷SEO优化
• title、keyword、description

建议：网站(产品名)+网站介绍

<title>品优购-综合网购首选-正品低价、品质保障、及时配送、轻松购物</title>
    <meta name="description"
        content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,品优购" />

CSS代码描述

/* 版心宽度 */
.w
    width: 1120px;
    margin: 0 auto;

.fl
    float: left;

.fr
    float: right;

.style_red
    color: #c81623;

/* 快捷导航栏 */
.shortcut
    width: 100%;
    height: 31px;
    background-color: #f1f1f1;
    line-height: 31px;

.shortcut ul li
    float: left;

/* 结构伪类选择器选择所有的偶数的li */
.shortcut .fr ul li:nth-child(even)
    margin: 9px 15px 0;
    width: .5px;
    height: 12px;
    background-color: #666;

HTML代码描述：

<section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎你&nbsp;</li>
                    <li>
                        <a href="#">请登录&nbsp;</a>
                        <a href="#" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单 </li>
                    <li></li>
                    <li>我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li>关注品优购</li>
                    <li></li>
                    <li>客户服务</li>
                    <li></li>
                    <li>网站导航</li>
                </ul>
            </div>
        </div>
    </section>