使用Twitter Bootstrap构建我的第一个站点并尝试使用流畅的布局.我已经将容器设置为流畅的,现在内部的内容占用整个页面宽度并适应调整浏览器的大小.
我正在开发的设计最大宽度为~950px.
我检查variables.less,并responsive.less和引导文件,我不能完全解决如何做到这一点.我也尝试将以下内容添加到我的style.css:
body {
max-width: 950px;
}
完全莫名其妙!我尝试过text-decoration: none几种不同的方式重写这一行.我还设法通过定位来重新调整文本大小,但text-decoration: none代码不会采用.
非常感谢.
码
.widget
{
height: 320px;
width: 220px;
background-color: #e6e6e6;
position: relative;
overflow: hidden;
}
.title
{
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
color: #E6E6E6;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
background-color: #4D4D4D;
position: absolute;
top: 0;
padding: 5px;
width: 100%;
margin-bottom: 1px;
height: 28px;
text-decoration: none;
}
a .title
{
text-decoration: none;
}<a href="#">
<div class="widget">
<div class="title">Underlined. Why?</div>
</div>
</a>我有一个包含图像和第二个DIV的DIV.父DIV设置为position: absolute;子DIV设置为position: relative.我的想法是在我的图像上显示我的照片标题.
孩子DIV应该有100%父母的宽度,减去10px左边,右边和底部,加上黑色背景.
.article-container {
position: relative;
}
.photo-caption {
width: 100%;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}<div class="span15 article-container">
<img src="images/example-image-1.png" />
<div class="photo-caption">This is the subtitle text on top.</div>
</div>左边缘突破.photo-caption了界限.article-container.右边距似乎没有任何影响.
我也尝试过修复它box-sizing.它似乎得到了宽度.photo-caption向下到父宽度,但仍然有悬垂.
我有一个400px宽的DIV,它包含两个并排的DIV,每个DIV的宽度为400px,高度为600px.两个DIV的宽度是固定的,但高度可以变化.我想隐藏第二个DIV并完全显示第一个DIV,而DIV内部没有滚动.
我想,我的解决方案是隐藏溢出-x.这似乎也隐藏了y溢出.
这是我的代码:
#schools-sub-nav {
}
#schools-container {
width: 400px; /* Set the width of the visible portion of content here */
background-color: fuchsia;
position: relative;
overflow-x: hidden;
}
#schools-list {
width: 400px; /* Set the width of the visible portion of content here */
height: 600px; /* Delete the height, let the content define the height */
background-color: purple;
position: absolute;
top: 0;
left: 0;
}
#boards-list {
width: 400px; /* Set the width of the visible portion of …在悬停时,我的文字链接有下划线.这是Bootstrap中的默认值.
我想保留这个,除非链接在某个div内.
我尝试的代码(和几个变体)不起作用.
HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
我的CSS:
.wall-entry {
background-color: @black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a …我在页面上有一系列DIV(每个都有相同的类).在加载时,我想随机化每个DIV的颜色.
我想为给定的DIV选择一种颜色,然后为下一种选择颜色,依此类推.
我发现这篇文章:将随机颜色单独应用于类元素？
我不明白jquery,但是我已经开始通过更改代码来反映我正在使用的类的名称:
$(document).ready(function() {
$('.main').each(function () {
var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
$(.jump-response).css("background-color", hue);
});
});
更多的帮助将不胜感激!
-
代码示例:http://jsfiddle.net/ollyf/LmwYP/
而且我还应该从预设/预定的颜色列表中添加随机背景颜色.
即将实施我的第一个Wordpress网站.我的理解是,如果我的循环调用泛型项,它会有所帮助,例如:
<div id="article-excerpt">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
使用Twitter Bootstrap或960.gs时,我的Feed会跨多个列和多行.
例如,文章在由5列组成的嵌套网格上水平布局.每5个项目,就有一个新行.
Row 1: [article div] [article div] [article div] [article div] [article div]
Row 1: [article div] [article div] [article div] [article div] [article div]
Row 1: [article div] [article div] [article div] [article div] [article div]
etc.
我将解释下一点,以检查我对这些系统如何工作有基本的了解.
在960.gs中,对于嵌套网格,我需要在每行中声明第一项和最后一项alpha,omega分别为:
<div id="article excerpt" class="alpha grid_1">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
同样,在Twitter Bootstrap中我需要将每一行放在它自己的特殊DIV中:
<div class="row">
<div id="article-excerpt" class="span1">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
<div id="article-excerpt" class="span1">
<div>Article …我正在尝试将样式应用到<p>div中的最后一个.我想在不添加新类(或ID)的情况下这样做.
我已经尝试过使用last-child选择器,但它不起作用.
我甚至尝试声明p:last-child {font-style: italic;}我的所有CSS文档,这似乎没有任何影响.
这是我的HTML:
<div class="new-section">
<div class="collection-container">
<div class="container">
<div class="row">
<div class="title span16">
<h1>The Title</h1>
</div>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div class="arrow-right"></div>
</div>
</div>
</div>
</div>
</div>
这是我的LESS CSS:
.collection-container {
height: 200px;
position: relative;
background-color: @gray;
.container {
padding-top: @r-margin;
.title {
margin-bottom: @xs-margin;
}
.span8 p:last-child {
font-style: italic;
}
}
}
为top/bottom/left/right指定大于或小于零的值无效.
创建了一个指定的id position: absolute.我也可以声明位置但只有零值,即top: 0或right: 0.当我指定时,没有任何事情发生right:50.
我无法理解为什么.我几乎从文档中删除了所有内容.
这是CSS:
#index-content {
position:absolute;
top:349;
right:0;
background-color: fuchsia;
}
这是HTML:
<body>
<div id="index-content">The Title</div>
</body>
在variables.less中,在排版部分有一个名为的变量@altfontfamily.
我想使用Alt字体系列,但我不知道如何.我打电话来使用它吗？或者它是否可以作为我创建自己的类的工具,如下所示:
.serif-link {
font-family: @altFontFamily;
}
我希望我的p文本在它下面有一条横跨文本宽度的虚线,我也希望它p能够水平居中.
文本永远不会长于一行,但它在该行上的长度会有所不同(如果它完全固定,我可以很容易地解决这个问题).
我无法弄清楚解决方案.我有以下结构:
<div class="container">
<div class="content">
<p>This is the title</p>
</div>
</div>
在我的CSS中,我有这样的事情:
.container {
width: 650px;
height: 100px;
}
.content {
text-align: center;
text-transform: uppercase;
font-size: 26px;
color: #4D4D4D;
}
p {
border-bottom: #808080;
border-bottom-width: thin;
border-bottom-style: dotted;
}