Questions tagged «css»

我有一个带有一些文本字段的表单，当页面加载时，我想将光标（自动聚焦）放在表单的第一个文本字段上。 我想不使用javascript来做。

89 css  html 

我正在尝试使半透明的div覆盖整个屏幕。我尝试了这个： #dimScreen { width: 100%; height: 100%; background:rgba(255,255,255,0.5); } 但这并不能覆盖整个屏幕，它只能覆盖div中的区域。

89 css 

我有一个html表table-layout: fixed和一个具有设定宽度的td。该列仍会扩展以容纳不包含空格的文本内容。除了将每个td的内容包装在div中之外，是否有其他方法可以解决此问题？ 示例：http：//jsfiddle.net/6p9K3/29/ <table> <tbody> <tr> <td style="width: 50px;">Test</td> <td>Testing 1123455</td> </tr><tr> <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> <td>B</td> </tr> </tbody> </table> table { table-layout: fixed; } td { border: 1px solid green; overflow: hidden; } 在示例中，您可以看到尽管具有AAAAAAAAAAAA ...的列已显式设置为50px宽，但仍在扩展。

89 html  css 

img具有srcset属性看起来像是一种制作响应式图像的好方法。cssbackground-image属性中是否存在等效的语法？ 的HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"> 的CSS .mycontainer { background: url(?something goes here?); }

89 html  css  background-image  srcset 

编辑： 也许我应该问，当屏幕缩小到480px以下时，哪个选择器会设置边距？我已经浏览bootstrap-sensitiveness.css一段时间了，但是似乎没有任何影响。 原始 我基本上想删除任何默认的填充或边距，以便在较小的设备屏幕上设置响应速度。 我有一个background color覆盖在container-fluid选择器和用于更大的屏幕他们提供横跨宽度完全100％，但是他们在屏幕减小到更小的尺寸，在默认情况下，自举似乎添加余量或填充上container-fluid或container。 <div class="container-fluid"> <div class="row-fluid"> test </div> </div> 如果我使用自定义CSS覆盖Bootstrap的默认样式，那么在较小的屏幕上我应该覆盖哪种媒体查询或选择器以删除此填充？

89 css  twitter-bootstrap  responsive-design  media-queries 

我有3个div元素。 第div一个更大（包装）并具有position:relative; 第2个相div对于第1个div相对位置绝对定位（并包含在第1个中div） 第3个div包含在第2个中，div并且也具有绝对定位。 <div id="1st"> <div id="2nd"> <div id="3rd"></div> </div> </div> 为什么第3个div位置相对于第2个div绝对位置（这也是第1个位置的绝对位置div）而不是div相对位置的第一个位置？ 因为3rddiv是绝对定位到2nd绝对定位div。

89 html  css  css-position 

w3schools表达它的方式，听起来是一样的。 W3Schools的CSS参考 div + p 选择所有<p>紧随<div>元素之后的元素 div ~ p 选择<p>元素前面的每个<div>元素 如果一个<p>元素紧接在一个<div>元素之后，那是否不意味着该<p>元素前面有一个<div>元素？ 无论如何，我正在寻找一个选择器，可以在其中选择紧接在给定元素之前的元素。

89 css  css-selectors 

我目前正在为一家公司制作移动目标网页。这是一个非常基本的布局，但是在标题下方有一张产品图片，该图片始终为100％的宽度（设计表明，该图片始终从一条边到另一条边）。根据屏幕的宽度，图像的高度显然会相应地进行调整。我最初是使用img（CSS宽度为100％）完成此操作的，效果很好，但我意识到我想使用媒体查询根据不同的分辨率提供不同的图像-假设尺寸较小，中等，例如，同一张图片的大版本。我知道您无法使用CSS更改img src，因此我认为应该为图像使用CSS背景，而不是HTML中的img标签。 我似乎无法正常工作，因为带有背景图片的div既需要宽度也需要高度来显示背景。我显然可以使用“宽度：100％”，但是高度该怎么用？我可以设置一个随机的固定高度，例如150px，然后可以看到图像的顶部150px，但这不是解决方案，因为没有固定高度。我玩过一次游戏，发现一旦有一个高度（用150px测试），我可以使用'background-size：100％'将图像正确地放入div中。我可以将较新的CSS3用于该项目，因为它仅针对移动设备。 我在下面添加了一个粗略的示例。请原谅内联样式，但我想举一个基本的例子来尝试使我的问题更清楚一些。 <div id="image-container"> <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> </div> 是否可能需要根据整个页面给容器div设置一个百分比高度，还是我认为这是完全错误的？ 另外，您认为CSS背景是执行此操作的最佳方法吗？也许有一种技术可以根据设备/屏幕宽度来提供不同的img标签。通常的想法是，目标网页模板将与不同的产品图片一起使用多次，因此我需要确保以最佳方式开发这种模板。 我很抱歉，这有点冗长，但是我从这个项目来回到下一个项目，所以我想把这件事做完。在此先感谢您的宝贵时间，不胜感激。问候

89 html  css  background-image  responsive  responsive-images 

我正在尝试为有序列表中的数字设置样式，我想添加背景颜色，边框半径和颜色，以便它们与我正在使用的设计相匹配： 我想这是不可能的，我将不得不为每个数字使用不同的图像，即 ol li:first-child {list-style-image:url('1.gif')}; ol li:nth-child(2) {list-style-image:url('2.gif');} etc... 有没有更简单的解决方案？

89 html  css  html-lists  sprite 

我知道我可以定位CSS中具有特定属性的元素，例如： input[type=text] { font-family: Consolas; } 但是，是否可以将具有任何值属性的元素作为目标（除了什么都没有，即当尚未将属性添加到元素时）？ 大致类似： a[rel=*] { color: red; } 哪个应针对<a>此HTML中的第一个和第三个标记： <a href="#" rel="eg">red text</a> <a href="#">standard text</a> <a href="#" rel="more">red text again</a> 我认为这是可能的，因为默认情况下，cursor: pointer似乎将其应用于<a>具有其href属性值的任何标签。

89 css  css-selectors 

我正在尝试将图像的src绑定到元素中，但似乎无法正常工作。我收到一个“无效的表达式。生成的函数主体：{backgroundImage：{url（image）}”。 该文档说使用“ Kebab-case”或“ camel-case”。 <div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div> 这是一个小提琴：https : //jsfiddle.net/0dw9923f/2/

89 javascript  html  css  vue.js 

如何将无序列表居中<li>放置为固定宽度div？ <table width="100%"> <tbody> <tr> <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td> <td width="59%"><p align="left"> </p> <h1 align="left">StudioTeknik.com</h1> <p><br align="left"> <strong>Marc-André Ménard</strong></p> <ul> <li>Photographie digitale</li> <li>Infographie </li> <li>Débug et IT (MAC et PC)</li> <li> Retouche </li> <li>Site internet</li> <li>Graphisme</li> </ul> <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p> <p …

88 css  html  html-lists 

在HTML规范说 ID和NAME令牌必须以字母（[A-Za-z]）开头，后可以跟任意数量的字母，数字（[0-9]），连字符（“-”），下划线（“ _”） ，冒号（“：”）和句点（“。”）。 而且即使HTML 4 的SGML声明为NAMELEN使用值65536，它也会指出“避免固定限制”。 但可以肯定的是，浏览器，CSS实现和JavaScript工具包在支持的长度上必须有一些限制。在HTML / CSS / JS应用程序中可以安全使用的最小限制是多少？

88 javascript  html  css 

我在某些元素上遇到了定位问题，在对其进行检查后，IE8 Developer工具向我显示了这一点： 现在，我很确定我的问题是12偏移量，但是如何删除它？我找不到任何提及CSS偏移属性的内容。除了保证金，我们还需要抵消吗？ 这是产生该代码的代码： <div id="wahoo" style="border: solid 1px black; height:100px;"> <asp:TextBox ID="inputBox" runat="server" /> <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;" tabindex="99" /> <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'""> <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: …

88 html  css  internet-explorer  user-interface 

我有一个固定宽度的DIV，其中包含一个包含许多列的表格，并且需要允许用户在DIV中水平滚动表格。 这仅需要在IE6和IE7（内部客户端应用程序）上工作。 IE7中的以下作品： overflow-x: scroll; 谁能在IE6中也提供解决方案？

88 html  css