Questions tagged «css»

CSS（层叠样式表）是一种表示样式表语言，用于描述HTML（超文本标记语言），XML（可扩展标记语言）文档和SVG元素的外观和格式，包括（但不限于）颜色，布局，字体，和动画。它还描述了如何在屏幕，纸张，语音或其他媒体上呈现元素。

11
Django表单和Bootstrap-CSS类和<divs>
我正在使用Twitter BootstrapDjango与结合来渲染表单。 Bootstrap 可以很好地格式化表格-只要您有 CSS期望包含类即可。 但是，我的问题是Django生成的表单 {{ form.as_p }}在Bootstrap中表现不佳，因为它们没有这些类。 例如，Django的输出： &lt;form class="horizontal-form" action="/contact/" method="post"&gt; &lt;div style='display:none'&gt; &lt;input type='hidden' name='csrfmiddlewaretoken' value='26c39ab41e38cf6061367750ea8c2ea8'/&gt; &lt;/div&gt; &lt;p&gt;&lt;label for="id_name"&gt;Name:&lt;/label&gt; &lt;input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20" /&gt;&lt;/p&gt; &lt;p&gt;&lt;label for="id_directory"&gt;Directory:&lt;/label&gt; &lt;input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60" /&gt;&lt;/p&gt; &lt;p&gt;&lt;label for="id_comment"&gt;Comment:&lt;/label&gt; &lt;textarea id="id_comment" rows="10" cols="40" name="comment"&gt;Lorem ipsum dolor sic amet.&lt;/textarea&gt;&lt;/p&gt; …
3
使用CSS剪辑/裁剪背景图像
我有这个HTML： &lt;div id="graphic"&gt;lorem ipsum&lt;/div&gt; 使用此CSS： #graphic { background-image: url(image.jpg); width: 200px; height: 100px;} 我正在应用的背景图像是200x100像素，但我只想显示200x50像素的背景图像的裁剪部分。 background-clip似乎不是正确的CSS属性。我该怎么用呢？ background-position 不应使用，因为我在上面要显示的图像部分小于定义CSS的元素的sprite上下文中使用了上述CSS。
70 css  css-sprites 
4
在背景图片上使用CSS渐变
我一直在尝试在背景图片的顶部使用线性渐变，以使背景底部的阴影效果从黑色变为透明，但似乎无法使其显示。 我在这里阅读了其他案例和示例，但没有一个对我有用。我只能看到渐变或图像，但不能同时看到它们。这是链接 只需单击第一个徽标，就忽略该效果，此后，我要尝试的是整个网站的正文。 这是我的CSS代码： body { background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))); } 运行代码段Hide results展开摘要
70 html  css  gradient 
10
使用：focus为外部div设置样式？
当我开始在textarea中写文本时，我希望带有div框的外部div的边框变为实心而不是虚线，但是：focus在这种情况下不适用。如果它与：active一起使用，为什么它与：focus不一起使用呢？ 有什么想法吗？ （注意。我希望DIV的边框变为实线，而不是文本区域） div.box { width: 300px; height: 300px; border: thin dashed black; } div.box:focus{ border: thin solid black; } &lt;div class="box"&gt; &lt;textarea rows="10" cols="25"&gt;&lt;/textarea&gt; &lt;/div&gt;
70 css  focus  stylesheet 
11
CSS-等高列？
在CSS中，我可以执行以下操作： 但是我不知道如何将其更改为： CSS有可能吗？ 如果是，如何在不显式指定高度的情况下做到这一点（让内容增加）？
70 css  html 
9
如何在使用jQuery单击特定链接后打开引导导航选项卡的特定选项卡？
我是jquery和bootstrap的新手，所以请考虑我的错误。我创建了用于登录和注册的bootstrap模式。它包含两个分别称为登录和注册的导航选项卡。我有两个按钮弹出相同的Modal窗口，但在Modal窗口中显示不同的选项卡。每个选项卡中都有一个带有许多输入的表单。我的问题是，当我单击“登录”按钮时，在模式中弹出“登录”选项卡时弹出模式，而当我单击页面上的“注册”按钮时，则打开注册选项卡。 这些是模态打开的2个链接： &lt;div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;"&gt; &lt;a data-toggle="modal" href="#regestration" class="header-register-a" &gt; &lt;big&gt; &lt;font color="white" class="header-register-font"&gt;&lt;center style="margin-top:20px;"&gt;Login &lt;i class="icon-chevron-down" style="font-size:20px"&gt;&lt;/i&gt;&lt;/center&gt;&lt;/font&gt; &lt;/big&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;"&gt; &lt;a data-toggle="modal" href="#regestration" class="header-register-a" &gt; &lt;big&gt; &lt;font color="white" class="header-register-font"&gt;&lt;center style="margin-top:20px;"&gt;Register&lt;/center&gt;&lt;/font&gt; &lt;/big&gt;&lt;/a&gt; 这是我的标签及其内容的代码（我在这里避免不必要的代码）： &lt;div class="tabbable" &gt; &lt;ul class="nav nav-tabs" &gt;&lt;!--tabs--&gt; &lt;li class="active" style="position:absolute;margin-left:0px;" id="logintab"&gt; &lt;a href="#pane_login" data-toggle="tab"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;li style="margin-left:70px;" …
7
如何更改下拉列表的宽度？
我有一个列表框，我想减小其宽度。 这是我的代码： &lt;select name="wgtmsr" id="wgtmsr" style="width: 50px;"&gt; &lt;option value="kg"&gt;Kg&lt;/option&gt; &lt;option value="gm"&gt;Gm&lt;/option&gt; &lt;option value="pound"&gt;Pound&lt;/option&gt; &lt;option value="MetricTon"&gt;Metric ton&lt;/option&gt; &lt;option value="litre"&gt;Litre&lt;/option&gt; &lt;option value="ounce"&gt;Ounce&lt;/option&gt; &lt;/select&gt; 此代码在IE 6上有效，但在Mozilla Firefox（最新版本）中无效。有人可以告诉我如何减少widthFirefox上的下拉列表吗？
2
Bootstrap的工具提示在悬停时将表格单元格向右移动
我正在为我的项目使用Bootstrap 3.1.1。表格中的每个单元格都包含000或数据111。悬停时，我想将此数据显示为工具提示。到目前为止，这可行。但是，当我将鼠标悬停在上时&lt;td&gt;，所有相邻单元都向右移动。 这是我的JSFiddle &lt;table class="table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="matrisHeader"&gt; &amp;nbsp; &lt;/th&gt; &lt;th data-original-title="111" data-toggle="tooltip" data-placement="bottom" title=""&gt; PÇ1 &lt;/th&gt; &lt;th data-original-title="222" data-toggle="tooltip" data-placement="bottom" title=""&gt; PÇ2 &lt;/th&gt; &lt;th data-original-title="333" data-toggle="tooltip" data-placement="bottom" title=""&gt; PÇ3 &lt;/th&gt; &lt;th data-original-title="444" data-toggle="tooltip" data-placement="bottom"title=""&gt; PÇ4 &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th data-original-title="555" data-toggle="tooltip" data-placement="bottom" title=""&gt; ÖÇ1 &lt;/th&gt; &lt;td …
12
如何在指定容器上均匀且完全拉伸固定数量的水平导航项
我想在900像素的容器中均匀地拉伸6个导航项目，并且在两者之间留有均匀的空白。例如... ---| 900px Container |--- ---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |--- 目前，我能找到的最佳方法如下： nav ul { width: 900px; margin: 0 auto; } nav li { line-height: 87px; float: left; text-align: center; width: 150px; } 与此相关的问题有两个。首先，它并没有真正证明其合理性，而是将li标签均匀地分布在整个ul标签中。在“ HOME”或“ ABOUT”等较小菜单项与“ BASIC SERVICES”等较大菜单项之间创建了不均匀的空白。 第二个问题是，如果导航项大于150px（特殊服务就是），则布局会中断，即使整个导航有足够的空间也是如此。 谁能为我解决这个问题？我一直在网上寻找解决方案，但它们似乎都不够用。CSS / HTML仅在可能的情况下... 谢谢！ 更新（13/7/29 …
69 html  css  navigation  justify 
10
CSS / Javascript将html表行强制为一行
我有一个看起来像这样的HTML表： ------------------------------------------------- |Column 1 |Column 2 | ------------------------------------------------- |this is the text in column |this is the column | |one which wraps |two test | ------------------------------------------------- 但是我希望它隐藏溢出。这里的原因是文本包含指向更多详细信息的链接，并且使用“包装”会浪费我的布局中的大量空间。它应该是这样的（不增加列或表的宽度，因为它们会离开屏幕/否则会创建水平滚动条）： ------------------------------------------------- |Column 1 |Column 2 | ------------------------------------------------- |this is the text in column |this is the column | ------------------------------------------------- 我已经尝试了许多不同的CSS技术来尝试实现此目的，但是我无法正确实现。Mootables是我发现的唯一可以做到这一点的东西：http ://joomlicious.com/mootable/ ，但我不知道他们是如何做到的。有谁知道我如何使用CSS和/或Javascript对自己的表执行此操作，或者Mootables如何执行此操作？ HTML示例： …
69 javascript  html  css 
2
Twitter Bootstrap-边框
我刚刚开始使用Twitter Bootstrap，但是我对如何最好地为父元素添加边框有疑问？ 例如，如果我有 &lt;div class="main-area span12"&gt; &lt;div class="row"&gt; &lt;div class="span9"&gt; //Maybe some description text &lt;/div&gt; &lt;div class="span3"&gt; //Maybe a button or something &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 如果我像这样应用边框： .main-area { border: 1px solid #ccc; } span3由于边框增加了宽度，因此网格系统将中断并跳至下一行……是否有一种好方法可以像这样向父级添加边框或填充&lt;div&gt;？
10
带有Twitter引导程序的全宽布局
我正在尝试完成与该布局相似的布局：http : //dribbble.com/shots/829195-Slate/attachments/86422 我的项目使用具有响应式设计的Twitter Bootstrap。是否可以使用Bootstrap来实现全宽布局？ 问题是从我一直在阅读的内容中，流体布局将在bootstrap 3.0中删除，并且响应式设计具有固定的宽度。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.