php给点击的li设置样式,php给li标签添加不同的class
时间: 2024-02-23 11:01:29 浏览: 13
可以使用 PHP 动态生成不同的 class 名称,然后在 CSS 中为这些 class 名称定义不同的样式,从而设置点击的 li 的样式。例如:
HTML 代码:
```html
<ul>
<li class="<?php echo $active ? 'active' : ''; ?>">Item 1</li>
<li class="<?php echo $active ? '' : 'active'; ?>">Item 2</li>
<li class="<?php echo $active ? 'active' : ''; ?>">Item 3</li>
</ul>
```
PHP 代码:
```php
$active = true; // 假设第一个 li 被选中
```
CSS 代码:
```css
.active {
background-color: #f00;
color: #fff;
}
```
这样,当 `$active` 为 `true` 时,第一个 li 会添加 `active` class,从而应用 `.active` 的样式;当 `$active` 为 `false` 时,第二个 li 会添加 `active` class,应用 `.active` 的样式,其它 li 不添加 `active` class,不应用 `.active` 的样式。
相关问题
于php和mysql的基础,写一份关于外卖订餐网页首页,并给出所有元素的代码
好的,以下是一个简单的外卖订餐网页首页的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>外卖订餐网站</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>外卖订餐网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="banner">
<h2>快乐品尝美味佳肴!</h2>
<a href="#" class="cta">立即下单</a>
</section>
<section id="featured">
<article>
<img src="burger.jpg" alt="汉堡" width="300" height="200">
<h3>汉堡套餐</h3>
<p>快来尝尝我们的汉堡套餐,美味可口!</p>
<a href="#" class="cta">查看详情</a>
</article>
<article>
<img src="pizza.jpg" alt="比萨" width="300" height="200">
<h3>比萨套餐</h3>
<p>香喷喷的比萨,诱人口感!</p>
<a href="#" class="cta">查看详情</a>
</article>
<article>
<img src="noodles.jpg" alt="面条" width="300" height="200">
<h3>面条套餐</h3>
<p>热气腾腾的面条,暖心美味!</p>
<a href="#" class="cta">查看详情</a>
</article>
</section>
<section id="contact">
<h2>联系我们</h2>
<form action="submit.php" method="POST">
<label for="name">姓名:</label>
<input type="text" name="name" id="name">
<label for="email">邮箱:</label>
<input type="email" name="email" id="email">
<label for="message">留言:</label>
<textarea name="message" id="message"></textarea>
<input type="submit" value="提交">
</form>
</section>
</main>
<footer>
<p>版权所有 © 2021 外卖订餐网站</p>
</footer>
</body>
</html>
```
其中,`style.css` 文件包含了网页的样式代码,可以自行编写。在上面的代码中,我们使用了 HTML5 的语义化标签,如 `header`、`main`、`section` 等,用于更好地组织网页结构,并提高可访问性。
需要注意的是,上面的代码只是一个简单的示例,实际的外卖订餐网页可能需要更多的功能和页面元素。
PHP中如何自定义章节目录
在PHP中,可以使用HTML的标签和CSS样式来自定义章节目录。一种常见的方法是使用无序列表(<ul>)和有序列表(<ol>)来创建目录,然后使用CSS样式来调整其样式和布局。
例如,以下代码可以创建一个简单的章节目录:
```
<ol class="chapter-list">
<li><a href="#chapter-1">Chapter 1</a></li>
<li><a href="#chapter-2">Chapter 2</a></li>
<li><a href="#chapter-3">Chapter 3</a></li>
</ol>
```
然后,可以使用CSS样式来调整它的样式和布局:
```
.chapter-list {
list-style: none;
padding: 0;
margin: 0;
}
.chapter-list li {
margin-bottom: 10px;
}
.chapter-list li a {
text-decoration: none;
color: #333;
}
.chapter-list li a:hover {
text-decoration: underline;
}
```
这些样式将删除默认列表样式,将每个章节标题之间添加一些间距,并将链接设置为无下划线,当鼠标悬停在其上时添加下划线。