adfgh

新手必找我

已于 2023-10-23 11:38:46 修改

阅读量25

点赞数

文章标签： scipy tornado

于 2023-10-23 11:33:41 首次发布

本文链接：https://blog.csdn.net/2301_76203455/article/details/133985992

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.ss
{
background-image:url("images/hl.jpg");
width:100% ;
height:180px;
clear:both;
}
*{
margin:0px;
padding:0px;
}
body{
background-color:#E1E0C7;
}
.top{
border:1px ;
width:100%;
height:45px;
background:#F0EDE2;
opacity:0.7;
}
.topic{
width:1000px;
margin:0 auto;
}
.topic .logo{
float:left;
margin-right:20px;
}
.topic nav{
float:left;
}
.topic nav ul{
list-style-type:none;/*去掉符号*/
}
.topic nav ul li{
display:inline-block;/*水平排列*/
}
.top nav ul li a{/*默认样式 a是行内元素不能修改大小*/
display:inline-block;/*变成行内块*/
height:45px;
width:80px;
line-height:45px;
text-align:center;
text-decoration:none;
color:#5D6146;
cursor:move;/*鼠标样式*/
}
.top nav ul li a:visited{
font-size:50px;
}
.top nav ul li a:hover{
color:red;
font-weight:bolder;
}
.top nav ul li a:active{
font-weight:bolder;
border-bottom:2px solid blue;
}

</style>
</head>
<body>

<!DOCTYPE html>
<html lang="en">
<head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片欣赏</title>
    <style type="text/css">
        body{
            background-color: burlywood;
        }
        ul{list-style-type:none;/*去掉列表符号*/}
        ul li{/*层次关系*/
            border:1px solid red;
            width:180px;
            height:260px;
            background-color: #ffffff;
            padding:10px;
            /*块变成行内元素*/
            float:left;/*left  right*/
            margin:10px;/*li的外边界*/
        }
        ul li:hover{/*伪类 鼠标经过的那个状态的样式*/
            background-color: green;
        }
        ul li img{
            width:180px;
            height:200px;
        }
        ul li h3{
            text-align: center;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="images1/gallery-item1.jpg"/><h3>棒槌岛1</h3></li>
        <li><img src="images1/gallery-item2.jpg"/><h3>棒槌岛2</h3></li>
        <li><img src="images1/gallery-item3.jpg"/><h3>棒槌岛3</h3></li>
        <li><img src="images1/gallery-item4.jpg"/><h3>棒槌岛4</h3></li>
        <li><img src="images1/gallery-item5.jpg"/><h3>棒槌岛5</h3></li>
        <li><img src="images1/gallery-item6.jpg"/><h3>棒槌岛6</h3></li>
        <li><img src="images1/gallery-item7.jpg"/><h3>棒槌岛7</h3></li>
        <li><img src="images1/gallery-item8.jpg"/><h3>棒槌岛8</h3></li>
    </ul>
</body>
</html>