Bei der Lösung des Problems der Ul-Zentrierung_Erfahrungsaustausch fallen mir mehrere Punkte ein-CSS-Tutorial-php.cn

Beim Erstellen einer Website bin ich kürzlich auf ein Problem gestoßen: Die Navigationsleiste, die ich mit ul-Tags und li-Tags erstellt habe, wollte zentriert werden, ohne die Anzahl von li und die Breite von li, ul zu kennen, aber nachdem ich text-align:center für verwendet hatte ul Aber es hatte nicht den gewünschten Effekt.

Die ursprüngliche Seitenstruktur ist:

Code kopieren Der Code lautet wie folgt: Firede&lt ;/a>

Die Stylesheet-Struktur ist:

Code kopieren Der Code lautet wie folgt: #menu{...} . menu_ul{...} .menu_li{...} </style&gt

Das ist kein Problem, aber um eine Funktion zu implementieren, muss eine ID (menu ) und zwei Klassen (menu_ul, menu_li) definiert sind, sodass die CSS-Datei aufgebläht ist. Der Grund, warum ich das Problem der UL-Zentrierung nicht herausfinden kann, ist, dass das CSS zu chaotisch ist. Am Ende der Kette war ich verwirrt. Der Code, der die Struktur definiert, ist auf verschiedene Weise gemischt um den Effekt anzuzeigen. Der Code, den ich geschrieben habe, war durcheinander.

Als mir schwindlig wurde, wollte ich es nicht mehr ändern, also habe ich den Code neu geschrieben, um die oben genannten Funktionen zu implementieren:

Code kopieren Der Code lautet wie folgt: > Firede ;

Code kopieren

Der Code lautet wie folgt: >#menu {text-align:center;} #menu ul {padding:0;margin:0;} #menu li {display:inline;padding:0 10px;} Auf diese Weise ist es sehr einfach, das Problem zu lösen, dass ul nicht zentriert werden kann. Wenn ich auf meinen Code zurückblicke, stellt sich heraus, dass es daran liegt, dass ich einen zusätzlichen Satz von float:left im Stil von li hinzugefügt habe. Da die definierte Anzeige kein Block, sondern inline ist, kann sie nicht schweben, was zu einem Konflikt und letztendlich zu ul führt kann nicht in der Mitte angezeigt werden. Zusammenfassend lässt sich sagen, dass es beim Schreiben der Webseitenstruktur am besten ist, relativ einheitliche CSS-Namen für dasselbe Funktionsmodul zu verwenden. Wenn Sie zur Lösung des Problems einen Stilnamen definieren können, versuchen Sie, nicht mehr als einen zu definieren, und der Code sollte so prägnant wie möglich sein. Da der Code aufgebläht ist, kann es leicht zu Fehlern kommen und es ist schwierig, den Fehler zu finden. Verwenden Sie eine Reihe von Stilen wie „menu“, „menu ul“, „menu li“, „menu a“ und „menu a:hover“, anstatt einige Stile wie „menu“, „menu_ul“ und „menu_ul_li“ zu definieren, die klar organisiert und hierarchisch zu sein scheinen, aber in Wirklichkeit sehr verwirrend sind.

Gewohnheiten sind die Essenz vergangener Erfahrungen, die unbewusst zusammengefasst werden. Mit der Weiterentwicklung der Technologie sind jedoch viele Gewohnheiten der Vergangenheit zu Hindernissen für weitere Verbesserungen geworden Vergangenheit Lohnt es sich, an Gewohnheiten festzuhalten? Dasselbe gilt für die Erstellung einer Website. Standards können die Effizienz steigern, die Leistung verbessern und die Richtung vorgeben. Das standardisierte Design des Webs kann uns helfen, die Effizienz der Pflege der Website zu verbessern.