我2小时写的html摄影网站
所有代码都是我编写的，仅供学习交流，禁止商用，张芷豪编写！！！二改，搭建记得留我名！
代码无图片，想要完整版可以加我QQ2302664078
演示地址点击跳转
html部分
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>张芷豪的摄影网站</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/ljjc.css">
</head>
<body class="bd">
<script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script>
<script id="xplayer" src="https://player.xfyun.club/Static/player/player.js" key="64b7afbe154d5" m = "1"></script>
<div>
<div class="flex">
<div class="dh1 z7">
<img src="./img/logo.png" alt="" class="dh2">
<div class="dropdown">
<button class="dropbtn">首页</button>
<div class="dropdown-content">
<a href="#">无</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">发现</button>
<div class="dropdown-content dh3">
<a href="#">无</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">部落</button>
<div class="dropdown-content dh3">
<a href="#">无</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">活动</button>
<div class="dropdown-content dh3">
<a href="#">无</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">社区</button>
<div class="dropdown-content dh3">
<a href="#">无</a>
</div>
</div>
<div class="dh5">
<a href="#" class="dh6">
<img src="./img/bilibili.png" alt="" class="dh4">
</a>
<a href="#" class="dh6 dh7">
<img src="./img/dy.png" alt="" class="dh8">
</a>
</div>
</div>
<!-- <img src="./img/1.jpg" alt="" class="tp1"> -->
<div class="img9">
<div class="tp1">
<div class="tz1">
<h2 class="tz2">让美好触手可及!</h2>
<a href="#" class="tz3">
<h2 class="tz4 a8 aaa1">加入zh摄影</h2>
</a>
</div>
</div>
<!-- <img src="./img/1.jpg" alt="" class="img8"> -->
</div>
<div class="z2">
<h2 class="z1">是什么让我们与众不同</h2>
</div>
<div class="z6">
<div class="z4">
<img src="./img/yzbt/1.png" alt="" class="z5">
<h2 class="z3">展现你自己</h2>
<h2 class="z3">建立你的品牌</h2>
<h2 class="z3">作品云盘储</h2>
</div>
<div class="z4">
<img src="./img/yzbt/2.png" alt="" class="z5">
<h2 class="z3">在摄影社区互动</h2>
<h2 class="z3">与全球摄影师建立联系</h2>
<h2 class="z3">提升审美与摄影技巧</h2>
</div>
<div class="z4">
<img src="./img/yzbt/3.png" alt="" class="z5">
<h2 class="z3">发现美图获得灵感</h2>
<h2 class="z3">让作品产生价值</h2>
<h2 class="z3">卖图赚收益</h2>
</div>
</div>
<div class="z8 z9">
<div class="z9">
<img src="./img/yy/1.png" alt="" class="z10">
<h2 class="z11">编辑推荐</h2>
</div>
</div>
<div>
<h3 class="z12">没灵感？来看编辑推荐啊！</h3>
<p class="z13">查看编辑精选图片，获取创作灵感</p>
<h2 class="z15">本周主题：「生存空间」</h2>
</div>
<div class="z19">
<div class="z19">
<div class="z17 z18">
<img src="./img/tpzs/3.jpg" alt="" class="z16">
<img src="./img/tpzs/4.jpg" alt="" class="z16 z20">
<img src="./img/tpzs/5.jpg" alt="" class="z16">
<img src="./img/tpzs/10.jpg" alt="" class="z16">
<img src="./img/tpzs/2.jpg" alt="" class="z16">
<img src="./img/tpzs/6.jpg" alt="" class="z16 z21">
<img src="./img/tpzs/7.jpg" alt="" class="z16">
<img src="./img/tpzs/8.jpg" alt="" class="z16 z22">
<img src="./img/tpzs/9.jpg" alt="" class="z16">
<img src="./img/tpzs/1.jpg" alt="" class="z16 z23">
</div>
</div>
</div>
<div class="z24 z9">
<div class="z9">
<img src="./img/yy/2.png" alt="" class="z10">
<h2 class="z11">活动</h2>
</div>
</div>
<div class="z29">
<div class="z28">
<img src="./img/xfy.jpg" alt="" class="z27">
<h4>致敬负重前行的你们！</h4>
<p>2023.9.9</p>
</div>
<div class="z28">
<img src="./img/ggdm.jpg" alt="" class="z27">
<h4>故宫的猫</h4>
<p>2023.9.9</p>
</div>
<div class="z28">
<img src="./img/zxdcs.jpg" alt="" class="z27">
<h4>窒息的城市</h4>
<p>2023.9.9</p>
</div>
</div>
<div class="z29">
<div class="z28">
<img src="./img/c.jpg" alt="" class="z27">
<h4>车</h4>
<p>2023.9.9</p>
</div>
<div class="z28">
<img src="./img/nymzgh.jpg" alt="" class="z27">
<h4>那一抹中国红</h4>
<p>2023.9.9</p>
</div>
<div class="z28">
<img src="./img/zgsyjx.jpg" alt="" class="z27">
<h4>中国摄影精选</h4>
<p>2023.9.9</p>
</div>
</div>
<div class="z25 z9">
<div class="z9">
<img src="./img/yy/3.png" alt="" class="z10">
<h2 class="z11">部落</h2>
</div>
</div>
<div>
<h3 class="z12">加入部落，找到组织！</h3>
<p class="z13">加入部落，给自己找到归属。创建部落，为他人创造归属</p>
</div>
<div style="display: flex;">
<div class="z30 z31">
<div class="pp2 pp5 z32">
<img src="./img/t.jpg" alt="" class="pp1">
<div class="pp7">
<a href="#" class=" pp3"><span class="pp6">她的碎碎念念</span></a>
<a href="#" class="pp8"><span class="pp9">Lv.10 官方</span></a>
<p class="pp4">2023.9.10-09:34 IP:浙江省</p>
</div>
</div>
<div class="img3">
<div class="img4">
<img src="./img/t/1.jpg" alt="" class="img1">
</div>
<div class="img5">
<img src="./img/t/2.jpg" alt="" class="img2">
<img src="./img/t/3.jpg" alt="" class="img2">
<img src="./img/t/4.jpg" alt="" class="img2">
<img src="./img/t/5.jpg" alt="" class="img2">
</div>
</div>
</div>
<div class="z30 z31">
<div class="pp2 pp5 z32">
<img src="./img/t.jpg" alt="" class="pp1">
<div class="pp7">
<a href="#" class=" pp3"><span class="pp6">她的碎碎念念</span></a>
<a href="#" class="pp8"><span class="pp9">Lv.10 官方</span></a>
<p class="pp4">2023.9.10-09:34 IP:浙江省</p>
</div>
</div>
<div class="img3">
<div class="img4">
<img src="./img/t/1.jpg" alt="" class="img1">
</div>
<div class="img5">
<img src="./img/t/2.jpg" alt="" class="img2">
<img src="./img/t/3.jpg" alt="" class="img2">
<img src="./img/t/4.jpg" alt="" class="img2">
<img src="./img/t/5.jpg" alt="" class="img2">
</div>
</div>
</div>
<div class="img6">
<h2 class="img7">更多部落敬请等待...</h2>
</div>
</div>
<div class="z26 z9">
<div class="z9">
<img src="./img/yy/4.png" alt="" class="z10">
<h2 class="z11">热门新闻</h2>
</div>
</div>
<div>
<div class="sp2 sp3">
<h1 class="sp2">“地球可以失去一个海岛，但不能失去一片海洋”</h1>
<p class="sp4">虽然我们很渺小，有时也会觉得，在一个个视频下面说出这些抵制的话、发出的声音没有人能听见，然后陷入迷茫和无助。但是，让我们想想，那些畅游在海底的美丽生物，现在它们享受着海洋的一切，创造着海洋的绚丽多彩，那种来自于大自然的生命力让人着迷。它们还不知道自己将来可能会面临的事情——家园被污染，家族面临灭绝。我们每天可能被学习工作等等事情困到不能自已，但我仍向往自由，向往这一个个自由美丽的灵魂。正因如此，我想守卫好这一份纯粹的美好，而不是等到排放时，在海洋一点点变灰暗时，去感受无力的绝望。</p>
</div>
<div class="sp2">
<video src="./img/mp4/hfs.mp4" controls loop autoplay class="sp1"></video>
</div>
</div>
<div class="j1">
<div>
<h3 class="z12">加入我们！</h3>
<p class="z13">Everything is possible！</p>
<!-- <h2 class="z15">注册</h2> -->
</div>
</div>
<div class="bottom2 df">
<span class="style4 b1"> </span>
<span an class="style4"> </span>
<span class="style4 df"><a href="#" class="a9 df1">友情链接</a></span><br />
<span class="style4 b2 df"><a href="#" class="a9 df1">联系我们</a></span> <br />
</div>
<div class="bottom">
<span class="style4 b1"> </span>
<span an class="style4"> </span>
<span class="style4">@张芷豪-zh摄影</span><br />
<span class="style4 b2">网站解释权归张芷豪所有 备案号：1145145 </span> <br />
</div>
</div>
</body>
</html>
css部分
index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.bd {
min-width: 1260px;
}
.dh1 {
width: 100%;
height: 60px;
display: flex;
}
.dh2 {
width: 130px;
height: 130px;
margin-top: -36px;
margin-left: 20px;
}
.tp1 {
/* display: flex;
background: url(../img/1.jpg);
object-fit: cover;
height: 1000px;
background-repeat: no-repeat; */
background: url("../img/1.jpg") no- repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;
}
.tz1 {
/* display: inline-block; */
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto 0;
flex-direction: column;
}
.tz2 {
font-size: 45px;
color: #fff;
}
.tz3 {
width: 200px;
height: 55px;
background-color: #fff;
border-radius: 35px;
margin-top: 50px;
}
.tz4 {
margin: 0 auto;
text-align: center;
line-height: 55px;
}
/* 下拉按钮样式 */
.dropbtn {
top: auto;
/* background-color: #4CAF50; */
background-color: #fff;
color: rgb(0, 0, 0);
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 下拉菜单的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
/* width: 100%; */
height: 100px;
display: block;
}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
.dh3 {
width: 100%;
height: 100px;
}
.dh4 {
width: 30px;
height: 30px;
}
.dh5 {
display: flex;
margin-left: auto;
width: 70px;
margin-right: 20px;
}
.dh6 {
display: flex;
align-items: center;
}
.dh7 {
margin-left: 10px;
}
.dh8 {
width: 20px;
height: 20px;
}
.z1 {
font-size: 36px;
}
.z2 {
display: flex;
justify-content: center;
margin-top: 50px;
margin-bottom: 50px;
}
.z3 {
font-weight: 500;
}
.z4 {
display: flex;
width: 33.3%;
height: 202px;
/* justify-content: center; */
flex-direction: column;
align-items: center;
}
.z5 {
width: 70px;
height: 70px;
margin-bottom: 30px;
}
.z6 {
display: flex;
margin-bottom: 50px;
}
.z7 {
position: fixed;
background-color: #fff;
}
.z8 {
background: url(../img/yyb/1.jpg);
object-fit: cover;
width: 100%;
height: 400px;
}
.z9 {
display: flex;
margin: auto;
}
.z10 {
width: 128px;
height: 128px;
}
.z11 {
display: flex;
color: #fff;
font-size: 45px;
align-items: center;
margin-left: 10px;
}
.z12 {
margin: 35px;
font-size: 28px;
text-align: center;
}
.z13 {
font-size: 16px;
line-height: 24px;
margin: 10px 0 24px;
text-align: center;
}
.z14 {
/* 图片滑动放大 */
transform: scale(1.3);
transition: all 1s ease 0s;
}
.z15 {
margin: 35px;
font-size: 32px;
text-align: center;
margin-top: 45px;
}
.z16 {
height: 320px;
}
.z17 {
margin-left: 75px;
margin-right: 75px;
}
.z18 {
text-align: center;
width: 1114px;
}
.z19 {
display: flex;
justify-content: center;
text-align: center;
}
.z20 {
margin-left: 53px;
}
.z21 {
margin-left: 12px;
}
.z22 {
display: inline-block;
width: 478px;
overflow: hidden;
margin-left: 90px;
}
.z23 {
margin-left: 66px;
}
.z24 {
background: url(../img/yyb/2.png);
object-fit: cover;
width: 100%;
height: 400px;
}
.z25 {
background: url(../img/yyb/3.png);
object-fit: cover;
width: 100%;
height: 400px;
}
.z26 {
background: url(../img/yyb/4.png);
object-fit: cover;
width: 100%;
height: 400px;
}
.z27 {
width: 400px;
height: 225px;
}
.z28 {
text-align: center;
}
.z29 {
display: flex;
justify-content: space-between;
margin-left: 15px;
margin-right: 15px;
margin-top: 55px;
margin-bottom: 55px;
}
.z30 {
width: 400px;
height: 380px;
}
.z31 {
margin: 50px;
box-shadow: 0 2px 16px 0 rgba(0,0,0,.16);
}
.z32 {
padding: 35px;
}
.img1 {
width: 176px;
height: 176px;
}
.img2 {
height: 86px;
height: 86px;
}
.img3 {
display: flex;
justify-content: space-around;
}
.img4 {
margin-left: 20px;
margin-right: 5px;
}
.img5 {
margin-right: 20px;
}
.img6 {
height: 480px;
margin: 0 auto;
text-align: center;
/* margin-left: -15px; */
}
.img7 {
line-height: 480px;
}
.img8 {
display: inline-block;
}
.img9 {
width: 100%;
height: 1000px;
}
.bottom{
/* position:absolute; */
right:0px;
bottom:0px;
background: #222;
color:#fff;
display:block;
width:100%;
text-align:center;
z-index: 10;
}
.bottom span{
/* position:relative; */
display:block;
left:0;
}
.bottom2{
/* position:absolute; */
right:0px;
bottom:0px;
background:rgba(0,0,0,0.8);
color:#fff;
display:block;
width:100%;
/* text-align:center; */
padding-left: 50px;
z-index: 10;
}
.bottom2 span{
/* position:relative; */
display:block;
left:0;
}
.b1 {
padding-top: 50px;
}
.b2 {
margin-bottom: 35px;
}
.sp1 {
display: block;
margin: 0 auto;
}
.sp2 {
margin-top: 50px;
margin-bottom: 50px;
}
.sp3 {
text-align: center;
}
.sp4 {
margin-left: 70px;
margin-right: 70px;
}
.j1 {
margin-top: 50px;
margin-bottom: 50px;
}
.aaa1 {
color: #000;
}
ljjc.css
.pp1 {
width: 80px;
height: 80px;
border-bottom-style: 40px;
border-radius: 40px;
}
.pp2 {
display: flex;
}
.pp3 {
color: #333;
font-weight: 300;
font-size: 14px;
margin-top: 2px;
}
.pp4 {
clear: #bbb;
font-weight: 300;
font-size: 12px;
margin-top: 10px;
}
.pp5 {
margin-left: 20px;
}
.pp6 {
color: #333;
}
.pp7 {
margin-left: 15px;
margin-top: 25px;
}
.pp8 {
background-color: #FF9900;
font-size: 14px;
}
.pp8 {
color: #fff;
}
/* 默认 */
.a8:link {
color: #000;
}
/* 未打开 */
.a8:visited {
color: #000;
}
/* 鼠标悬停 */
.a8:hover {
color: #000;
/* background-color: #6fc05f; */
}
/* 点击时 */
.a8:active {
color: #000;
}
/* 默认 */
.a9:link {
color: #fff;
}
/* 未打开 */
.a9:visited {
color: #fff;
}
/* 鼠标悬停 */
.a9:hover {
color: #fff;
/* background-color: #6fc05f; */
}
/* 点击时 */
.a9:active {
color: #fff;
}
评论