草庐IT

语义化CSS

全部标签

css - 以与使用 background-img 相同的方式使 <img> 具有响应性和 SEO 友好性

我想让img标签以与div中相同的方式响应,使用背景位置为background-position:center和background-size:cover我的问题是,我将张贴很多不具有相同宽度或高度的图像(在网格布局中)。所以,如果我使用带有height:auto的img标签,我每次都会得到不同的高度。当前解决方案:1.使用bg-image和1pixel图像的宽度和高度:使用背景图片和imginsidewithvisibility:hidden3.使用多种img尺寸(小、大、中)有没有办法让img标签在流动网格中工作,让它看起来像bg-image(bg-contain)一样漂亮,或者使

html - Wrapper 内部或外部 HTML5 语义主要,哪个是最佳实践?

有谁知道哪些是最佳实践?A:main内的布局包装器B:在main之外的布局包装器我知道为HTML5语义设置样式是不好的做法,因此我设置了div元素来包装页面内容的布局,但我不确定关于放置位置的最佳做法是什么关于HTML5语义main的包装器,或者它是否重要。SEO是我最关心的问题。包装器仅用于内容,footer和header在包装器之外。CSS:#wrapper{box-sizing:border-box;width:1200px;min-height:100%;height:auto;padding:100px0200px0;margin:0auto;}HTMLA:HTMLB:

drupal - 如何在 Drupal 中捆绑 css 和 js 文件

我是.Net专家。我被分配了一项任务,我需要捆绑css和js文件以优化Drupal网站。在ASP.Net中,我们在bundle.config中配置所有的包并将dll上传到生产环境。我需要在Drupalv6.0中做同样的事情。昨天,在谷歌搜索时,我找到了有关Drupal的文档,该文档指导在admin/settings/performance中进行配置,我需要在其中启用捆绑。但是由于在Drupal中没有构建东西,我该如何在开发/生产服务器上捆绑css和js文件。我正在使用Drupalv6.0 最佳答案 在Drupal中以管理员身份登录您

html - HTML5 和 WAI-ARIA 中是否有语义方式来描述 "Toggleable Help Content"?

我试图找到语义上正确的方式来描述代表获取帮助(例如帮助图标)及其帮助内容的方式的HTML元素。我试图搜索此主题,但在帮助中搜索帮助并非易事。这是我的想法的一个简单示例(使用一个简单的脚本来显示/隐藏帮助内容以及利用“title”属性):PleaseenteryourpasswordYourpasswordmusthave5characters.有没有更好的方式来表示这个(以这种格式)。这个想法是用一种可访问且SEO友好的方式来描述“可切换的帮助内容”。问题是关于HTML/HTML5和WAI-ARIA属性(不是JavaScript)——我正在寻找我的示例的最佳元素表示(如果这样的概念存在

html - 当您有多个级别的文件夹时,如何最好地包含 css 和 javascript 等文件?

首先,我总是在我的网站上创建根文件夹中的每个文件。因此,我从来不需要对我的css和include路径做一些不同的,即使只是一点点。不过,在阅读了一些SEO知识后,我发现使用多个文件夹有助于用关键字描述您所在的位置。那么,假设我有一个这样的文件夹。(根)索引.php(根/记忆/)索引.php(根/记忆/梦想/)索引.php这3个索引文件,将有不同的路径到我的css和包含文件夹。接下来解释的问题是。链接到这些文件的最简单和/或最佳方法是什么,这些文件将具有不同的路径,具体取决于您所在的文件。希望我解释得足够好,我的第一个问题就在这里。附言我在离线工作。本地主机。

css - 文本缩进以隐藏链接文本

我一直在寻找一种方法来替换文本缩进:-9999pxcss技巧用于隐藏链接文本并将图像显示为主页Logo按钮的链接。我找到了一个似乎有效的简单解决方案,但似乎没有得到任何炒作,所以我想知道是否有我看不到的漏洞。下面是解决方案,其中class="homeButton"应用css翻转图像,而class="hide"显然隐藏了链接文本。如果这有任何缺点,请告诉我我不认为仍然有基于文本的链接,文本不会正常显示在屏幕上,但仍会出现在屏幕阅读器和搜索引擎中。一如既往的感谢...HomeButton 最佳答案 您没有确切说明您是如何获取.hide的

HTML5 和 ARIA 语义 : DHTML Sub Navigation

我有一个单页网站,用户会看到多行标签(照片即按钮),它们会显示新内容。强>考虑到可访问性和搜索引擎友好性,在语义上什么可能被认为是最佳实践?这是我的想法:FruitsLearnaboutBananasLearnaboutApplesLearnaboutPearsTheBananaAlongyellowfruit...TheAppleAroundredfruit...ThePearAfunny-shapedgreenfruit...当用户点击其中一个时标签,JavaScript放置is-selected在上课及其对应的.标签将使用CSS设置样式,使其看起来像可点击的图像,其中的文本清晰可

css - CSS 内容和背景 URL 图像的 SEO

想知道搜索引擎是否会对所有图像都设置为背景图像的页面有任何问题,以及它是否会正确地找到并索引每张图片下的“标题”(即CSS内容标签)。我真的不在乎搜索引擎是否找到背景图片,但我想让它们为标题编制索引。#cimg{width:400px;height:300px;background:#000;padding:0px;}#ctxt{font-size:1.0em;text-align:center;}#cimg.wc1{width:400px;height:300px;background:url(http://192.168.0.1/pic1.jpg)no-repeat;backgro

html - 如何对首屏内容使用内联 CSS

我最近遇到了一些提高网站性能的任务,但是由于问题中使用了above和below的概念,我感到很困惑,无法理解所问的内容.(ーー;)折叠是否意味着页面分成两部分?(根据设计和css规则)所以解决方案是检测用于第二部分的css并将其加载到页面底部?任务style.css中的下方折叠样式延迟了上方折叠内容的呈现。提高首屏内容的加载速度。您的解决方案应该仅为首屏内容内联CSS,并确保main.css的加载不会阻止页面呈现。document.addEventListener('DOMContentLoaded',()=>{document.getElementById('scroll-butto

css - 这是 "valid"css 图像替换技术吗?

我刚刚想到这个,它似乎适用于所有现代浏览器,我只是在(IE8/兼容性、Chrome、Safari、Moz)上测试了它HTMLCSS#my_image{background-image:url('images/my_image.png');width:100px;height:100px;}专业人士:图像替代文本是可访问性/seo的最佳实践没有额外的HTML标记,CSS也非常简单解决了“文本缩进”技术对低带宽用户隐藏文本的csson/imagesoff问题我能想到的最大缺点是cssoff/imageson情况,因为你只会发送透明的gif。我想知道,谁使用没有样式表的图像?某种手机之类的?