html+CSS簡約一級導航欄+圖集+底部版權資訊
阿新 • • 發佈:2021-01-09
html+CSS簡約一級導航欄+圖集+底部版權資訊
html程式碼塊
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>相簿</title>
<link rel="stylesheet" href="./相簿_files/photo.css">
</head>
<body>
<div class="header">
<div class="logo">
<img src="./相簿_files/熊貓頭撓頭6.jpg" alt="" >
</div>
<ul class="nav">
<li>
<a href="http://localhost:52330/photo.html#footer">首頁</a>
</li>
<li>
<a href="http://localhost:52330/photo.html#footer" >關於我</a>
</li>
</ul>
</div>
<div class="albums">
<div class="albums-inner">
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-1">
<img src="./相簿_files/1.jpg" class="all studio">
<img src="./相簿_files/2.jpg" class="all studio">
<img src="./相簿_files/3.jpg" class="all studio">
</div>
</div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-2">
<img src="./相簿_files/5.jpg" class="all studio">
<img src="./相簿_files/6.jpg" class="all studio">
<img src="./相簿_files/7.jpg" class="all studio">
</div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-2">
<img src="./相簿_files/9.jpg" class="all studio">
<img src="./相簿_files/10.jpg" class="all studio">
<img src="./相簿_files/11.jpg" class="all studio">
</div>
</div>
</div>
<div class="yanse">
</div>
<div class="footer">
<p>jiaobenjiaobnisobrn</p>
</div>
</body></html>
CSS程式碼塊
body {
margin: 0px;
padding: 0px;
background-color: #C3CCD5;
font-family: 'Source Sans Pro', sans-serif;
}
.albums{
width: 100%;
float: left;
margin-left: 80px;
}
.albums-inner{
width: 1100px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
.albums-title {
float: left;
width: 100%;
color: rgba(53,117,159,1);
font-size: 20px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: rgba(53,117,159,1);
line-height: 50px;
margin-bottom: 100px;
}
.albums-tab{
float: left;
width: 300px;
margin-left: 30px;
}
.albums-tab:nth-child(3n+0) {
margin-right: 0px;
}
.albums-tab-thumb{
float: left;
width: 300px;
height: 200px;
}
.albums-tab-thumb img {
height: 210px;
width: 250px;
background-color: rgba(255,255,255,1);
padding: 5px;
}
.albums-tab-text{
float: left;
width: 100%;
text-align: center;
color: rgba(53,117,159,1);
margin-top: 15px;
font-size: 18px;
}
.albums-tab-text span {
font-size: 14px;
color: rgba(102,102,102,1);
}
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 80px;
background-color: hotpink;
}
.nav {
margin-top: 25px;
margin-left: 40%;
font-size: 0;
display: flex;
float: left;
}
.nav li {
display: inline-block;
margin-left: 30px;
}
.nav a {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 25px;
color: #fff;
text-decoration: none;
}
.nav a:hover {
color: #1b87da;
}
.logo img {
float: left;
width: 70px;
height:50px;
margin-top: 15px;
margin-left: 75px;
}
.footer{
width: 100%;
height: 60px;
background-color: rgb(175, 167, 167);
}
p{
line-height: 60px;
color: rgb(218, 36, 36);
text-align: center;
bottom: 0;
}
.yanse{
height: 800px;
width: 100%;
}