话不多说,先展示图片
一看图片背景,老二次元了
附上代码和css
这是一个纯静态的网站,算是网页小白的第一个作品
因为喜欢暗暗的风格所以基调都是偏黑多一点
当然因为初学,所以命名上就用了我更好快速理解的名字
网页图片的地址,就需要你们自己去找咯,哈哈
index部分
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" sizes="144x144" href="img/b6feca758e07d86568500142e516c946.jpeg" type="image/png">
<title>??????</title>
<style type="text/css">
body{
margin: 0;
background-color: black;
position: relative;
}
</style>
<!-- 头部导航栏-->
<link type="text/css" href="css/头部导航栏.css" rel="stylesheet">
<style type="text/css">
.顶部观景{
position:relative;
width: 100%;
z-index: 0;
top: 0;
}
.下拉图标{
text-align: center;
width: 100%;
position: relative;
z-index: 1;
}
</style>
<link type="text/css" href="css/内容.css" rel="stylesheet">
<link type="text/css" href="css/字体.css" rel="stylesheet">
<link type="text/css" href="css/底部.css" rel="stylesheet">
</head>
<body>
<div class="抬头">
<div id="" class="头部菜单栏">
<div id="" class="头部菜单栏logo">
<div id="" class="头部菜单栏中文字体大小"> 天下坤</div>
<div id="" class="头部菜单栏英文字体大小">T I A N X I A K U N</div>
</div>
<div id="" class="头部菜单">
<a class="头部鼠标悬停颜色" href="index.html"><div id="" class="头部菜单项目"><div id="" class="头部菜单栏中文字体大小" >首页</div></div></a>
<a class="头部鼠标悬停颜色" href="photo.html"><div id="" class="头部菜单项目"><div id="" class="头部菜单栏中文字体大小" >相册</div></div></a>
<a class="头部鼠标悬停颜色" href="music.html"><div id="" class="头部菜单项目"><div id="" class="头部菜单栏中文字体大小" >音乐</div></div></a>
<a class="头部鼠标悬停颜色" href="files.html"><div id="" class="头部菜单项目"><div id="" class="头部菜单栏中文字体大小" >文件</div></div></a>
</div>
</div>
<div class="搜索框部分">
<div id="搜索" class="搜索框文本">
<input type="text" id="搜索文本" />
<button type="button" id="搜索按钮" class="文本图表" >搜索</button>
</div>
</div>
</div>
<div id="" class="顶部观景"><img width="100%" src="img/背景图片.jpg">
<div class="下拉图标">
<a href="#个人介绍" style="scroll-behavior:smooth;"><img src="img/giphy.gif" width="50px" style= "transform: rotate(135deg);"></a>
</div>
</div>
<div class="内容框架" >
<div class="内容部分" >
<div class="左内容框" >
<div class="内容标题">
<b id="个人介绍" style="font-size:25px;">关于我</b>
</div>
<div class="左内容正文">  ########################################################
</div>
</div>
<div class="右内容框">
<div class="右图框" >
<img width="80%" src="img/56fbb9bfa41ea96dce6706d17ef2184e.gif">
</div>
</div>
</div>
<img width="100%" src="img/43616d53477b468d0244522879d6f893_1092789693086295557.jpg" style="filter:blur(4px);z-index: -1;">
</div>
<div class="底部" style="position:relative">
<div class="底部logo" >
<div class="头部菜单栏中文字体大小">天下坤</div>
<div class="头部菜单栏英文字体大小" >T I A N X I A K U N </div>
</div>
<div style="width: 100%;font-size: 15px;text-align:center;padding-top: 4%; position: absolute">
<div>©2021 - xxxxxxx<br>版权所有</div>
</div>
<div class="著作声明">
<div style="right: 0;padding-right: 30px">
qq邮箱:<br>
###########
<br>
联系电话:<br>##############
</div>
</div>
</div>
</body>
</html>
css部分
头部导航栏
@charset "utf-8";
/* CSS Document */
.抬头{
width: 100%;
position:absolute;
display: inline-flex;
z-index: 3;
}
.头部菜单栏{
height: 80px;
background-color:rgba(0,0,0,0.3);
color: white;
position:fixed;
width:100%;
top: 0px;
/* 水平居中,技巧 */
display:inline-flex;
}
.头部菜单栏logo{
padding-top: 10px;
padding-left: 10px;
height: 80px;
width: 200px;
}
.头部菜单{
height: 80px;
width:400px;
display:inline-flex;
position: fixed;
right:0;
}
.头部菜单项目{
height: 70px;
width: 100%;
margin-right: 40px;
line-height: 70px;
text-align:center;
}
.头部菜单项目:hover{
box-shadow: 0 0 10px 3px rgb(0 0 0 / 40%);
background-color:rgba(0,0,0,0.6);
}
a.头部鼠标悬停颜色{
color: white;
}
.搜索框部分{
height: 30px;
width: 100%;
margin-top: 80px;
z-index: 1;
}
.搜索框文本{
margin-top: 5px;
margin-right: 5px;
height: 30px;
width: 300px;
position: fixed;
right: 0;
display:inline-flex;
filter: opacity(0.5);
}
.搜索框文本:hover{
filter: opacity(0.8);
}
#搜索文本{
border-radius:9px;
height: 30px;
width: 300px;
margin-top: 5px;
padding-left: 10px;
outline: none;
}
.文本图表{
height: 30px;
width: 100px;
text-align: center;
margin-left: 5px;
margin-top: 7px;
border-radius: 10px;
}
内容
@charset "utf-8";
/* CSS Document */
.内容框架{
position: relative;width: 100%;margin: 0;
}
.内容部分{
position: absolute;
background-color: aliceblue;
width: 70%;
height: 60%;
z-index: 1;
margin-top: 10%;
margin-left: 15%;
margin-right: 15%;
margin-bottom:5%;
display: flex;
background:url('"file:///C:/Users/25700/Documents/%E6%9C%AA%E5%91%BD%E5%90%8D%E7%AB%99%E7%82%B9%201/2/img/1k60fps.mp4"');
background-size: 100%;
border-radius: 25px 25px 25px 25px ;
}
.左内容框{
width: 60%;
height: 100%;
border-radius: 25px 25px 25px 25px;
margin-left:5%;
}
.内容标题{
width: 95%;height: 16%;color: white;padding-top:2%;padding-left: 5%;padding-bottom: 2%;
}
.左内容正文{
width: 90%;height: 70%;background-color:rgba(0,0,0,0.2);color: white;padding-left: 5%;padding-right: 5%;padding-top: 5%; font-size: 20px;;
}
.右内容框{
width:40%;
height: 100%;
position: relative;
text-align: center;
border-radius: 0px 25px 25px 0px ;
}
.右图框{
width: 80%;height: 80%;background-color: azure;margin: 10%;border-radius: 25px 25px 25px 25px ;
}
字体
@charset "utf-8";
/* CSS Document */
.内容框架{
position: relative;width: 100%;margin: 0;
}
.内容部分{
position: absolute;
background-color: aliceblue;
width: 70%;
height: 60%;
z-index: 1;
margin-top: 10%;
margin-left: 15%;
margin-right: 15%;
margin-bottom:5%;
display: flex;
background:url('"file:///C:/Users/25700/Documents/%E6%9C%AA%E5%91%BD%E5%90%8D%E7%AB%99%E7%82%B9%201/2/img/1k60fps.mp4"');
background-size: 100%;
border-radius: 25px 25px 25px 25px ;
}
.左内容框{
width: 60%;
height: 100%;
border-radius: 25px 25px 25px 25px;
margin-left:5%;
}
.内容标题{
width: 95%;height: 16%;color: white;padding-top:2%;padding-left: 5%;padding-bottom: 2%;
}
.左内容正文{
width: 90%;height: 70%;background-color:rgba(0,0,0,0.2);color: white;padding-left: 5%;padding-right: 5%;padding-top: 5%; font-size: 20px;;
}
.右内容框{
width:40%;
height: 100%;
position: relative;
text-align: center;
border-radius: 0px 25px 25px 0px ;
}
.右图框{
width: 80%;height: 80%;background-color: azure;margin: 10%;border-radius: 25px 25px 25px 25px ;
}
底部
@charset "utf-8";
/* CSS Document */
.底部{
position: relative;
height: 130px;
width: 100%;
bottom: -0;
display: flex;
background-color: #232323;
color: white;
/* 水平居中,技巧 */
z-index: 9;
}
.底部logo{
position: absolute;
margin-top: 20px;
margin-left: 10%;
width: 100%;
}
.著作声明{
position: absolute;
padding-top: 20px;
margin-right: 10%
width:20%;
right:0;
font-size: 15px;
}