zoukankan      html  css  js  c++  java
  • html怎么在网页标题栏上添加图标

    需要先把图片格式转换为.ico类型
    在这个网址在线转换很方便:https://www.easyicon.net/covert/
    在<head></head>加一行来显示图标(注意,如果加入了没有效果,检查一下路径是否正确,文件名是否正确)
    在网页标题左侧显示:<link rel="icon" href="图标地址" type="image/x-icon">
    在收藏夹显示图标:<link rel="shortcut icon" href="图标地址" type="image/x-icon">

    <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
      <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
      <title>
        MarioHome
      </title> 
      
      <link rel="icon" href="./mario.ico" type="image/x-icon">  //在网页标题左侧显示图标
      <link rel="shortcut icon" href="./mario.ico" type="image/x-icon">  //在收藏夹显示图标
    
      <script type="text/javascript" src="D:\jQuery\jquery.js"></script>
      <style>
    
    .search { position: relative;  78%; margin: 0px auto; padding-left: 3.4em; font-size: 14px;}
    .search:after{ clear:both;content:'.'; display:block;clear:both;height:0; visibility:hidden; overflow:hidden;}
    
    .search_t { float: left;  78%; height: 60px;margin-left: 0px;  margin-top: 20%; padding-left: 20px; padding-right: 20px; font-size: 18px;/* border: 1px solid #cdcdcd; */border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
    .search_b { float: right;   200px; height: 60px;margin-left: 0px;margin-top: 20%;padding-left: 0px; padding-right: 0px; font-size: 18px;/* border: 1px solid #cdcdcd; */border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
    .background_{ background:url("./background.jpg") no-repeat; background-size: 100%;}
      </style> 
    </head> 
    
    <body class="background_">
    
    <form class="search" action="http://www.baidu.com/baidu" target="_blank">
     <input class="search_t" type=text name=word size=40 placeholder="Input Content">
     <input class="search_b" type="submit" value="搜索"/>
    </form>
    
    </body>
  • 相关阅读:
    近期安卓与IOS招聘面试有感
    java线程池技术(二): 核心ThreadPoolExecutor介绍
    java线程池技术(一):ThreadFactory与BlockingQueue
    Java设计模式之策略模式与状态模式
    java线程间通信:一个小Demo完全搞懂
    Android M 新的运行时权限开发者需要知道的一切
    Java多线程同步问题:一个小Demo完全搞懂
    java多线程之守护线程以及Join方法
    安卓电量优化之JobScheduler使用介绍
    安卓电量优化之WakeLock锁机制全面解析
  • 原文地址:https://www.cnblogs.com/netlock/p/13191259.html
Copyright © 2011-2022 走看看