zoukankan      html  css  js  c++  java
  • 淘宝logo布局

    此篇文章淘宝logo布局指的是淘宝首页上紧跟搜索框的logo布局,即如下图所示:

     logo在网站布局中是十分重要的,相当于网站的一个大标题,所以要用h1标签进行嵌套(h1标签在网页布局时只能出现一次,代表大标题,其他标题标签可出现多次),而不能直接使用一个logo图片,同时要考虑到搜索引擎不能识别图片中的文字,所以在logo布局时一定要插入文字“淘宝网”,才能便于搜索引擎进行检索。淘宝logo布局有以下两种方式:

    方式一:采用插入图的方式:

    html代码:

     css代码:

     注意在css代码中,要使用overflow:hidden将“淘宝网”三个文字隐藏(因为这是为了让搜索引擎检索,但是不能在网页上呈现)

    方式二:采用背景图的方式

    html代码:

     css代码:

    在css代码中,将a标签转换为块级显示模式,以便给a标签设置宽高,其宽高等于logo背景图的大小,因为背景图是不占据元素宽高的,如果不设置宽高那么a标签的宽高就仅仅是被“淘宝网”三个文字撑开的大小,text-indent设置的是首行缩进,其值为一个很大的负值,是为了让“淘宝网”三个字不出现在网页显示中。

    第二个方式的text-indent设值方式不能用于第一个方式,因为该属性设置的是首行缩进,而在第一个方式中第一个位置是logo图片,如果将文字放在logo图片之上再设置首行缩进为一个很大的负值,那么又会导致logo图片下移一行,此时又要重新进行logo的距离调整。

  • 相关阅读:
    ZW网络团队及资源简介
    ZW云推客即将登场
    “4K云字库”基本框架图
    Sketch 55 Beta版本探秘,看看都有什么新功能
    产品经理有哪些类型?
    电影票APP原型设计分享– Movie Booking
    旅游类App的原型制作分享-Klook
    UI行业发展预测 & 系列规划的调整
    原来这就是 UI 设计师的门槛
    摹客PS插件全新改版!—— 智能检测不对应的设计稿
  • 原文地址:https://www.cnblogs.com/NIFS/p/12618260.html
Copyright © 2011-2022 走看看