html设计

最新推荐文章于 2024-06-05 10:27:28 发布

tianxiakun

最新推荐文章于 2024-06-05 10:27:28 发布

阅读量153

点赞数 1

分类专栏： html 文章标签： css html html5

本文链接：https://blog.csdn.net/tianxiakun/article/details/120451585

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

话不多说，先展示图片
在这里插入图片描述

一看图片背景，老二次元了
附上代码和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="左内容正文">&emsp;&emsp;########################################################
			</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;
		}

tianxiakun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html设计

话不多说，先展示图片一看图片背景，老二次元了附上代码和css这是一个纯静态的网站，算是网页小白的第一个作品因为喜欢暗暗的风格所以基调都是偏黑多一点当然因为初学，所以命名上就用了我更好快速理解的名字网页图片的地址，就需要你们自己去找咯，哈哈index部分<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" cont
复制链接

扫一扫

专栏目录