In diesem Artikel finden Sie 12 CSS-Tipps, die es wert sind, gesammelt zu werden. Sie können versuchen, sie sich zu merken, da sie in kritischen Momenten Leben retten können! Hoffe, es hilft allen!
Es handelt sich um eine CSS-Eigenschaft, die das Festlegen einer Form ermöglicht. Es hilft auch dabei, Bereiche zu definieren, in denen Text fließt. CSS-Code:
.any-shape {
width: 300px;
float: left;
shape-outside: circle(50%);
}Diese kleine Kombination kann tatsächlich die meisten Layoutfehler verhindern, die in HTML auftreten. Wir möchten wirklich nicht, dass horizontale Schieberegler oder absolut positionierte Elemente das tun, was sie wollen, und wir möchten auch keine zufälligen Ränder und Abstände überall. Hier ist Ihre magische Kombination.
* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}Manchmal ist „display:block“ nicht sinnvoll, aber in den meisten Fällen werden Sie <a> 和 <span> als Block wie jeden anderen Block behandeln. In den meisten Fällen wird es Ihnen also tatsächlich helfen!
Dies ist eher eine Art „Workflow“-Technik. Ich empfehle, dass Sie während der Entwicklung verschiedene CSS-Dateien erstellen und diese erst am Ende zusammenführen. Zum Beispiel eine für den Desktop, eine für Mobilgeräte usw. Abschließend müssen Sie sie zusammenführen, da dies dazu beiträgt, die Anzahl der HTTP-Anfragen an Ihre Website zu minimieren.
Das gleiche Prinzip gilt für HTML. Wenn Sie nicht in einer SPA-Umgebung wie Gatsby entwickeln, kann PHP zum Einbinden von HTML-Codeausschnitten verwendet werden. Sie möchten beispielsweise einen Ordner „/modules“ behalten, der die Navigationsleiste, Fußzeile usw. in separaten Dateien enthält. Wenn also Änderungen vorgenommen werden müssen, müssen Sie diese nicht auf jeder Seite bearbeiten. Je modularer, desto besser die Ergebnisse.
Der Stil wird auf den ersten Buchstaben des Elements auf Blockebene angewendet. Dadurch können wir Effekte einbringen, die wir aus Print- oder Papiermagazinen kennen. Ohne dieses Pseudoelement müssten wir viele Spannen erstellen, um diesen Effekt zu erzielen. Zum Beispiel:
Wie geht das? Der Code lautet wie folgt:
p.intro:first-letter {
font-size: 100px;
display: block;
float: left;
line-height: .5;
margin: 15px 15px 10px 0 ;
}Die CSS-Animation bietet eine relativ einfache Möglichkeit, reibungslos zwischen einer großen Anzahl von Eigenschaften zu wechseln. Eine gute animierte Benutzeroberfläche setzt ein reibungsloses und reibungsloses Erlebnis voraus. Um eine gute Leistung in unserer Animationszeitleiste aufrechtzuerhalten, müssen wir unsere Animationseigenschaften auf die folgenden vier Kerne beschränken:
:root{ timing-base: 1000;}7. Konischer Farbverlauf
.piechart {
background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%);
border-radius: 50%;
width: 300px;
height: 300px;
}8. Textauswahlfarbe ändern
Um die Textauswahlfarbe zu ändern, verwenden wir
::selection::selection {
background-color: #f3b70f;
}9. Hover-Effekte
hinzu und ändern Sie den Stil. So machen Sie es: .m h2{
font-size:36px;
color:#000;
font-weight:800;
}
.m h2:hover{
color:#f00;
}
Fügen Sie dieses Attribut hinzu, um transparenten Bildern einen besseren Schatteneffekt zu verleihen. Sie können dies mithilfe der angegebenen Codezeilen tun. 居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。 我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例： 首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性： 之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！ 更多编程相关知识，请访问：编程视频！！ Das obige ist der detaillierte Inhalt von12 CSS-Tipps, die es wert sind, in den Lesezeichen gespeichert zu werden! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!.img-wrapper img{
width: 100% ;
height: 100% ;
object-fit: cover ;
filter: drop-shadow(30px 10px 4px #757575);
}11. 使用放置项居中 Div
main{
width: 100% ;
height: 80vh ;
display: grid ;
place-items: center center;
}12. 使用 Flexbox 居中 Div
<div class="center h-48">
<div></div>
</div>
.center {
display: flex;
align-items: center;
justify-content: center;
}
.center div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #b8b7cd;
}
