html添加变量参数吗,动态CSS与变量参数? (可能吗?)

CSS不是一种编程语言. CSS3在这里或那里有一点逻辑,但没有switch().

为了您的目的,到目前为止,最简单的解决方案是一个javascript,这里提供假设您使用jQuery:

var $navLis = $('nav[role=navigation] > ul > *');

$navLis.addClass('count'+$navLis.length); // add a class to every li indicating

// total number of list items

然后在你的CSS中

nav[role=navigation] li { /* default styling & width */ }

nav[role=navigation] li.count2 { /* your conditional styling */ }

nav[role=navigation] li.count5 { /* your conditional styling */ }

/* etc */

或直接使用jQuery设置宽度:

$navLis.style('width', (100/$navLis.length)+'%');

如果你要求纯CSS,那就得出你的逻辑帽子,看看CSS3 selectors specification.你可以构造一些拜占庭式,而且比较脆弱的CSS代码可以伪造逻辑,比如下面的选择器.

nav[role=navigation] li:first-child + nav[role=navigation] li:last-child {

/* matches last of two items if a list has only two items */

}

如果您使用的CMS知道将要放入的列表中有多少项目,那么您可以通过在您的CSS中添加一点PHP来获得您的服务器后端:

if (isset($_GET['navcount']) && $_GET['navcount'] != "") {

$navcount = $_GET['navcount'];

} else { $navcount = 5.0; } // Default value

?>

/* ... your css code here... */

nav[role="navigation"] li {

float: left;

width: <?php echo (100.0/$navcount); ?>%;

}

那么你从你的HTML请求这样的CSS / PHP脚本:

有一些很棒的工具,用于编写可以很好地混合到CSS中的样式表,有些甚至可以动态地提供PHP实现.现在最强大的CSS扩展是Sass,它只是你要找的语法.我建议使用Sass通过Compass,这是一个真正给它一些牙齿的Sass框架.您可以使用phamlp在PHP中将Sass解析为CSS

虽然指南针(和Sass)是非常棒的工具,但将其插入现有项目可能比其价值更麻烦.你可能只想使用Javascript做简单的逻辑.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值