Exemples de conception Web réactive (sans requêtes multimédias)-Tutoriel H5-php.cn

Exemples de conception Web réactive (sans requêtes multimédias)

PHP中文网

Libérer： 2017-06-20 13:39:50

original

1468 Les gens l'ont consulté

(0)Écrit devant
　Parler d'un cas dans un article que j'ai vu sur Zhihu, cela m'a ouvert l'esprit et m'a admiré Extrêmement, j'ai trouvé le texte original le lendemain et l'a loué
5 yuans L'adresse du texte original le cas utilise beaucoup d'attributs CSS3.
(1) Démonstration des effets

(2) Points de connaissance et effets

<div class="trunc-list-wrapper" id="mylist">
        <ul class="trunc-list">
            <li>
                <a href="#">Home</a>
            </li>
         ...
        <li aria-hidden="true" class="control  control--open">
                <a href="#mylist"><span>more</span></a>
            </li>
            <li aria-hidden="true" class="control  control--close">
                <a href=""><span>less</span></a>
            </li>
        </ul>
    </div>
.trunc-list-wrapper {height: 2.25em;overflow: hidden;padding-right: 3.5em;
    }.trunc-list {  
        display: flex;flex-wrap: wrap;position: relative;
    }.trunc-list li { 
          flex: 1 0 auto;
}.control {position: absolute;top: 0;right: -3.5em;width: 3.5em;height: calc((2.25em - 100%) * -1000);max-height: 2.25em;overflow: hidden;
    }.control--close {display: none;
    }

Copier après la connexion

Ce qui précède est un code simple

affichage : flex; Faire en sorte que les éléments internes de .trunc-list deviennent des éléments flexibles

flex-wrap: wrap; Lorsque la largeur n'est pas suffisante, les éléments internes seront renvoyés à la ligne, donc lorsque la fenêtre du navigateur est redimensionnée à une certaine largeur, la hauteur de .trunc-list change

.
L'élément zoomé ne peut pas être vu car la hauteur : 2.25em;overflow: Hidden; de .trunc-list-wrapper entraîne le masquage de l'élément
.
Le changement de hauteur de trunc-list fait que height: calc((2.25em - 100%) * -1000); vous pouvez en voir plus,
max-height: 2.25em limite le maximum; hauteur.

Cliquez sur plus, car
#myList est un point de trait valide, le CSS suivant prend effet

.trunc-list-wrapper:target .control--open {  display: none;
        }.trunc-list-wrapper:target .control--close {  display: block;
        }

Copier après la connexion

En même temps fois, le CSS suivant prend effet

.trunc-list-wrapper:target {  height: auto;
        }

Copier après la connexion

Les éléments cachés peuvent être vus

Lorsque l'on clique sur moins, c'est un point d'ancrage invalide, par rapport à l'effacement de les effets ci-dessus.

4. Code complet

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>响应式的另一种思考</title><style>/* Basic common settings: */* {  box-sizing: border-box;}html {  line-height: 1.25;  font-family: 'Lato', sans-serif;}.trunc-list-wrapper {  height: 2.25em;  overflow: hidden;  padding-right: 3.5em;}.trunc-list {  list-style: none;  display: flex;  flex-wrap: wrap;  margin: 0;  padding: 0;  position: relative;}.trunc-list li {  margin: 0;  padding: 0;  flex: 1 0 auto;}.trunc-list a {  display: block;  padding: 0.5em;  text-align: center;  white-space: nowrap;  
          color: #fff;  background:red;}.trunc-list a:hover,
        .trunc-list a:active,
        .trunc-list a:focus {   background: red; }.control {  position: absolute;  top: 0;  right: -3.5em;  width: 3.5em;  
          height: calc((2.25em - 100%) * -1000);  max-height: 2.25em;  
          overflow: hidden;}.control a {  text-decoration: none;}.control span {  font-size: 0.75em;  font-style: italic;}.control--close {  display: none;}.trunc-list-wrapper:target {  height: auto;}.trunc-list-wrapper:target .control--open {  display: none;}.trunc-list-wrapper:target .control--close {  display: block;}</style></head><body><div class="trunc-list-wrapper" id="mylist">  <ul class="trunc-list"><li>  <a href="#">Home</a></li><li>  <a href="#">Blog</a></li><li>  <a href="#">About Us</a></li><li>  <a href="#">Contact Us</a></li><li>  <a href="#">Help</a></li><li>  <a href="#">Login</a></li><li>  <a href="#">Sign In</a></li><li aria-hidden="true" class="control  control--open">  <a href="#mylist"><span>more</span></a></li><li aria-hidden="true" class="control  control--close">  <a href=""><span>less</span></a></li>  </ul></div><p>改变视口宽度大小来观察效果</p></body></html>

Copier après la connexion

Voir Code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!