jjzjj

html - 工作两列布局,高度调整以适应,固定宽度;这种设计对 SEO 友好吗?浏览器兼容性?

coder 2024-03-02 原文

关闭。这个问题是off-topic .它目前不接受答案。












想改善这个问题吗? Update the question所以它是 on-topic对于堆栈溢出。

8 年前关闭。




Improve this question




背景
我一直在寻找具有 960px 宽度和两列的布局:

  • 主要内容:右对齐,宽度550px,从容器右边插入;
  • 侧边栏:左对齐,宽度为 250px,顶部、左侧和底部边缘与容器齐平;

  • 我一直在努力的一点是设置背景,使侧边栏背景占据 250px 宽度,100% 的父级高度,并与父级的左边缘齐平,留下主要内容占据剩余的宽度和 100% 的高度 parent 。
    我已经研究了一些技术,但它们似乎相对不灵活,例如虽然它很优雅,但人造柱似乎不太合适 http://www.alistapart.com/articles/fauxcolumns/ .
    考虑了一下,我决定尝试将内容的渲染与背景的渲染分开。具体来说,我的主要内容向右 float ,侧边栏向左 float ,然后是 clear:both以便容器将调整为两列中较大的一个。
    接下来,虽然仍在容器内但在 clear:both 之后,我有两个绝对定位的空 div,边栏的高度为 100%,宽度为 250px,left:0 ,然后主要内容的宽度为 100%。我还调整了 z-index,以便侧边栏在前面。
    还有其他必要的 CSS(例如容器包装器必须相对定位),但请参阅下面的源代码。

    这与我在 Mac 上使用 Safari 所希望的完全一样,两个背景都根据最高的列扩展,并且源中的标记有效。但是,我的两个主要问题是:
  • 我不确定这将如何在其他浏览器中呈现,尤其是 IE
  • 我试图在设计时考虑 SEO,但我对 SEO 并不太了解,因为我还在学习,这对 SEO 有多友好?

  • 其他来源
    How to make a floated div 100% height of its parent?
    http://brentgrossman.com/348/not-so-fuax-columns/
    (可能还有其他的,抱歉不记得了!)
    源代码
    备注 我使用了明亮的颜色并调整了 div 来更好地说明正在发生的事情。
    <!DOCTYPE html>
    <html lang="en-US" >
    <head>
    <title>Test Page</title>
    <meta charset="UTF-8"/>
    <style>
    
    #main {
        
    }
    
    #main-outer-wrapper {
        width: 960px;
        margin: 0 auto;
    }
    
    #main-inner-wrapper {
        background: red;
        /* This is the fallback background colour */
        position: relative;
        /* Must be relative for the background divs to have 100% height and to ensure z-index functions */
        z-index: -20;
        /* Ensure fallback background is below all other divs */
    }
    
    #main-content {
        /* This is where all the actual content will be */
        width: 550px;
        float: right;
        /* IMPORTANT float */
        background: orange;
        /* Background would actually be transparent, here it is for illustration */
        margin: 10px 80px 10px 10px;
        /* Keep content away from edges as part of design only*/
    }
    
    #left-primary-sidebar {
        /* This is for the actual sidebar content */
        float: left;
        /* IMPORANT float */
        background: green;
        /* Again, background colour is purely for illustration */
        width: 230px;
        margin: 10px;
        /* I have adjusted the margin for illustration only, in situ width is 250px and margin is 0 */
    }
    
    #main-content-background {
        /* This div has no content */
        background: blue;
        /* The intended right column background */
        
        /*  Position MUST be absolute so that the div can 
        *       have its height based on parent container, using
        *       top and bottom. Width can be specific but I have
        *       set it to 100% for maintainability */
        position: absolute;
        width: 100%;
        right: 0;
        top:0;
        bottom: 0;
        z-index:-10;
        /* As width is 100%, it is important that this is placed below the sidebar */
    }
    
    #left-primary-sidebar-background {
        /* As above regarding position */
        background: purple;
        position: absolute;
        width: 250px;
        left: 0;
        top:0;
        bottom: 0;
        z-index:-9;
        /* Div must be above right column */
    }
    
    
    .clear { 
        clear: both;
    }
    
    </style>
    </head>
    
    <body>
        <section id="main">
            <div id="main-outer-wrapper" class="wrapper outer-wrapper">
                <div id="main-inner-wrapper" class="wrapper inner-wrapper">
                    <section id="main-content">
                        <div id="main-content-wrapper" class="wrapper">
                        Content
                        </div><!-- #main-content-wrapper -->
                    </section><!-- #main-content -->
                    <section id="left-primary-sidebar">
                        <div id="left-primary-sidebar-wrapper" class="sidebar">
                        Sidebar
                        </div><!-- #left-primary-sidebar-wrapper -->
                    </section><!-- #left-primary-sidebar -->            <div id="main-content-background"></div>
                    <div id="left-primary-sidebar-background"></div>
                    <div class="clear"></div>
                </div><!-- #main-inner-wrapper -->
            </div><!-- #main-outer-wrapper -->
        </section><!-- #main -->
    </body>
    </html>
    
    感谢阅读,期待评论!

    最佳答案

    至于它在 IE 中的样子,你可以使用类似 Abobe's BrowserLab 这样的工具。来测试一下。

    至于 SEO:设计对 SEO 的影响很小,除非您的设计导致页面加载缓慢,因为页面加载速度确实有影响。像谷歌这样复杂的搜索引擎在源代码中使用文本位置来表明重要性的日子已经一去不复返了。如今,搜索引擎会分析您页面的实际文本内容,并将其与其他页面的文本内容进行比较。在 h1 标签中放置一些东西确实向搜索引擎表明该文本是一个标题,因此比页面上的其他文本稍微重要一点,但如果该文本实际上似乎与其余文本的分析无关我认为他们捕获了这一点并丢弃了 h1 文本。

    如果您的网站几乎没有竞争,那么您在页面上所做的事情会对您的排名产生巨大影响 - 但如果竞争程度中等,那么链接到您网站的页面的内容(以及链接的页面数量)对您的)占您页面排名分数的很大一部分,以至于您的页面结构绝对没有可衡量的影响。您页面的排名将取决于其内容与搜索词的相关性,并根据匹配的其他页面内容的相对相关性进行加权。这纯粹是关于内容和权威。

    所以我不会太担心你的页面结构会如何影响搜索引擎排名。只需确保页面加载速度快,并且内容尽可能与您想要排名的搜索词相关。

    关于html - 工作两列布局,高度调整以适应,固定宽度;这种设计对 SEO 友好吗?浏览器兼容性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14420162/

    有关html - 工作两列布局,高度调整以适应,固定宽度;这种设计对 SEO 友好吗?浏览器兼容性?的更多相关文章

    1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

      我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

    2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

      我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

    3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    4. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

      我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

    5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

      在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

    6. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

      所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

    7. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

      关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

    8. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

      在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

    9. ruby-on-rails - Ruby url 到 html 链接转换 - 2

      我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

    10. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

      使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是,在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

    随机推荐