【每日一练】小兔鲜项目-03

头部主题导航

xtx-main-nav盒子区域

  1. logo:logo

  2. 导航:nav

  3. 搜索框:search

  4. 购物车:cart

以上4个盒子都要浮动

结构:

<div class="xtx-main-nav container">
            <div class="logo fl">logo</div>
            <div class="nav fl">nav</div>
            <div class="search fl">search</div>
            <div class="cart fl">cart</div>
        </div>

样式:

/* xtx-main-nav */
.xtx-main-nav {
    height: 130px;
    padding-top: 30px;
    background-color: pink;
}

主体导航LOGO

logo注意点:

  1. logo 里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。

  2. h1 里面再放一个链接,可以返回首页的,把 logo 的背景图片给链接即可。

  3. 为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。

方法1:text-indent 移到盒子外面(text-indent: -9999px) ,然后 overflow:hidden ,淘宝的做法。

方法2:直接给 font-size: 0; 就看不到文字了,京东的做法。

     4.最后给链接一个 title 属性,这样鼠标放到 logo 上就可以看到提示文字了。

结构:

<div class="logo fl">
             <h1>
                <a href="#">小兔鲜</a>
             </h1>
        </div>

样式:

.logo {
    width: 207px;
    height: 70px;
    margin-left: 25px;
    /* background-color: blue; */
}

.logo h1 {
    width: 100%;
    height: 100%;
}

.logo a {
    display: block;
    height: 70px;
    background: url(../images/logo.png) no-repeat 0 0/100% 100%;
    font-size: 0;
}

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谢豪杰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值