CSS是一種用于網頁設計的樣式表語言,它可以實現頁面的不同顯示效果。下面就來了解一些CSS實現頁面顯示效果的方法。
/*實現文字居中顯示效果*/ .center{ text-align: center; } /*實現圖片透明度漸變效果*/ .fade{ transition: opacity 0.5s ease-in-out; } .fade:hover{ opacity: 0.7; } /*實現輪播圖效果*/ .slider{ position: relative; overflow: hidden; } .slide{ position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; } .slide:first-child{ display: block; } /*實現響應式布局*/ @media(max-width: 768px){ .container{ width: 100%; padding: 10px; } } @media(min-width: 768px){ .container{ width: 768px; padding: 20px; } }
以上代碼分別實現了居中顯示文字、圖片透明度漸變、輪播圖和響應式布局等效果。CSS能實現的效果很多,開發者可以靈活運用。
下一篇css實現間隔線豎線