CSS圖片廊

時間 2020-01-29

標籤 css 圖片欄目 CSS 简体版

原文原文鏈接

CSS圖片廊

根據元素的浮動，將圖片所在div放在一行，設置懸浮樣式hover

代碼以下：html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>圖片廊</title>![圖片描述][1]
    <style>        
.box{
    width:928px;
    margin:0 auto;
    border:1px solid #ccc;
    overflow:hidden;
}
.tupian{
    width:200px;
    float:left;
    border:1px solid #ccc;
    margin:15px;
} 
.tupian div img{
    width:100%;
}
.tupian p{
    text-align:center;
}
.tupian:hover{
    border-color:#000;
}
.tupian:hover img{
    opacity:0.7;
}
    </style>
</head>
<body>
    <div class="box">
        <div class="tupian">
            <div><img src="images/demo1.jpg"/></div>
            <p>sfdsfds</p>
        </div>
        <div class="tupian">
            <div><img src="images/demo2.jpg"/></div>
            <p>sfdsfds</p>
        </div>
        <div class="tupian">
            <div><img src="images/demo3.jpg"/></div>
            <p>sfdsfds</p>
        </div><div class="tupian">
            <div><img src="images/demo4.jpg"/></div>
            <p>sfdsfds</p>
        </div>    
    </div>
</body>
</html>

運行結果以下圖：spa