css优化 之logo

最新推荐文章于 2024-07-21 19:13:42 发布
最新推荐文章于 2024-07-21 19:13:42 发布
阅读量59 收藏 1
点赞数
分类专栏： web html css 文章标签： css html

点击查看显示效果网址

 

源代码：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>logo:图片显示，文字链接</title>
</head>
<style type="text/css">
#top{height:45px; padding-top:25px; padding-bottom:7px;}
#topleft{width:290px; height:50px;float:left;background:url(http://www.amboedu.com/templets/sximages/logo_gif.gif) no-repeat center left; margin-left:10px;}
#topleft h1{font-size:12px;font-weight:normal;margin:0;padding:0;}
#topleft h1 a{display:block;float:left;width:290px;height:50px;text-indent:-5000px;}
</style>
<body>
<div id="top">
    <div id="topleft"><h1><a href="http://www.amboedu.com/" title="安博教育中程在线">安博教育中程在线</a></h1></div>
</div>
    
</body>
</html>
jjklmm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css案例_logo的SEO优化
hupei
06-23 137
css案例_logo的SEO优化
CSS头部logo优化
weixin_40546229的博客
03-28 236
logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。 h1里面在放一个链接，可以返回首页的，给链接一个大小和logo的背景图片。 链接里面要放文字（网站名称），为了搜索引擎收录我们，但是文字不要显示出来： 1. 要用text-indent移动到盒子外面（text-indent:-9999px;），然后overflow:hidden; 淘宝的做法 2. 直接给font-...
CSS：关于Logo部分的优化
weixin_46682277的博客
12-11 458
网站中的logo是很重要的部分，为了更好的优化，会用h1标签进行包裹，在h1标签内去写a标签，给a添加logo背景图，然后再写上网站的标题。 <h1> <a href="javascript:;">网站名称</a> </h1> 最后将写的网站标题隐藏即可，有两种做法： 1.淘宝做法： text-indent:-9999px; overflow:hidden; 2.京东做法： font-size:0; ...
CSS优化
骆小胖~
01-05 77
LOGO SEO优化
qq_44806249的博客
04-28 251
一个标准的网页的logo需有LOGO SEO优化 1、logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。 2、h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可 3、为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但文字不要显示出来。 方法（1）：text-indent移到盒子外部（text-indent:-9999px)，然后overflow:hidden,淘宝的做法。 方法（2）直接给font-size:0;就看不到文字了，京东的做法。 4、最后给链
CSS代码重构与优化之路
永不消逝的记忆
01-06 478
写CSS的同学们往往会体会到，随着项目规模的增加，项目中的CSS代码也会越来越多，如果没有及时对CSS代码进行维护，CSS代码不断会越来越多。CSS代码交错复杂，像一张庞大的蜘蛛网分布在网站的各个位置，你不知道修改这行代码会有什么影响，所以如果有修改或增加新功能时，开发人员往往不敢去删除旧的冗余的代码，而保险地增加新代码，最终的坏处就是项目中的CSS会越来越多，最终陷入无底洞。CSS代码重构的目的我
LOGO SEO 优化
linmuqi0928的博客
03-10 256
1.logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。 2.h1 里面再放一个链接，可以返回首页的，把logo 的背景图片给链接即可。 3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后overflow:hidden，淘宝的做法。方法2：直接给font-size: 0;就看不到文字了，京东的做法。 4.最后给链接一个title属性，这样鼠
21. CSS 优化和提高性能的方法有哪些？
能带孩子会做饭
09-13 358
21. CSS 优化和提高性能的方法有哪些？ 加载性能选择器性能渲染性能可维护性、健壮性
CSS 优化、提高性能的方法
_Nutra
03-14 706
CSS 优化、提高性能的方法　　如何提高CSS性能，根据页面的加载性能和CSS代码性能，主要总结有下面几点：　　1、尽量将样式写在单独的css文件里面，在head元素中引用　　有时候为了图方便或者快速搞定功能，我们可能会直接将样式写在页面的style标签或者直接内联在元素上，这样虽然简单方便，但是非常不利于日后的维护。将代码写成单独的css文件有几点好处：　　(1)内容和样式分离，易于管理和维护　...
CSS架构之BEM设计模式
肥晨开发的学习之路
02-08 9252
B代表：Black（块），独立实体，独立的意义，每个页面都可以看做是多个Block组成,见下图1-1；E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素，多个元素形成一个组件，见下图1-2；M代表： Modifier （修饰符），block 或 element 上的标记，是描述Block或Element的属性或状态，同一Block或Element可以有多个Modifier。
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 896
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 443
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 4142
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
css性能优化的方法
最新发布
jht_520的博客
07-21 103
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 763
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
拖拽上传（预览图片）
喵喵的博客
07-18 527
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
前端学习（二）之HTML
2302_79795489的博客
07-18 926
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
【CSS in Depth 2 精译_019】3.2 CSS 的盒模型
PeacefulWinter的博客
07-18 1416
本篇为《CSS in Depth》全新第二版第3.2小节内容，主要介绍了盒模型的相关概念及注意事项，并对第一版内容上做了大幅更新。建议基础薄弱的朋友先收藏起来，再跟着书中示例慢慢学习体会盒模型的用法。
CSS基础学习之元素定位（6）
07-17 638
属性用于指定一个元素在文档中的定位方式。和属性则决定了该元素的最终位置。
CSS建站教程：从创建html模板到布局与优化
还会涉及文本样式设置、头部图标与logo的设计、页脚版权信息的呈现，以及制作具有交互效果的导航条。对于特定浏览器（如IE）的兼容性问题，也会提供解决方案，以确保网站在各种浏览器中的良好表现。 本教程将引导...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值