我希望此页面上的导航链接各自显示在他们自己的行上:
A.不使用" display:block" - 因为这会使悬停动画占据容器的整个宽度,而不仅仅是<a>元素.
B.不使用<br>标签,因为我最终希望在较小的屏幕上创建具有水平导航的响应式网站.
谢谢你的帮助.
如何将大图像居中到浏览器窗口,如果它比窗口宽,它仍然会居中？
见:http://carolineelisa.com/rob/
我不想简单地将图像作为背景图像,因为它会动态变化为不同大小的图像,我希望能够向下滚动以在正确的高度看到它们.
但是,如果容器div的高度可以根据背景图像高度而改变,那么我愿意将其设为背景图像吗？
我不介意有一个水平滚动条,但不愿意.
谢谢!
我想隐藏使用Chosen插件创建的下拉列表中的某些元素.
我试过删除它:
$( 'option:contains("Swatch 1")').remove().trigger("chosen:updated");
并隐藏它:
$( '.chosen-results li:contains("Swatch 1")').css('display,'none');
但都不起作用.
请参阅颜色下拉列表:http://www.carolineelisa.com/test/wordpress/product/machine/
任何帮助赞赏:)
在这个页面上,我希望导航右侧的整个空间都是白色的.
所以,我使用:在CSS选择器之后实现了5px宽的白色块,我希望有一种方法可以使它适合可用的宽度,尽管我对其他建议持开放态度!:
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}
这是简化的HTML:
<div class="menu"><ul id="menu-main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Courses & prices</a></li>
<li><a href="#">Activities in Rio</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">News</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
以及所有相关的CSS:
#primary-menu ul {
overflow:hidden;
}
#primary-menu li {
list-style:none;
float:left;
}
#primary-menu a {
color:#333;
background: #fff;
display:block;
}
#primary-menu .current-menu-item a, #primary-menu .current-page-parent a {
color:#fff;
background:none;
}
#menu-main-menu:before {
content:"";
display:block;
background:#fff;
width:20px;
height:30px;
float:left;
}
#menu-main-menu:after …我有一个有序的列表,我有两种方式:
首先将橙色样式应用于橙色样式<li>,然后仅使用jQuery将黑色样式应用于列表文本,从而使数字变为橙色:
jQuery('#secondary ol li').wrapInner('<span class="notes"> </span>');
我更喜欢只使用CSS,但是嘿.
所以剩下的问题是如何在数字下扩展背景颜色/边框.
谢谢你查看我的问题!
我正在使用Nivo滑块Wordpress插件,并喜欢它的外观和我的客户使用它是多么容易.
唯一的问题是幻灯片在加载所有图像后才会播放,只要您有多张图片,这就是一个大问题:http://www.marcusmcshane.com/
有没有人知道如何在第一对夫妇加载后开始幻灯片放映？
提前感谢您提供的任何帮助.
我希望能够减少以下代码中的重复,这些代码会在您单击编号链接时更改图像源以及div的背景图像.
我在想,因为我以相同的方式对变量和选择器进行编号(1,2,3 ......),我可以用更少的行重写click函数部分,以避免每次更改图像数量时都要更改它？也许click函数可以获得自己的类(例如2)并将其应用于其他行？
图像(可以是任意数字)
var image1 = 'Home.jpg';
var image2 = 'About.jpg';
var image3 = 'Contact.jpg';
点击功能(目前重复以覆盖上面的所有图像)
$('.1').click(function() {
$("#image").attr('src', image1);
$('#center').css('background', 'url(' + image1 + ') no-repeat center top');
});
$('.2').click(function() {
$("#image").attr('src', image2);
$('#center').css('background', 'url(' + image2 + ') no-repeat center top');
});
$('.3').click(function() {
$("#image").attr('src', image3);
$('#center').css('background', 'url(' + image3 + ') no-repeat center top');
});
HTML
<a href="#" class="1">Option 1</a>
<a href="#" class="2">Option 2</a>
<a href="#" class="3">Option 3</a>
您可以在此处查看代码:http://carolineelisa.com/zack/
任何建议,使这个更小,更容易更新将不胜感激!
我想在我的页面标题中添加这样的内容,以便仅在不是iPhone/iPad时加载js和css文件:
if(!(navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
//Link to js file
//Link to css file
}
第一行工作正常,我通过粘贴脚本来测试它,但我不确定如何将文件链接起来......特别是因为我希望js和css链接以WP模板标签开头 <?php echo get_stylesheet_directory_uri(); ?>
预先感谢您的帮助!