程序设计 html

4

我正在写词汇表页面。我在页面顶部有字母链接。我想保持页面顶部（包括字母链接）固定，而带有定义的页面部分在单击字母时向上/向下滚动。我的HTML看起来像这样： <html> <head><title>My Glossary</title></head> <body> <div id="top"> <a href="#A">A</a> | <a href="#B">B</a> | <a href="#Z">Z</a> </div> <div id="term-defs"> <dl> <span id="A"></span> <dt>foo</dt> <dd>This is the sound made by a fool</dd>  </dl> </div> </body> </html> [编辑] 我尝试创建的效果类似于此处的效果。区别在于链接的示例中，当用户单击类别时完成页面滚动。就我而言，我想在单击页面顶部的索引（即字母）时滚动页面。

71 html css

3

：最后一个孩子不能按预期工作？

问题出在此CSS和HTML之内。这是jsFiddle的链接带有示例代码的。的HTML <ul> <li class"complete">1</li> <li class"complete">2</li> <li>3</li> <li>4</li> </ul> 的CSS li.complete:last-child { background-color:yellow; } li.complete:last-of-type { background-color:yellow; } 这两行CSS都不应该针对带有“ complete”类的最后一个li元素吗？ jQuery中的此查询也不针对它： $("li.complete:last-child"); 但这确实做到了： $("li.complete").last(); 显示代码段 li { background-color: green; } li.complete:first-child { background-color: white; } li.complete:first-of-type { background-color: red; } li.complete:last-of-type { background-color: blue; } li.complete:last-child { background-color: yellow; …

71 html css css-selectors

8

如何使标题保持静态，并在滚动时始终位于顶部？

我如何header避免滚动页面的其余部分？我考虑过使用frame-sets和iframes，只是想知道是否有一种更简单，更用户友好的方式，这样做的最佳实践是什么？

71 javascript html css

5

如何使用document.getElementById在iframe中选择元素

我有iframe这样的 <iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html"> <html> <head></head> <frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0"> <frame name="page1" src="c.html" scrolling="no"></frame> <frame name="page2" src="d.html" > <html> <head></head> <body id="top"> <div id="div1"> <div id="div2"> <div id="div3"> <ul id="x"> <li>a</li> <li>b</li> </ul> </div> </div> </div> </body> </html> </frame> </frameset> </html> </iframe> 我想引用元素“ x”。我尝试了几种方法，但是找不到解决方案。

71 javascript html iframe getelementbyid frameset

20

如何根据内容自动调整<div>高度？

我有一个<div>需要根据其中的内容自动调整的功能。我怎样才能做到这一点？现在，我的内容来自<div> 我用于div的类如下 box-centerside { background:url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent; float:left; height:100px; width:260px; }

71 css html

8

HTML标签和元素之间有什么区别？

我注意到大多数人会交替使用HTML标记和HTML元素。但是它们之间有什么区别？我看到的方式是标签在源代码中，而元素是DOM中的处理过的标签（通过浏览器）。我错了吗？

71 html terminology

6

使用JavaScript将CSS添加到<head>？

有没有一种方法可以将javascript文件中的字符串中的css添加到使用javascript的文档的开头？假设我们有一个网页，其中包含一个灯箱脚本，该脚本需要一个css文件才能运行。现在，添加此css文件<link>将使css文件下载，即使对于未启用js的用户也是如此。我知道我可以使用脚本动态加载css文件，但这也意味着将有2个http请求，并且在文件中几乎没有css的情况下，我发现这种效率低下。所以我对自己想，如果您可以将css文件中的css放入脚本中，让该脚本解析css并将其添加到头部，或者更好的是让脚本直接将css添加到脚本中的 <head>该文件中。但是我没有在网上发现任何暗示这是可行的方法，因此是否有可能用js将css添加到头部？编辑+解决方案：我将roryf的答案编辑为可跨浏览器使用（IE5除外） Javascript： function addcss(css){ var head = document.getElementsByTagName('head')[0]; var s = document.createElement('style'); s.setAttribute('type', 'text/css'); if (s.styleSheet) { // IE s.styleSheet.cssText = css; } else { // the world s.appendChild(document.createTextNode(css)); } head.appendChild(s); }

71 javascript html css

11

使用JavaScript将相对路径转换为绝对路径

有一个功能，可以给我类似以下网址： ./some.css ./extra/some.css ../../lib/slider/slider.css 它总是一条相对路径。假设我们知道页面的当前路径，例如http://site.com/stats/2012/，不确定如何将这些相对路径转换为真实路径？我们应该得到这样的东西： ./some.css => http://site.com/stats/2012/some.css ./extra/some.css => http://site.com/stats/2012/extra/some.css ../../lib/slider/slider.css => http://site.com/lib/slider/slider.css 没有jQuery，只有原始javascript。

71 javascript html path

5

有没有一种方法可以检查地理定位是否已被Javascript拒绝？

如果地理位置下降，我需要JavaScript显示手动输入。我试过的 Modernizr.geolocation navigator.geolocation 两者均未描述用户以前是否拒绝访问地理位置。

71 javascript html w3c-geolocation

10

如何使文字与图标字体垂直对齐？

我有一个非常基本的HTML，其中混合了纯文本和图标字体。问题在于图标的渲染高度与文本的高度不同： <div class="ui menu"> <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a> <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a> <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a> </div> 运行代码段隐藏结果展开摘要有什么建议可以解决吗？

71 html css fonts font-awesome

4

在800px之后在scrollDown上显示div

我要从页面顶部向下滚动800px后显示隐藏的div。到目前为止，我已经有了这个示例，但是我想需要修改它才能达到我想要的目的。编辑： [并且当scrollUp且高度小于800px时，此div应该隐藏] HTML： <div class="bottomMenu">  </div> CSS： .bottomMenu { width: 100%; height: 60px; border-top: 1px solid #000; position: fixed; bottom: 0px; z-index: 100; opacity: 0; } jQuery的： $(document).ready(function() { $(window).scroll( function(){ $('.bottomMenu').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); if( …

71 jquery html css

7

表格单元格中文本的垂直对齐

这是我桌子的一部分（这是一种形式）：那些只是两个<td>的<tr>。我正在尝试将Description放在表格单元格的顶部，而不是放在底部。我怎样才能做到这一点？

71 html css

2

最佳JSON-LD做法：使用多个<script>元素？

我很好奇将JSON-LD应用于schema.org网站的最佳实践。如果我有一个带有的页面，Article并且我也想WebSite在页面上进行定义，则需要这样： <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "http://www.example.com/", "potentialAction": { "@type": "SearchAction", "target": "http://www.example.com/search?&q={query}", "query-input": "required" } } </script> <!- … --> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "author": "John Doe", "interactionCount": [ "UserTweets:1203", "UserComments:78" ], "name": "How to Tie a Reef Knot" } </script> 这是正确还是错误？是否有任何好处或需要将它们合并到相同的脚本或项目数组中？

71 html seo schema.org json-ld

15

全屏HTML画布

我正在使用HTML画布处理以下应用程序：http : //driz.co.uk/particles/ 目前将其设置为640x480像素，但我想使其全屏显示，因为它将显示为投影仪。但是据我所知，我不能将画布大小设置为100％，因为变量只能是数字而不是％。使用CSS只会拉伸它，而不是使其变成全屏显示。有任何想法吗？编辑：试图使用jQuery找到高度和宽度，但它打破了画布的任何想法，为什么？ var $j = jQuery.noConflict(); var canvas; var ctx; var canvasDiv; var outerDiv; var canvasW = $j('body').width(); var canvasH = $j('body').height(); //var canvasW = 640; //var canvasH = 480; var numMovers = 550; var movers = []; var friction = .96; var radCirc = Math.PI …

71 javascript html canvas

4

包装器中两个跨度之一上的文本溢出省略号

我的省略号有问题。这是我的HTML： <div id="wrapper"> <span id="firstText">This text should be effected by ellipsis</span> <span id="lastText">this text should not change size</span> </div> 有没有办法用纯CSS做到这一点？这是我尝试过的： #firstText { overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } #lastText { white-space:nowrap; overflow:visible; } 它是这样显示的：该文本应以省略号引起，该文本应虽然这是我想要的结果：该文本应为e ...此文本不应更改大小

71 html css

Questions tagged «html»