Heim > Artikel > Web-Frontend > Beispiele für gängige CSS-Operationen

Beispiele für gängige CSS-Operationen

黄舟Original: 2016-12-28 16:23:251382Durchsuche

1, Stilausrichtung

.div {  
    width: 70%;  
    height: 1000px;  
    background-color: red;  
    position: relative;  
    left: 15%;  
    right: 15%;  
    /*margin: 10px auto;*/  
}

2, Stilgröße

<body>  
<p class="p1">hell world html5 hell world html5</p>  
<p class="p2">hell world html5 hell world html5</p>  
<p class="p3">hell world html5 hell world html5</p>  
<ul>  
    <li>111111</li>  
    <li>222222</li>  
    <li>33333333</li>  
</ul>  
</body>

.p1 {  
    width: 200px;  
    /*行高*/  
    line-height: normal;  
}  
  
.p2 {  
    width: 200px;  
    line-height: 20px;  
    /*元素 是否显示*/  
    visibility: visible;  
}  
  
.p3 {  
    width: 200px;  
    line-height: 50%;  
    /*鼠标焦点 显示*/  
    cursor: cell;  
}  
  
li {  
    /*元素是否显示，如何显示 块元素还是内联元素*/  
    display: inline;  
}

3, Navigationsleiste

<body>  
<ul>  
    <li><a>导航1</a></li>  
    <li><a>导航2</a></li>  
    <li><a>导航3</a></li>  
    <li><a>导航4</a></li>  
</ul>  
</body>

ul {  
    list-style-type: none;  
    margin: 0px auto;  
    padding: 0px;  
    width: 300px;  
    background-color: chocolate;  
    text-align: center;  
}  
  
li {  
    /*none不显示,block作为块元素，  
    inline内联元素，元素前后没有换行符,  
    inherit规定应该从父元素继承 display 属性的值*/  
    display: inline;  
    padding: 10px;  
}  
  
a:link, a:hover {  
    background-color: aqua;  
    text-decoration: none;  
    width: 50px;  
    text-align: center;  
}  
  
a:visited, a:active {  
    background-color: blue;  
}

4, Bildanzeige

<body>  
<div class="content">  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
    <div class="div">  
        <img src="zxwd.png">  
        <div class="text">图片介绍</div>  
    </div>  
  
</div>  
</body>

* {  
    margin: 0px;  
    padding: 0px  
}  
  
body {  
    width: 70%;  
    height: auto;  
    margin: 0px auto;  
}  
  
img {  
    width: 100px;  
    height: 100px;  
    border: 1px solid black;  
}  
  
.text {  
    text-align: center;  
    background-color: chocolate;  
    width: inherit;  
}  
  
.div {  
    width: auto;  
    border: 1px solid red;  
    padding: 1px;  
    height: auto;  
    margin: 5px;  
    float: left;  
}

Das Obige ist der Inhalt gängiger CSS-Operationsbeispiele. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiele für die Verwendung von CSS-Pseudoklassen und PseudoelementenNächster Artikel：Beispiele für die Verwendung von CSS-Pseudoklassen und Pseudoelementen

In Verbindung stehende Artikel

Mehr sehen