php - 样式列表只有css没有js和其他

问题描述

我有这样一个菜单页面，php 生成一个我从数据库中获取的列表。这是它的样子

我只是找不到适合这里的简单列表样式，我也不知道如何让我只显示标题，但是当我点击它时，其余信息就会出现。请告诉我，如何做到这一点看起来不错。先感谢您！

我试过这个，但这不是我想要的：

    body {
    font-family: Helvetica;
}

ol {
    counter-reset: myCounter;
    margin-left: 0;
    padding-left: 5px;
    color: rgb(100, 100, 100);
    display: inline-block;
}

li {
    position: relative;
    padding-left: 3em;
    margin: 0.45em 0;
    list-style: none;
    line-height: 1.8em;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

li:hover {
    color: rgb(0, 0, 0);
}

li:before {
    content: counter(myCounter);
    counter-increment: myCounter;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    padding: 0px;
    color: #fff;
    background: #2980b9;
    font-weight: bold;
    text-align: center;
    border-radius: .9em;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

li:hover:before {
    background-color: #2ecc71;
}

li li:before {
    background-color: #3498db;
}

li:after {
    position: absolute;
    top: 2.1em;
    left: 0.9em;
    width: 2px;
    height: calc(100% - 2em);
    content: '';
    background-color: rgb(203, 203, 203);
    z-index: 0;
}

li:hover:after {
    background-color: #2ecc71;
}

li li {
    font-size: 0.8em;
}

1\2：

<!DOCTYPE html>
<html>
<head>
    <title>Films</title>
    <link href="css/button.css" rel="stylesheet">
    <?php require 'menu.php'; ?>
</head>
<body>
<button type="button"><a href="allFilmsASC.php">Sort by ASC</a></button>
<?php require 'allFilms.php'; ?>
</body>
</html>

2\2:

<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
    <?php

    require 'queries.php';

    $query = new Queries();

    $films = $query->getAllFilms();

    foreach ($films as $film) {
        echo "<li style='margin-left: 50px;>Title: {$film['name']}</>";

        echo "      <ul>
                        <li>Year: {$film['year']}</li>
                        <li>Format: {$film['format']}</li>
                        <li>Actors: {$film['actors']}</li>
                    </ul>
              </li>";
    }
    ?>
</ul>

我想做这样的事情：IMAGE

生成的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Films</title>
    <link href="css/button.css" rel="stylesheet">
    <link href="css/menu.css" rel="stylesheet">
<nav role='navigation' class="menu">
    <ul>
        <li><a href="index.php">All Films</a></li>
        <li><a href="#">Tools</a>
            <ul>
                <li><a href="addFilm.php">Add Film</a></li>
                <li><a href="deleteFilm.php">Delete Film</a></li>
            </ul>
        </li>
        <li><a href="findBy.php">Search</a></li>
        <li><a href="">Import Films</a></li>
    </ul>
</nav></head>
<body>
<button type="button"><a href="allFilmsASC.php">Sort by ASC</a></button>
<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
    <li style='margin-left: 50px;>Title: First2</>      <ul>
                        <li>Year: 2223</li>
                        <li>Format: VHS</li>
                        <li>Actors: I and other</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: First2</>      <ul>
                        <li>Year: 2223</li>
                        <li>Format: VHS</li>
                        <li>Actors: I and other</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: Second</>      <ul>
                        <li>Year: 2019</li>
                        <li>Format: DVD</li>
                        <li>Actors: I</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: Second.0</>      <ul>
                        <li>Year: 2019</li>
                        <li>Format: DVD</li>
                        <li>Actors: I.0</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: Second.1</>      <ul>
                        <li>Year: 2019</li>
                        <li>Format: DVD</li>
                        <li>Actors: I.1</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: Second.2</>      <ul>
                        <li>Year: 2019</li>
                        <li>Format: DVD</li>
                        <li>Actors: I.2</li>
                    </ul>

标签： phphtmlcsslist

php - 样式列表只有css没有js和其他

问题描述

解决方案

推荐阅读